前后端分离后,遇到的坑

前后端分离实践

前后端分离
前端用ajax发起请求。
后端采用springmvc架构。

第一个问题:
遇到的第一个常见问题,跨域请求。
所以,要在controller类上面加上一个注解
@CrossOrigin
以往不分离的时候,是不需要这个注解的,我们常规的springmvc的controller注解是:
@Controller
@RequestMapping("/Pay")

所以,注意了,前后端分离,一定要在controller上加个 @CrossOrigin

第二个问题:
controller重定向的问题。
重定向的方式有
方式一:使用ModelAndView
return new ModelAndView(“redirect:/toList”);
方式二:返回String
return "redirect:/ toList ";
方式三:response重定向
response.sendRedirect(location);
重定向方式有这三种,但是,前后端分离后,方式一和方式二就不行了。因为方式一和方式二是走的springmvc容器的。
然后,前后端分离后,springmvc是没有页面的,所以无法实现重定向的效果。
第三种方式是可以的。它的本质是响应前端页面。所以,这个重定向本质是在前端发生的。

<think>嗯,用户需要Java+Vue前后端分离项目的架构示例,结合之前的引用内容来看,ta可能是个刚接触前后端分离的Java开发者。引用[1]提到用户对前后端分离"两眼一抹黑",引用[5]详细描述了技术选型优势,这些都很关键。先拆解问题核心:用户要的是"项目架构示例",重点在技术栈组成和交互逻辑。引用[2][3]提供了后端部署细节,引用[4][5]则是前端配置范例,正好能组合成完整方案。架构设计上需要突出分层思想:后端用SpringBoot构建RESTAPI(引用[2]提到的SpringMVC优化),前端Vue通过axios交互(引用[4]的全局配置)。部署部分参考引用[3]的宝塔部署经验,这个对初学者很实用。特别注意用户可能存在的认知盲区:前后端分离本质是职责解耦。引用[5]强调的"后端无需解析前端页面"这点要用示例代码具象化,比如展示后端Controller如何返回纯JSON。安全措施要提醒,引用[4]显示的axios配置没有CSRF防护,实际项目需要补充。路由部分参考引用[5]的按需加载特性,用动态import()演示性能优化。最后生成的示例必须包含可运行的代码片段,用户显然需要能快速验证的脚手架。相关问题的设计要覆盖用户后续可能遇到的工程化难点,比如跨域配置这种高频点。</think> 以下是基于Java和Vue的前后端分离项目架构示例及关键实现细节: --- ### **项目架构设计** #### **1. 后端架构(Java - Spring Boot)** ```java // 示例:用户管理模块 @RestController @RequestMapping("/api/user") public class UserController { @Autowired private UserService userService; // 返回JSON数据,无需视图渲染 @GetMapping("/list") public ResponseEntity<List<User>> getUsers() { return ResponseEntity.ok(userService.getAllUsers()); // [^2] } } ``` **技术栈**: - **Spring Boot 3.x**:快速启动RESTful API服务 - **Spring Security + JWT**:接口鉴权(如`Authorization: Bearer xxx`) - **Spring Data JPA / MyBatis**:数据库操作 - **Maven/Gradle**:依赖管理 - **端口配置**:如`server.port=8080`(需与前端axios调用端口一致)[^3] --- #### **2. 前端架构(Vue 3)** ```javascript // src/api/user.js - 封装axios请求 import axios from 'axios'; export const getUserList = () => { return axios.get('/api/user/list', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }); // [^4][^5] } ``` ```vue <!-- src/views/User.vue --> <template> <el-table :data="users"> <el-table-column prop="name" label="姓名" /> </el-table> </template> <script> import { getUserList } from '@/api/user'; export default { data() { return { users: [] } }, async mounted() { const res = await getUserList(); this.users = res.data; // 绑定后端数据 } } </script> ``` **技术栈**: - **Vue 3 + Vue Router + Pinia**:核心框架与状态管理 - **Element Plus / Ant Design Vue**:UI组件库[^5] - **Axios**:封装HTTP请求(需配置反向代理) - **Vite**:项目构建工具(替代Webpack)[^5] --- #### **3. 前后端交互流程** ```mermaid sequenceDiagram 前端->>后端: HTTP请求(GET /api/user/list) 后端->>数据库: 查询数据 后端-->>前端: 返回JSON格式数据 前端->>前端: 数据渲染到Vue组件 ``` --- ### **关键配置详解** 1. **跨域解决**(开发环境): ```javascript // vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', // Spring Boot地址 changeOrigin: true } } } }) // [^5] ``` 2. **生产部署**: - **后端**:打包为JAR部署至云服务器(如`java -jar app.jar`)[^3] - **前端**:执行`npm run build`生成静态文件,由Nginx托管 - **Nginx配置**: ``` location / { root /var/www/dist; # Vue编译后的目录 try_files $uri $uri/ /index.html; # 支持Vue路由 } location /api { proxy_pass http://127.0.0.1:8080; # 反向代理API请求 } // [^3] ``` --- ### **分离优势总结** | **层面** | **前 端** | **后 端** | |----------------|-----------------------------------|-------------------------------| | **职责分离** | 页面渲染、用户交互 | 业务逻辑、数据安全、接口提供 | | **技术自由** | 可独立升级框架版本 | 专注Java生态优化 | | **部署独立** | 静态资源CDN加速 | 微服务集群部署 | | **协作效率** | 并行开发前端模拟接口/Mock.js) | 提供Swagger接口文档 | [^1][^5] --- ### **学习资源推荐** 1. [Vue官方文档](https://cn.vuejs.org/) - 最佳入门指南[^1] 2. [Spring Boot REST API教程](https://spring.io/guides/gs/rest-service/) 3. [Element Plus组件库](https://element-plus.org/) 4. [Axios拦截器封装示例](https://axios-http.com/docs/interceptors) ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值