这些天对前后端做了⼀个全⾯的研究，给⼤家分享下前后端分离应⽤的俩种模式，以及如何应⽤到实际场景，以及他落地的注意点；
⼀定要看后⾯的：分离模式团队⼯作流程，在这我标明了平时⼯作中要注意的点哦，不然你⼯作起来⼀样会很累的。
这是我在⼤汉集团任职产出的东西。感谢
烟盒工艺品
现状
前后端分离开发已经成为⾏业标准。
他主要是通过web服务器(Nginx || Nodejs ...) + 应⽤服务器（Tomact ...）前后两个服务端进⾏有效解耦⽽达到前后端分离的效果。
技术核⼼思想：前端通过js创建HTTP请求调⽤后端服务的Restful API接⼝并返回JSON数据进⾏交互 web服务器：⼀般指像Nginx，Node这类的服务器，他们⼀般只适合解析静态资源和处理⼀些简单的控制以及业务逻辑； 应⽤服务器：⼀般指像Tomcat，Jetty这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能⼒没有web服务器好；
他存在的主要⽬的就是把项⽬的开发⼯作做到更细化，更专业化。
前后端分离模式也是让前端这个职位快速崛起的原因之⼀。
发展史
以前的程序员没有前后端之分，所有项⽬基本都是⼀个程序员既当爹⼜当妈的，⼀把全包了，最多分配⼀个页⾯仔配合后端⼯作。期间很多企业慢慢发现随着市场的发展，客户端的体验达不到要求。必须要请专⼈来做客户端这块的体验优化，⽽那时候还没这类专业⼈⼠（或者说是珍稀物种）那请⼀个成本可不⼩。 这时公司领导就当时的程序员谈话了，想要他们接下这活，但发现他们⼤都嫌弃这活⼜脏⼜累，不嫌弃的也是有⼼⽆⼒。
正当领导愁容未展的时候，⼀回头正好与我们页⾯仔正那双充满了爱意，充满了渴望的⼩眼神四⽬相对。就这样确认过了眼神，遇到了对的⼈。从此页⾯仔就欢乐的开始了他的逆袭之路，前端⼯程师的职业也就由此⽽⽣了。
那前端⼯程师与后端⼯程师的职责要区分，⼯作要解耦，不能有太多的相互依赖，⼲扰。所以前后端分离模式就以此得到了盛⾏。
鸳鸯电火锅
前后端的开发模式
不分离模式
这个模式就不过多分析了；
这个模式有两个缺点：
代码耦合严重，前端HTML中代码会出现后台代码。前端要会后台的模板引擎，且模板多样化。⼈员流动成本过⾼ 项⽬耦合严重前后在⼀个项⽬⾥。前端开发完全需要依赖后端项⽬，如果后台出现问题会导致前端处于等待状态 半分离模式
⼯作流程：
1、打开web，加载基本资源，如CSS，JS等；
2、发起⼀个Ajax请求再到服务端请求数据，同时展⽰loading；
3、得到json格式的数据后再根据逻辑选择模板渲染出DOM字符串；
4、将DOM字符串插⼊页⾯中web view渲染出DOM结构；
以上⼯作流程都是在⽤户设备上逐步执⾏，也就是说客户端的运⾏速度完全取决于⽤户的设备。如果⽤户的设备越低端，打开页⾯的速度也就越慢。
为什么说是半分离，主要是因为Controller没放在前端层，前后端需要沟通页⾯是同步输出呢，还是异步JSON渲染？如果需要同步输出的页⾯，只能放服务端，那⼜退回去了。所以只能说是半分离。
半分离的优点：
1、代码不耦合，前端后端代码不会有任何穿插；
2、前端开发不依赖于后端服务，可以专注客户端开发。还可以通过模拟数据数据实习前后端并⾏开
发；
3、可以精准定位问题，是前端问题还是后端问题；
半分离的缺点：
1、seo问题，搜索引擎⽆法爬取到页⾯的异步数据
2、客户端响应速度不可控；在json数据量返回较⼤时，数据处理逻辑复杂时，渲染慢，会出现卡顿的情况
3、资源消耗严重，业务复杂时页⾯可能会需要多个请求才能渲染完毕。这个在移动端体现⽐较突出
全分离模式
全分离，其实就是在web服务器这⾥添加⼀层可以做简单逻辑处理的服务器。
所以全分离的开发模式是：
前端：负责View和Controller层做简单的参数控制，数据转换。
后端：负责DB和Service层，做业务/数据处理等。
单相计数器
但是前端怎么写Controller呢？难道⼜要前端学JAVA PHP？那不⼜是成本加⾼?这时候nodejs就派上⽤场了，node.js适合运⽤在⾼并发、I/O密集、少量业务逻辑的场景。重要的是前端就不需要新学⼀名新语⾔可以快速上⼿了。
其实全分离模式本质只是在⼯作职责上做了分⼯。技术层⾯是⼜回到了不分离的原点。
增加中间层的⼯作职责如下图：
全分离的优点
1、后端服务的适配提升；⼀个应⽤要对应输出pc、mobile、app的时候。后端服务就不需要为各端写兼容代码了。统⼀由前端的web服务器处理即可，维护起来更安全有效率；此时架构应该如下图：
2、减少在客户端处理数据的逻辑代码，提⾼客户端响应速度；
3、减少客户端资源浪费，需要多HTTP才能拼装好的页⾯可以在内⽹⼀次拼好，再返回给客户端
4、可以借助node服务器渲染，解决seo问题。
分离模式的团队⼯作流程：
按照流程图，我们的⼯作步骤应该如下：
步骤⼀、我们从需求评审的时候要求就是所有参与成员必须参加。
步骤⼆、沟通，协议制定阶段；（这阶段的第1、2⼩步⼀定要做好，不然影响第三⼤步的开发⼯作）
1、会后前端应该需要先跟UI沟通，设计稿的⼤概框架，页⾯效果实现的注意点；
醋酸乙酯生产 2、前后端制定契约（接⼝⽂档），这个应该需要详细到每个字段的描述；
3、测试编写测试⽤例
第三步、开发阶段
1、前端根据接⼝⽂档，模拟API接⼝进⾏前端的开发⼯作（根据跟UI的沟通写⼤概的布局架构的设计，简单的业务逻辑开发。⼀定要等UI设计稿完全交互后再进⾏详细的业务逻辑编写）；
2、后端开发后端服务，并按照⽂档输出数据即可；或⽂档有修改⼀定要通知到下游的前端；
3、测试编写测试代码，如果后端接⼝开发完毕，前端还未开发联调完。测试可以先开始接⼝测试；
第四步、联调
第五步、整体测试，第六步、交付上线
方形磁铁 从上⾯看我们的流程在第⼆，三步都是串联进⾏的。这样会⼤⼤提⾼我们的开发效率。
但这会有⼀个⼩缺点，就是：如果改了之前相关约定的东西，⼀定要通知到相关⼈员！！
如果改了之前相关约定的东西，⼀定要通知到相关⼈员！！
如果改了之前相关约定的东西，⼀定要通知到相关⼈员！！
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议