本文介绍了如何结合使用Vue3和SpringBoot进行全栈开发，涵盖了从环境搭建到项目部署的全过程。Vue3提供了现代化的前端开发工具，而SpringBoot简化了后端开发流程，二者结合能够快速构建高效、可维护的应用。文章详细解释了如何安装和配置开发环境，创建Vue3和SpringBoot项目，以及实现前后端交互。
简介什么是Vue3
Vue是一个用于构建用户界面的渐进式框架，由尤雨辰在2014年发布。Vue的设计目标是尽可能简化Web开发，使开发者能够更加专注于应用的业务逻辑。Vue3是Vue框架的最新版本，它带来了一系列性能优化和新特性，比如更小的体积、更快的响应速度、更强大的组合式API等，同时保持了易用性和灵活性。
什么是SpringBoot
SpringBoot是由Pivotal公司开发的基于Spring框架的轻量级框架，它简化了传统Spring应用程序的开发和配置过程。SpringBoot旨在提供一套"约定优于配置"的开发模式，让开发者能够快速地构建独立、生产级别的应用。它支持自动配置、内嵌的Web服务器、全面的开发功能、内置的集成安全等特性，极大地方便了开发人员。
为什么选择Vue3+SpringBoot组合
Vue3与SpringBoot的组合是目前最流行的前后端分离架构方案之一。Vue3提供了强大的前端开发工具和组件化开发能力，而SpringBoot则简化了服务端开发的过程。这种组合可以实现快速开发、高效部署和良好的可维护性。同时，两个框架都有强大的社区支持和广泛的文档资料，这使得开发者在遇到问题时能够迅速找到解决方案。
开发环境搭建安装Node.js和npm
要搭建Vue3项目，首先需要安装Node.js及其包管理器npm。在Node.js官网下载最新版本的Node.js并进行安装。安装完成后，可以通过以下命令检查Node.js和npm是否安装成功：
node -v
npm -v这两个命令将分别打印出Node.js和npm的版本号，验证安装是否成功。
全局安装Vue CLI
Vue CLI是一个基于Yeoman的命令行工具，可以用来快速搭建Vue项目。使用npm命令全局安装Vue CLI：
npm install -g @vue/cli安装完成后，可以运行以下命令来验证Vue CLI是否安装成功：
vue --version如果成功安装，将打印出Vue CLI的版本号。
创建Vue3项目
通过Vue CLI快速创建一个新的Vue项目。在命令行中执行以下命令：
vue create my-vue-app选择默认配置或者选择手动配置项目设置。安装完成后，进入项目目录并启动开发服务器：
cd my-vue-app
npm run serve此时可以在浏览器中访问http://localhost:8080来查看Vue应用的启动页面。
创建SpringBoot项目
使用Spring Initializr在线工具或者通过IDE创建SpringBoot项目。以STS（Spring Tool Suite）为例，创建一个简单的Spring Boot项目。在STS中，选择"File" -> "New" -> "Spring Starter Project"。选择合适的Spring Boot版本，并添加Web依赖。
项目创建完成后，生成的项目结构中会包括一系列默认配置文件和启动类。例如：
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}在IDE中运行该项目，可以通过以下命令启动Spring Boot应用：
mvn spring-boot:run或者直接通过运行启动类中的main方法启动应用。
配置IDE开发环境
为了更高效地开发，建议在IDE中配置好开发环境。比如在Maven项目中配置好项目的依赖管理；在Vue项目中，可以配置好ESLint等插件来提高代码质量。
在STS中，可以通过选择"Project" -> "Build Path" -> "Configure Build Path"来配置项目的构建路径。
Vue3前端项目基础文件结构解析
Vue3项目的文件结构与Vue2相似，通常包括以下部分：
my-vue-app/
├── node_modules/
├── public/
│ ├── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.jspublic目录存放静态文件，比如index.html。src目录是项目的核心代码目录，存放组件、样式、路由等。
App.vue是应用的根组件，main.js是应用的入口文件。
路由配置
Vue3使用vue-router来管理应用的路由。首先需要安装vue-router：
npm install vue-router@next在src/router/index.js中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在main.js中引入并使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')组件基础
组件是Vue项目的核心概念。一个组件通常包含一个template、script和style三部分。例如，创建一个HelloWorld.vue组件：
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>在App.vue中使用该组件：
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>学习使用Vuex管理状态
Vuex是Vue应用的状态管理模式，适合管理全局状态和复杂的逻辑。首先安装Vuex：
npm install vuex@next创建一个store/index.js：
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment')
}
},
getters: {
count: state => state.count
}
})在main.js中引入并使用Vuex：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')创建RESTful API
在Spring Boot项目中，创建RESTful API非常简单。首先添加spring-boot-starter-web依赖。然后创建一个控制器（Controller）来处理HTTP请求。例如，创建一个UserController.java：
package com.example.demo.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api/users")
public class UserController {
@GetMapping("/")
public String getHello() {
return "Hello, World!";
}
}此时，当访问/api/users路径时，将返回Hello, World!。
数据库连接与配置
在Spring Boot中，可以通过添加相关依赖来方便地连接数据库。例如，连接MySQL数据库，需要在pom.xml中添加mysql-connector-java和spring-boot-starter-data-jpa依赖。然后在application.properties中配置数据库连接信息：
spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.hibernate.ddl-auto=update这样，Spring Boot会自动配置数据库连接，并在启动时根据ddl-auto属性来创建或更新数据库表结构。
接下来，创建一个简单的数据库操作示例。例如，创建一个用户实体类：
package com.example.demo.entity;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String email;
// Getters and Setters
}创建一个用户服务类：
package com.example.demo.service;
import com.example.demo.entity.User;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserService {
// CRUD operations
}创建一个用户控制器类：
package com.example.demo.controller;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/")
public List<User> getAllUsers() {
return userService.getAllUsers();
}
@PostMapping("/")
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
// Other CRUD APIs
}使用SpringBoot框架搭建简单的用户管理系统
创建一个简单的用户管理系统的步骤包括创建实体类（Entity）、服务（Service）和控制器（Controller）等。首先定义一个用户实体类（如上所示）。
创建一个用户服务类（如上所示）。
创建一个用户控制器类（如上所示）。
探索SpringBoot的自动配置机制
Spring Boot通过@EnableAutoConfiguration注解来自动配置应用程序。例如，在DemoApplication.java中，Spring Boot会根据类路径中的依赖来自动配置应用程序的相应组件。Spring Boot的核心是约定优于配置，它通过自动配置和默认设置来简化开发流程。
跨域问题处理
在Spring Boot项目中，可以通过添加@CrossOrigin注解来处理跨域问题。例如，在一个控制器中添加：
@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/api/users")
public class UserController {
// CRUD APIs
}或者在application.properties中配置全局跨域：
spring.mvc.cors.allowed-origins=http://localhost:8080发送HTTP请求
在Vue项目中，可以使用axios来发送HTTP请求。首先安装axios：
npm install axios在src/services/api.js中定义API调用：
import axios from 'axios'
const API_URL = '/api'
export const getUsers = () => axios.get(`${API_URL}/users`)
export const createUser = (user) => axios.post(`${API_URL}/users`, user)在组件或服务中调用这些方法来与后端进行交互：
import { getUsers } from '@/services/api'
getUsers().then(response => {
console.log(response.data)
})异常处理与日志记录
在Spring Boot中，可以使用@ControllerAdvice来统一处理控制器中的异常。例如，定义一个全局异常处理器：
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
@ControllerAdvice
public class GlobalExceptionHandler {
@ExceptionHandler(Exception.class)
@ResponseBody
public ResponseEntity<String> handleException(Exception e) {
return new ResponseEntity<>(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
}
}在application.properties中配置日志记录：
logging.level.root=INFO这样，所有异常都将返回统一的错误信息，并记录到日志文件中。
使用JWT实现登录认证
JWT（JSON Web Tokens）是一种开放标准（RFC 7519），用来在各方之间安全地传输信息。首先安装相关依赖：
npm install jsonwebtoken在Spring Boot项目中，创建一个JWT工具类：
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.util.Date;
public class JwtUtils {
public static String generateToken(User user) {
return Jwts.builder()
.setSubject(user.getName())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + 86400000))
.signWith(SignatureAlgorithm.HS256, "secretkey")
.compact();
}
public static Claims parseToken(String token) {
return Jwts.parser()
.setSigningKey("secretkey")
.parseClaimsJws(token)
.getBody();
}
}在控制器中实现登录认证：
import org.springframework.security.core.userdetails.User;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api/auth")
public class AuthController {
@PostMapping("/login")
public ResponseEntity<String> login(@RequestBody User user) {
// Check credentials and generate JWT token
String jwtToken = JwtUtils.generateToken(user);
return ResponseEntity.ok(jwtToken);
}
}项目打包与部署
在Spring Boot项目中，可以通过mvn package命令打包项目。打包完成后，生成一个.jar文件，可以使用java -jar命令来运行该应用。例如：
mvn package
java -jar target/myapp.jar部署SpringBoot应用到Tomcat服务器
要部署Spring Boot应用到Tomcat服务器，首先需要将Spring Boot应用打包成.war文件。修改pom.xml中的packaging为war，并添加Tomcat依赖。然后使用mvn package命令生成.war文件。将生成的.war文件部署到Tomcat服务器的webapps目录下即可。
部署Vue3应用到Web服务器
在Vue项目中，可以通过npm run build命令将项目打包成生产环境下的静态文件。打包完成后，生成的文件存放在dist目录下。将这些文件部署到Web服务器的根目录即可。例如，使用nginx配置静态文件服务：
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/dist;
try_files $uri /index.html;
}
}要将Vue项目部署到Web服务器上，首先在项目目录中执行npm run build命令，生成生产环境的文件。然后将这些文件上传到服务器上的/path/to/dist目录，并根据上述配置启动nginx服务。
项目测试与调试
项目测试和调试可以分为前后端两部分。前端可以使用浏览器自带的开发者工具进行调试，也可以使用jest等测试框架进行单元测试。例如，使用jest编写一个简单的单元测试：
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).toBe(msg)
})
})后端可以使用Postman等工具进行接口测试，也可以通过IDE或命令行工具查看日志进行调试。例如，使用Spring Boot Actuator来监控应用的状态和健康情况：
management.endpoints.web.exposure.include=*
management.endpoint.health.show-details=always通过以上步骤，可以搭建并运行一个完整且功能丰富的Vue3+SpringBoot项目。
随时随地看视频
