前后端不分离VS前后端分离

0. 引言

毕业离校前帮老师简单写了一个CMS（内容管理系统）网站，用于做协会的季报展示和活动公告，连评论、注册等功能都没有。该网站使用django实现，采用了前后端不分离的方式。到公司以后因为项目组需要跟小伙伴使用vue + django的模式写了一个小系统，采取前后端分离的模式，所以简单聊聊两者的区别。

1. 前后端不分离开发

前后端不分离意味着我们看到的页面的数据、样式都是由后端渲染填充之后由浏览器展示出来的，后端需要控制前端的展示，前端与后端的耦合度很高。
拿Django的MTV举例，django在返回响应请求返回一个response的时候，其实是返回了一个渲染好的页面，具体操作如下：

1. 浏览器访问服务端，django服务端返回一个渲染好的HTML页面，用户可在该页面进行操作；
2. Django在收到一个请求时，会根据url将请求重定向到view模块，view模块会根据request生成目标数据；
3. 在生成目标数据之后，会选择对应的模板文件（一般是HTML）将数据渲染到HTML模板文件中，并将渲染后的HTML文件返回给请求方。
4. 浏览器只负责展示页面。
   

1.1 对开发的影响

前端人员负责写好模板，具体的接入调试工作由后端人员来完成；
项目耦合严重，质量不高；
由于返回的是渲染后的HTML数据，加重了网络负担，时延更大。

优势：

1. 前端开发相对简单；
2. 服务器部署相对简单。

劣势：

1. 返回的数据是渲染后的数据，时延更大，网络负担更大；
2. 项目耦合严重；
3. 后端人员工作量较大。

2. 前后端分离开发

浏览器访问时会先去静态文件服务器获取静态资源，并且在用户与网页交互时，会根据这些交互由浏览器执行其中的JS代码，JS代码会调用服务器提供的API接口获取相关数据，并由浏览器负责这些数据的渲染与展示工作。
换句话说，前端的代码与浏览器的结合变成了一个具有独立请求数据和处理数据的整体（类似于一个App）。

2.1 对开发的影响

优势：

1. 工作量更加均衡，迭代更加方便；
2. 项目代码解耦，前后端联调更加方便；
3. 减少传输时间，响应更快；
4. 可与CDN配合降低延迟；
5. 可以将部分数据预处理工作放在前端；

劣势：

1. 引入了静态资源服务器，维护工作量提高；
2. 对前端开发提出了更高的要求（个人觉得这其实是好事）

对比与总结

毫无疑问，前后端分离的模式更加适应当前的开发节奏，同时也使得整体架构更加清晰；
借助JS与其它语言，前端可以实现更加丰富多彩页面效果以及数据展示，使得网页具有更加丰富多彩的展示效果。