Vue3+SpringBoot资料：新手入门与实践指南

本文介绍了如何使用Vue3和SpringBoot搭建前后端分离的项目，涵盖了Vue3和SpringBoot的基础入门、集成步骤以及实战项目，提供了详细的配置和代码示例，帮助开发者快速上手vue3+springboot资料。

Vue是一个用于构建用户界面的渐进式JavaScript框架。它具有易于上手的API，能够高效开发大型单页应用。Vue3是Vue的最新版本，它在Vue2的基础上进行了改进和优化，提供了更好的性能、更强大的特性以及更简洁的API。

Vue3与Vue2的区别

1. Composition API: Vue3引入了Composition API，这是一个新的API集合，用于更灵活地组织和重用组件逻辑。

2. Teleport: 新增了一个Teleport组件，允许将子组件渲染到DOM中的任何位置，包括DOM树之外的位置。

3. 更好的TypeScript支持: Vue3提升了与TypeScript的兼容性，包括更佳的类型推断和更好的工具支持。

4. 更好的性能: Vue3通过Tree-shaking减少了未使用的代码，提升了渲染和更新的性能。

5. 新的Render Function: 引入了新的Render Function API，提供了更细粒度的性能优化。

6. 更好的错误消息: Vue3改进了错误消息，提供了更准确和有用的调试信息。

7. 自定义渲染器: Vue3允许开发者编写自定义渲染器，这使得Vue可以支持更多不同的宿主环境。

Vue3项目搭建

1. 创建一个新的Vue3项目，首先需要安装Node.js和Vue CLI。

   npm install -g @vue/cli

2. 使用Vue CLI创建一个新的Vue3项目，并配置vue.config.js。

   vue create my-vue3-project

3. 在创建过程中，选择Vue3作为基础。

   ? Please pick a preset:
   manual (babel, router, vuex, eslint)

4. 配置vue.config.js，例如设置代理以解决开发环境中的跨域问题。

   module.exports = {
       devServer: {
           proxy: 'http://localhost:8080'
       }
   };

5. 进入项目目录并启动开发服务器。

   cd my-vue3-project
   npm run serve

6. 配置package.json中的脚本，例如：

   "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
   }

Spring Boot是一个框架，它基于Spring框架简化了配置和开发过程，提供了自动配置功能，使开发者能够快速启动项目。Spring Boot的设计目标是减少新项目的配置时间，让开发者专注于编写业务逻辑。

SpringBoot与Spring的区别

1. 自动配置: Spring Boot通过约定优于配置的原则，自动配置了许多常见的场景，例如数据源、Servlet容器等，开发者只需少量的配置即可启动一个完整的Java应用。

2. 独立运行: Spring Boot应用可以打包成独立的可执行jar文件，包含运行时需要的全部依赖，并且可以通过简单的命令启动应用，而无需额外的配置。

3. 生产就绪特性: Spring Boot提供了许多内置的设置，使应用在部署时即具备生产环境的特性，例如线程池配置、Tomcat连接器优化等。

4. 无代码生成、无XML: Spring Boot鼓励使用注解配置，避免了XML配置文件的使用，同时不需要生成大量的配置代码。

SpringBoot项目搭建

1. 创建一个新的Spring Boot项目，使用Maven或Gradle作为构建工具。

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

2. 添加一个主类来启动Spring Boot应用。

   import org.springframework.boot.SpringApplication;
   import org.springframework.boot.autoconfigure.SpringBootApplication;
   
   @SpringBootApplication
   public class MySpringBootApplication {
       public static void main(String[] args) {
           SpringApplication.run(MySpringBootApplication.class, args);
       }
   }

3. 创建一个简单的控制器类。

   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.RestController;
   
   @RestController
   public class HelloController {
       @GetMapping("/hello")
       public String sayHello() {
           return "Hello, World!";
       }
   }

4. 使用IDE或命令行运行项目。

   mvn spring-boot:run

前后端分离是一种开发模式，前端和后端分别开发独立的模块，前端主要负责页面的渲染和交互，后端主要负责数据的处理和逻辑的实现。这种模式可以提高开发效率，增强可维护性，同时使得前后端可以独立进行迭代和部署。

Vue3与SpringBoot集成的基本步骤

