学习笔记 | 前后端分离模式

前后端分离模式

为什么要分离

历史模式（JSP&Servlet）中 jsp文件到后期可能过于庞大，维护困难。
MVC时代以后端为主，分Controller（路由器作用，对外提供Url接口），Model（和数据库表格的映射），View（浏览器页面显示，映射到jsp）来控制架构。但是，每次访问一次此Controller，View就会刷新一次，网络慢的时候页面就会白屏，用户体验会不好。通过使用AJAX请求，就可以只更新页面部分内容，不用整个页面刷新。AJAX会返回JSON、xml、String等数据，解析后，JS就可以只更新页面某一块的数据情况。
然而，当大量使用AJAX请求时，js请求的数量会大量增加。
比如单页面应用，只有一个html，剩下的全部用js和CSS处理。
对于单界面应用，使用前后端分离模式处理，

后端人员可以不会前端知识，前端人员可以不会后端知识，约定好url接口即可。

前后端分离优劣

模式没有好坏之分，只有合适不合适

优势

• 降低前后端耦合
• 前后端职责清晰
• 降低维护成本
• 前端性能优化

劣势

• 多了一个server，增加了部署和维护成本成本
• 增加了一层Nodejs，提高了网络传输的开销
• 对前端开发者的技术要求较高（js、css、vue都要学）
• 前后端沟通成本大

如何分离

浏览器发起请求，发送到前端服务器，前端服务器用路由接收，前端服务器发起请求，后端把数据返回给前端展示到页面。

themeleft(jsp)
layui(vue)

前后端分离模块后端跨域请求问题

*可以填“localhost:8080”
前端服务器8080到后端服务器9090端口可能会不允许，需要配置允许跨域配置。
index.vue中

运行后