SpringBoot+Vue前后端项目

在搭建一个基于 Spring Boot 和 Vue 的前后端分离项目时，需要从后端和前端两个角度进行配置和开发。以下是一个完整的流程说明。 ### 后端（Spring Boot） 1. **创建 Spring Boot 项目** 使用 [Spring Initializr](https://start.spring.io/) 创建一个基础的 Spring Boot 项目，选择 Web、JPA、Security 等相关依赖。 2. **配置 CORS 支持** 前后端分离时，由于域名或端口不同，会遇到跨域问题。可以在 Spring Boot 中添加全局配置类来允许跨域请求： ```java @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") // Vue 前端运行地址 .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); } }; } } ``` 3. **实现 RESTful API 接口** 在 Controller 层编写返回 JSON 数据的接口，例如： ```java @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserService userService; @GetMapping public List<User> getAllUsers() { return userService.findAll(); } @PostMapping public User createUser(@RequestBody User user) { return userService.save(user); } } ``` 4. **集成安全框架（如 Spring Security）** 配置用户登录、权限控制等功能，确保系统安全性。 ### 前端（Vue） 1. **安装 Vue CLI 并创建项目** 使用 Vue CLI 快速生成项目结构： ```bash npm install -g @vue/cli vue create knowledge-base-frontend ``` 进入项目目录并启动开发服务器： ```bash cd knowledge-base-frontend npm run serve ``` 2. **配置 Vue Router** 安装并配置 Vue Router 来支持页面导航功能： ```bash npm install vue-router@next --save ``` 创建 `router/index.js` 文件： ```javascript import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router ``` 在 `main.js` 中引入路由： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 3. **与后端 API 通信（使用 Axios）** 安装 Axios 并封装 HTTP 请求工具类： ```bash npm install axios ``` 创建 `utils/request.js`： ```javascript import axios from 'axios' const service = axios.create({ baseURL: 'http://localhost:8081', // Spring Boot 后端地址 timeout: 5000 }) export default service ``` 在组件中调用 API： ```vue <script> import request from '@/utils/request' export default { data() { return { users: [] } }, mounted() { request.get('/api/users').then(res => { this.users = res.data }) } } </script> ``` 4. **构建与部署** 开发完成后，使用以下命令打包 Vue 项目： ```bash npm run build ``` 打包后的文件会生成在 `dist` 目录下，可以将其部署到 Nginx 或其他静态资源服务器上[^3]。 ### 前后端联调注意事项 1. **统一数据格式** 确保后端返回的数据格式一致，便于前端处理。建议采用如下通用结构： ```json { "code": 200, "message": "操作成功", "data": {} } ``` 2. **错误处理机制** 前端应统一处理网络异常和业务错误，避免页面崩溃。 3. **API 文档管理** 使用 Swagger 或 Postman 管理接口文档，方便前后端协作。 ---