1. 前端项目准备:

   • 创建一个新的Vue3项目，并配置好网络请求。
   • 安装axios作为HTTP客户端。

   vue create my-vue3-project
   cd my-vue3-project
   npm install axios

2. 后端项目准备:

   • 在Spring Boot项目中配置API接口，例如创建一个控制器类。

   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.RestController;
   
   @RestController
   public class HelloController {
       @GetMapping("/hello")
       public String sayHello() {
           return "Hello, World!";
       }
   }

3. 前端请求后端API:

   • 在Vue3项目中使用axios发起请求，例如在src/api/index.js中配置请求。

   import axios from 'axios';
   
   export function getHello() {
       return axios.get('/hello')
           .then(response => response.data)
           .catch(error => console.error('Error fetching data:', error));
   }

4. 在Vue组件中使用请求结果:

   • 显示从后端获取的数据，例如在src/components/HelloWorld.vue中。

   <template>
       <div>
           <h1>{{ message }}</h1>
       </div>
   </template>
   
   <script>
   import { getHello } from '../api';
   
   export default {
       data() {
           return {
               message: ''
           };
       },
       created() {
           getHello().then(data => {
               this.message = data;
           });
       }
   };
   </script>

5. 启动项目:

   • 在开发环境中启动Vue3和Spring Boot应用。

   npm run serve
   mvn spring-boot:run

配置步骤

1. 引入Web Starter:

   • 在pom.xml中添加Spring Boot Web Starter依赖。

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

2. 创建Controller:

   • 定义接口逻辑，例如UserController。

   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.RestController;
   
   @RestController
   public class UserController {
       @GetMapping("/users")
       public String getUsers() {
           return "User List";
       }
   }

3. 配置应用端口:

   • 在application.properties或application.yml中配置端口。

   server.port=8080

4. 配置跨域支持:

   • 添加跨域配置，允许特定的请求头和域名。

   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.cors.CorsConfiguration;
   import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
   import org.springframework.web.filter.CorsFilter;
   
   @Configuration
   public class CorsConfig {
       @Bean
       public CorsFilter corsFilter() {
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           CorsConfiguration config = new CorsConfiguration();
           config.setAllowCredentials(true);
           config.addAllowedOrigin("*");
           config.addAllowedHeader("*");
           config.addAllowedMethod("*");
           source.registerCorsConfiguration("/**", config);
           return new CorsFilter(source);
       }
   }

本项目的目标是实现一个简单的用户管理系统，该系统需要支持用户注册、登录、查看用户列表和编辑用户信息。

功能模块

1. 用户注册: 用户可以输入用户名和密码进行注册。
2. 用户登录: 用户可以输入用户名和密码进行登录。
3. 用户列表: 显示所有用户的列表。
4. 用户编辑: 编辑用户的详细信息。

用户注册实现

1. 定义实体类:

   • 创建用户实体类。

   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 username;
       private String password;
   
       // getter和setter方法
   }

2. 定义Repository:

   • 创建用户仓库接口。

   import org.springframework.data.jpa.repository.JpaRepository;
   
   import java.util.Optional;
   
   public interface UserRepository extends JpaRepository<User, Long> {
       Optional<User> findByUsername(String username);
   }

3. 定义Service:

   • 创建用户服务接口。

   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.stereotype.Service;
   import java.util.Optional;
   
   @Service
   public class UserService {
       @Autowired
       private UserRepository userRepository;
   
       public void registerUser(User user) {
           userRepository.save(user);
       }
   
       public Optional<User> getUserByUsername(String username) {
           return userRepository.findByUsername(username);
       }
   }

4. 定义Controller:

   • 创建用户控制器。

   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.*;
   
   @RestController
   public class UserController {
       @Autowired
       private UserService userService;
   
       @PostMapping("/register")
       public String register(@RequestBody User user) {
           userService.registerUser(user);
           return "User registered successfully";
       }
   
       @GetMapping("/users/{username}")
       public Optional<User> getUser(@PathVariable String username) {
           return userService.getUserByUsername(username);
       }
   }

用户登录实现

1. 定义Controller:

   • 实现登录逻辑。

   
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.*;
   
   @RestController
   public class UserController {
       @Autowired
   .