首页手记 Vue3+SpringBoot资料入门教程

Vue3+SpringBoot资料入门教程

标签：

Vue.js SpringBoot

概述

本文详细介绍了Vue3与SpringBoot的基础入门知识，包括Vue3的快速上手和SpringBoot的快速搭建，提供了丰富的示例代码和项目实战指导。此外，文章还涵盖了Vue3与SpringBoot项目的环境搭建及交互方式，帮助读者全面掌握Vue3+SpringBoot资料。

Vue3基础入门

Vue3简介

Vue.js 是一个渐进的 JavaScript 框架，它允许开发者构建交互式的 Web 应用程序。Vue3 是 Vue.js 的最新版本，提供了更快的渲染性能、更小的包体积、新的组合式 API 和更好的 TypeScript 支持等新特性。

Vue3的主要特性

更高效的渲染机制
完全响应的数据模型
组件化开发
插槽和作用域插槽
组合式 API

Vue3快速上手

要快速上手 Vue3，首先需要安装 Vue CLI（命令行工具）。通过 Vue CLI 可以快速创建和管理 Vue 项目。

安装 Vue CLI
```
npm install -g @vue/cli
```
创建一个新的 Vue 项目
```
vue create my-project
```
选择 Vue3 版本

在创建项目时，可以选择已安装的模板，或者手动配置，确保选择 Vue3 版本。

Vue3项目结构介绍

一个标准的 Vue3 项目通常包含以下目录和文件：

public/：存放静态资源，如 index.html，这些文件会被直接复制到构建输出的根目录。
src/：存放应用的源代码。
- assets/：存放静态资源文件，如图片、字体等。
- components/：存放 Vue 组件。
- views/：存放视图组件。
  .
App.vue：应用的主组件。
main.js：应用的入口文件，负责启动应用。
router/：存放路由配置。
package.json：存放项目的依赖和脚本命令。
README.md：项目说明文档。

示例代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// App.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  }
}
</script>

SpringBoot基础入门

SpringBoot简介

Spring Boot 是一个构建在 Spring 框架上的轻量级框架，它简化了传统的 Spring 应用程序开发流程。Spring Boot 的主要目标是减少开发、配置以及依赖管理的复杂性。

SpringBoot快速搭建

创建一个新的 Spring Boot project

可以使用 Spring Initializr（在线工具）或 Spring Boot CLI 创建一个新的 Spring Boot 项目。

添加必要的依赖

<dependencies>
 <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
</dependencies>

主应用类

创建一个主应用类，使用 @SpringBootApplication 注解标记。

@SpringBootApplication
public class Application {
   public static void main(String[] args) {
       SpringApplication.run(Application.class, args);
   }
}

SpringBoot项目结构介绍

一个标准的 Spring Boot 项目通常包含以下目录和文件：

src/main/java/：存放 Java 类文件。
- com/example/：存放包结构。
- Application.java：主应用类。
src/main/resources/：存放资源文件。
- application.properties：应用配置文件。
- static/：存放静态资源文件。
- templates/：存放模板文件。
pom.xml：存放项目的依赖和构建配置。
README.md：项目说明文档。

示例代码

// Application.java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

// Controller 示例
package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello Spring Boot";
    }
}

Vue3与SpringBoot环境搭建

开发环境准备

要搭建 Vue3 与 Spring Boot 开发环境，需要安装以下工具：

Node.js：Vue3 的运行依赖。
Java Development Kit (JDK)：Spring Boot 的运行依赖。
IDE：如 IntelliJ IDEA 或 Eclipse。
Vue CLI 和 Spring Boot CLI：用于快速创建和管理项目。

构建Vue3项目

安装 Vue CLI
```
npm install -g @vue/cli
```
创建一个新的 Vue 项目
```
vue create my-vue-app
```
选择 Vue3 版本

创建项目时，确保选择 Vue3 版本。

构建SpringBoot项目

