开发一个基于Spring Boot和Vue 3的前后端分离管理系统是一个常见的现代Web开发任务。以下是一个基本的开发流程，涵盖后端（Spring Boot + SSM，即Spring MVC, Spring, MyBatis）和前端（Vue 3）的搭建和集成。

一、项目结构

1. 后端（Spring Boot + SSM）
   • springboot-ssm-backend
     • src/main/java/com/example/demo：Java源代码
     • src/main/resources：配置文件和资源文件
     • pom.xml：Maven依赖管理
2. 前端（Vue 3）
   • vue3-frontend
     • src：Vue源代码
     • public：静态资源
     • package.json：Node.js依赖管理

二、后端开发

1. 创建Spring Boot项目

使用Spring Initializr或IDE（如IntelliJ IDEA或Eclipse）创建一个新的Spring Boot项目，选择以下依赖：

• Spring Web
• Spring Data JPA
• MySQL Driver
• MyBatis Framework
• Lombok（可选，用于简化Java代码）

2. 配置数据库连接

在application.properties或application.yml中配置数据库连接信息：

	properties复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name
				

			

			

				
				

					
					

						
					

				

				

					spring.datasource.username=your_username
				

			

			

				
				

					
					

						
					

				

				

					spring.datasource.password=your_password
				

			

			

				
				

					
					

						
					

				

				

					spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					mybatis.mapper-locations=classpath:mapper/*.xml
				

			

		

	

3. 创建实体类和Mapper接口

创建实体类（如User），并在mapper目录下创建对应的Mapper接口和XML文件。

	java复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// User.java
				

			

			

				
				

					
					

						
					

				

				

					package com.example.demo.entity;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import lombok.Data;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@Data
				

			

			

				
				

					
					

						
					

				

				

					public class User {
				

			

			

				
				

					
					

						
					

				

				

					private Long id;
				

			

			

				
				

					
					

						
					

				

				

					private String name;
				

			

			

				
				

					
					

						
					

				

				

					private String email;
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

		

	

	java复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// UserMapper.java
				

			

			

				
				

					
					

						
					

				

				

					package com.example.demo.mapper;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import com.example.demo.entity.User;
				

			

			

				
				

					
					

						
					

				

				

					import org.apache.ibatis.annotations.Mapper;
				

			

			

				
				

					
					

						
					

				

				

					import org.apache.ibatis.annotations.Select;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import java.util.List;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@Mapper
				

			

			

				
				

					
					

						
					

				

				

					public interface UserMapper {
				

			

			

				
				

					
					

						
					

				

				

					@Select("SELECT * FROM users")
				

			

			

				
				

					
					

						
					

				

				

					List<User> findAll();
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

		

	

4. 创建Service和Controller

	java复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// UserService.java
				

			

			

				
				

					
					

						
					

				

				

					package com.example.demo.service;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import com.example.demo.entity.User;
				

			

			

				
				

					
					

						
					

				

				

					import java.util.List;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					public interface UserService {
				

			

			

				
				

					
					

						
					

				

				

					List<User> findAll();
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

		

	

	java复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// UserServiceImpl.java
				

			

			

				
				

					
					

						
					

				

				

					package com.example.demo.service.impl;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import com.example.demo.entity.User;
				

			

			

				
				

					
					

						
					

				

				

					import com.example.demo.mapper.UserMapper;
				

			

			

				
				

					
					

						
					

				

				

					import com.example.demo.service.UserService;
				

			

			

				
				

					
					

						
					

				

				

					import org.springframework.beans.factory.annotation.Autowired;
				

			

			

				
				

					
					

						
					

				

				

					import org.springframework.stereotype.Service;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import java.util.List;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@Service
				

			

			

				
				

					
					

						
					

				

				

					public class UserServiceImpl implements UserService {
				

			

			

				
				

					
					

						
					

				

				

					@Autowired
				

			

			

				
				

					
					

						
					

				

				

					private UserMapper userMapper;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@Override
				

			

			

				
				

					
					

						
					

				

				

					public List<User> findAll() {
				

			

			

				
				

					
					

						
					

				

				

					return userMapper.findAll();
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

		

	

	java复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// UserController.java
				

			

			

				
				

					
					

						
					

				

				

					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.GetMapping;
				

			

			

				
				

					
					

						
					

				

				

					import org.springframework.web.bind.annotation.RequestMapping;
				

			

			

				
				

					
					

						
					

				

				

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

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					import java.util.List;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@RestController
				

			

			

				
				

					
					

						
					

				

				

					@RequestMapping("/api/users")
				

			

			

				
				

					
					

						
					

				

				

					public class UserController {
				

			

			

				
				

					
					

						
					

				

				

					@Autowired
				

			

			

				
				

					
					

						
					

				

				

					private UserService userService;
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					@GetMapping
				

			

			

				
				

					
					

						
					

				

				

					public List<User> getAllUsers() {
				

			

			

				
				

					
					

						
					

				

				

					return userService.findAll();
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

		

	

5. 启动后端服务

运行Spring Boot应用程序，确保后端服务启动成功。

三、前端开发

1. 创建Vue 3项目

使用Vue CLI创建一个新的Vue 3项目：

	bash复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					npm install -g @vue/cli
				

			

			

				
				

					
					

						
					

				

				

					vue create vue3-frontend
				

			

		

	

选择Vue 3版本和其他需要的配置。

2. 安装Axios

Axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。

	bash复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					cd vue3-frontend
				

			

			

				
				

					
					

						
					

				

				

					npm install axios
				

			

		

	

3. 创建Vue组件和服务

在src目录下创建组件和服务。

	javascript复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					// src/services/api.js
				

			

			

				
				

					
					

						
					

				

				

					import axios from 'axios';
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					const apiClient = axios.create({
				

			

			

				
				

					
					

						
					

				

				

					baseURL: 'http://localhost:8080', // 后端服务地址
				

			

			

				
				

					
					

						
					

				

				

					withCredentials: false,
				

			

			

				
				

					
					

						
					

				

				

					headers: {
				

			

			

				
				

					
					

						
					

				

				

					Accept: 'application/json',
				

			

			

				
				

					
					

						
					

				

				

					'Content-Type': 'application/json'
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

			

				
				

					
					

						
					

				

				

					});
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					export const getUserList = () => apiClient.get('/api/users');
				

			

		

	

	vue复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					<!-- src/components/UserList.vue -->
				

			

			

				
				

					
					

						
					

				

				

					<template>
				

			

			

				
				

					
					

						
					

				

				

					<div>
				

			

			

				
				

					
					

						
					

				

				

					<h1>User List</h1>
				

			

			

				
				

					
					

						
					

				

				

					<ul>
				

			

			

				
				

					
					

						
					

				

				

					<li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
				

			

			

				
				

					
					

						
					

				

				

					</ul>
				

			

			

				
				

					
					

						
					

				

				

					</div>
				

			

			

				
				

					
					

						
					

				

				

					</template>
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					<script>
				

			

			

				
				

					
					

						
					

				

				

					import { getUserList } from '../services/api';
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					export default {
				

			

			

				
				

					
					

						
					

				

				

					data() {
				

			

			

				
				

					
					

						
					

				

				

					return {
				

			

			

				
				

					
					

						
					

				

				

					users: []
				

			

			

				
				

					
					

						
					

				

				

					};
				

			

			

				
				

					
					

						
					

				

				

					},
				

			

			

				
				

					
					

						
					

				

				

					created() {
				

			

			

				
				

					
					

						
					

				

				

					getUserList().then(response => {
				

			

			

				
				

					
					

						
					

				

				

					this.users = response.data;
				

			

			

				
				

					
					

						
					

				

				

					});
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

			

				
				

					
					

						
					

				

				

					};
				

			

			

				
				

					
					

						
					

				

				

					</script>
				

			

		

	

4. 挂载组件

在src/App.vue中挂载UserList组件。

	vue复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					<template>
				

			

			

				
				

					
					

						
					

				

				

					<div id="app">
				

			

			

				
				

					
					

						
					

				

				

					<UserList />
				

			

			

				
				

					
					

						
					

				

				

					</div>
				

			

			

				
				

					
					

						
					

				

				

					</template>
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					<script>
				

			

			

				
				

					
					

						
					

				

				

					import UserList from './components/UserList.vue';
				

			

			

				
				

					
					

						
					

				

				

					
				

			

			

				
				

					
					

						
					

				

				

					export default {
				

			

			

				
				

					
					

						
					

				

				

					name: 'App',
				

			

			

				
				

					
					

						
					

				

				

					components: {
				

			

			

				
				

					
					

						
					

				

				

					UserList
				

			

			

				
				

					
					

						
					

				

				

					}
				

			

			

				
				

					
					

						
					

				

				

					};
				

			

			

				
				

					
					

						
					

				

				

					</script>
				

			

		

	

5. 运行前端服务

	bash复制代码



	
	

		
		

			
			

				
				

					
					

						
					

				

				

					npm run serve
				

			

		

	

确保前端服务启动成功，并能够在浏览器中访问。

四、前后端集成

确保后端服务和前端服务都能正常访问，并且前端服务能够正确调用后端API。

五、部署

1. 后端部署：将Spring Boot项目打包成JAR文件，并部署到服务器或使用Docker容器化。
2. 前端部署：将Vue项目打包成静态文件，并部署到Nginx或其他静态文件服务器。

六、总结

通过以上步骤，你可以创建一个基于Spring Boot和Vue 3的前后端分离管理系统。这个流程涵盖了基本的项目结构、后端开发、前端开发、前后端集成和部署。根据实际需求，你可以进一步扩展和优化项目。