前后端分离笔记（动态的请求都通过ajax进行）

1 什么是前后端分离

这里的前后端分离， 定义为网页的动态内容都通过ajax等异步的方式进行。

关于前后端分离常见的另一种含义：前端完全负责view层和controller层。 见另一篇笔记：https://blog.youkuaiyun.com/qq_19768163/article/details/93998521

 

2 为什么要前后端分离

前端和后端职责分离

前端偏向于处理用户体验相关的方面， 后端服务则偏业务逻辑。

前后端技术分离

前端只需要懂HTML/JS/CSS就可以了， 后端也不需要去了解前端技术。

 

上面两点是在前后端有不同人员开发的情况下才有的好处， 下面两点是无论有没有独立的前后端开发人员都有的好处：

前后端分离带来了用户体验和业务逻辑的解耦

前后端都可以独立变更， 只要保持调用的接口不变。

复用

同一套接口， 可以复用在app端， web端等。

3 怎么进行前后端分离（方案）

3.1 部署方案

部署方案按照是否部署在相同的域， 可以分为两种方式， 同源部署和非同源部署

同源部署

同源是指前端项目和后端项目部署的域名和端口都一致的情况， 我知道的有两种方式：

• 前段项目和后端项目都不熟在Nginx将请求分别转发到静态服务器和动态服务器；
• 前端项目部署在后端项目中， 比如部署到servlet应用的webroot下；

这种方式的好处是， 用户认证的方式依然可以使用基于session/cookie的方式来进行。

非同源部署

指前端项目和后端项目使用不同的域名部署。 需要进行跨域相关的配置， 但是这种方式无法很方便的使用session/cookie的方式来进行用户认证， 替代的方案有JWT等。

3.2 用户认证

基于cookie/session的认证

只要保证前端和后端部署在同一个域下， 那么就可以沿用session/cookie的认证机制。

基于Token/JWT的认证

jwt， 全称是json web token， 是一种将用户信息都编码到一个token中， 然后每次请求都带上这个token。 这种情况下， 后端是完全无状态的。

基于OAuth的认证方案

3.3 mock方案

如果使用前后端分离的模式， 那么可以将开发节点划分为接口定义， 开发， 联调三个阶段。 可以使用mock的方案， 在定义完成之后， 前端使用mock的接口服务进行开发， 不需要等待后端开发完成之后才进行开发。

3.4 测试方案

服务端的测试， 可以有单元测试和web接口测试。 而前端进行测试则是集成测试和用户体验测试。

其中服务端的测试其实是可以做到自动化的， 例如使用spring 相关的测试支持工具。