创建一个新的 Spring Boot 项目

使用 Spring Initializr 创建一个新的 Spring Boot 项目。
添加必要的依赖

在 pom.xml 文件中添加必要的依赖，如 spring-boot-starter-web。
构建项目

使用 Maven 或 Gradle 构建项目。

示例代码

# 创建 Vue 项目
vue create my-vue-app
cd my-vue-app
npm run serve

<!-- pom.xml -->
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

Vue3与SpringBoot交互基础

前后端交互方式介绍

前后端交互方式主要包括：

RESTful API：前后端通过 HTTP 协议进行数据交换。
WebSocket：实时双向通信。
GraphQL：灵活的数据查询。

使用RESTful API进行数据交互

RESTful API 是最常见的前后端交互方式。前端通过 HTTP 请求（如 GET、POST、PUT、DELETE）与后端进行数据交换。

使用axios发送请求

axios 是一个流行的 HTTP 客户端，可以用于发送 HTTP 请求。以下是一个使用 axios 发送 GET 请求的示例：

示例代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

createApp(App).mount('#app');

// App.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  },
  methods: {
    async fetchMessage() {
      const response = await axios.get('http://localhost:8080/hello');
      this.message = response.data;
    }
  },
  created() {
    this.fetchMessage();
  }
}
</script>

// Controller 示例
package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello Spring Boot";
    }
}

Vue3与SpringBoot项目实战

实战项目选题

假设我们要开发一个简单的博客应用，前端使用 Vue3，后端使用 Spring Boot。博客应用需要支持添加新文章、查看文章列表、编辑和删除文章等功能。

项目需求分析

前端需求：

用户界面：展示文章列表、文章详情、添加文章、编辑文章、删除文章。
数据交互：发送 HTTP 请求与后端进行数据交互。

后端需求：

文章管理：支持添加、查询、编辑和删除文章。
数据存储：使用数据库存储文章数据。

分步实现项目功能

后端实现

创建文章表结构

CREATE TABLE article (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

实现添加、查询、编辑和删除文章的接口

// ArticleController.java
package com.example.demo.controller;

import com.example.demo.model.Article;
import com.example.demo.service.ArticleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/articles")
public class ArticleController {

 @Autowired
 private ArticleService articleService;

 @GetMapping
 public List<Article> getArticles() {
     return articleService.getAllArticles();
 }

 @PostMapping
 public Article addArticle(@RequestBody Article article) {
     return articleService.saveArticle(article);
 }

 @PutMapping("/{id}")
 public Article updateArticle(@PathVariable("id") Long id, @RequestBody Article article) {
     article.setId(id);
     return articleService.saveArticle(article);
 }

 @DeleteMapping("/{id}")
 public void deleteArticle(@PathVariable("id") Long id) {
     articleService.deleteArticle(id);
 }
}

// ArticleService.java
package com.example.demo.service;

import com.example.demo.model.Article;
import com.example.demo.repository.ArticleRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ArticleService {

 @Autowired
 private ArticleRepository articleRepository;

 public List<Article> getAllArticles() {
     return articleRepository.findAll();
 }

 public Article saveArticle(Article article) {
     return articleRepository.save(article);
 }

 public void deleteArticle(Long id) {
     articleRepository.deleteById(id);
 }
}

// ArticleRepository.java
package com.example.demo.repository;

import com.example.demo.model.Article;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ArticleRepository extends JpaRepository<Article, Long> {
}

前端实现

创建文章列表页面

// ArticleList.vue
<template>
<div>
 <h2>文章列表</h2>
 <ul>
   <li v-for="article in articles" :key="article.id">
     {{ article.title }}
   </li>
 </ul>
</div>
</template>

<script>
export default {
data() {
 return {
   articles: []
 };
},
created() {
 this.fetchArticles();
},
methods: {
 async fetchArticles() {
   const response = await axios.get('/articles');
   this.articles = response.data;
 }
}
}
</script>

创建文章详情页面

// ArticleDetail.vue
<template>
<div>
 <h2>{{ article.title }}</h2>
 <p>{{ article.content }}</p>
 <button @click="handleDelete">删除文章</button>
</div>
</template>

<script>
export default {
data() {
 return {
   article: {}
 };
},
created() {
 this.fetchArticle();
},
methods: {
 async fetchArticle() {
   const response = await axios.get(`articles/${this.$route.params.id}`);
   this.article = response.data;
 },
 async handleDelete() {
   await axios.delete(`articles/${this.$route.params.id}`);
   this.$router.push('/articles');
 }
}
}
</script>

创建文章编辑页面

// ArticleEdit.vue
<template>
<div>
 <h2>编辑文章</h2>
 <form @submit.prevent="handleSubmit">
   <input v-model="article.title" placeholder="标题" />
   <textarea v-model="article.content" placeholder="内容"></textarea>
   <button type="submit">保存</button>
 </form>
</div>
</template>

<script>
export default {
data() {
 return {
   article: {
     id: this.$route.params.id,
     title: '',
     content: ''
   }
 };
},
created() {
 this.fetchArticle();
},
methods: {
 async fetchArticle() {
   const response = await axios.get(`articles/${this.$route.params.id}`);
   this.article = response.data;
 },
 async handleSubmit() {
   await axios.put(`articles/${this.article.id}`, this.article);
   this.$router.push('/articles');
 }
}
}
</script>

常见问题及解决方法

常见开发问题

Vue3 与 Spring Boot 间数据交互问题
- 数据格式不一致
- 后端接口未正确实现
Vue3 项目构建问题
- 依赖安装失败
- 项目启动失败
Spring Boot 项目构建问题
- 依赖版本冲突
- 应用启动失败

解决方案与技巧分享

数据交互问题
- 数据格式不一致：确保前后端数据格式一致。前端请求和后端返回的数据格式应保持一致。
- 后端接口未正确实现：确保后端接口实现正确。检查接口路径、请求方法和返回数据。
Vue3 项目构建问题
- 依赖安装失败：检查网络连接，确保依赖仓库可用。使用 npm install 或 yarn install 安装依赖。
- 项目启动失败：检查项目配置文件，确保没有语法错误。使用 npm run serve 启动项目。
Spring Boot 项目构建问题
- 依赖版本冲突：检查 pom.xml 或 build.gradle 文件，确保依赖版本一致。
- 应用启动失败：检查日志输出，定位具体错误。使用 mvn spring-boot:run 或 gradle bootRun 启动应用。

示例代码

解决数据格式问题

// 请求数据格式
{
  "title": "Vue3与SpringBoot教程",
  "content": "这是一个教程"
}

// 响应数据格式
{
  "id": 1,
  "title": "Vue3与SpringBoot教程",
  "content": "这是一个教程",
  "created_at": "2023-10-01T12:00:00Z"
}

解决项目启动失败问题

# 检查配置文件
cat src/main/resources/application.properties

# 启动项目
mvn spring-boot:run

以上是 Vue3 与 Spring Boot 入门教程的详细内容，希望对你有所帮助。如果你有任何疑问或需要进一步的帮助，请参考慕课网的相关课程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

德玛西亚99

手记
篇

粉丝

92

获赞与收藏

559

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3+SpringBoot资料入门教程

Vue3简介

Vue3的主要特性

Vue3快速上手

Vue3项目结构介绍

示例代码

SpringBoot简介

SpringBoot快速搭建

SpringBoot项目结构介绍

示例代码

开发环境准备

构建Vue3项目

构建SpringBoot项目

示例代码

前后端交互方式介绍

使用RESTful API进行数据交互

使用axios发送请求

示例代码

实战项目选题

项目需求分析

分步实现项目功能

常见开发问题

解决方案与技巧分享

示例代码

阅读免费教程