前后端分离项目实践

前后端分离项目实践分享分享人：PG8张小蛟一、引言二、什么是前后端分离五、前后端分离模式的关键环节六、前后端分离的常见问题七、实战：前后端分离实践三、为什么要前后端分离四、前后端开发人员职责一、引言名词解释：MVC*Model（模型）-模型代表一个存取数据的对象或JAVAPOJO。它也可以带有逻辑，在数据变化时更新控制器。*View（视图）-视图代表模型包含的数据的可视化。*Controller（控制器）-控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

一、引言提出需求前端开发页面翻译成模版前后端对接二次集成后端返工前端返工集成遇到问题集成成功交付上线传统开发方式，可能如下这种方式目前在一些小项目或页面复杂度要求不高的项目中仍在使用。个人分析主要有以下缺点：*前端无法单独调试，开发效率低；*前端不可避免会遇到后台代码，例如：*耦合性太强。同时也会让前端增加“多余”的学习成本（重新学习如模板引擎的模板语法）*随着系统业务要求越来越多，复杂性越来越高。为提高开发效率，工作慢慢细化。因此，前后端分离的模式逐渐被提出并越来越受重视。在浏览器中呈现静态资源CSSJavascript图片其他资源动态页面(生成的HTML)模板视图模型业务逻辑选择生成WEBSERVER一体式WEB架构示意图前后端分离式WEB架构示意图在浏览器中呈现其他静态资源静态页面HTMLJavascript动态DCOM业务逻辑处理STATICWEBSERVERAJAXWEBAPISERVER在传统的WEB应用开发中，大多数的程序员会将浏览器作为前后端的分界线。简单的从物理上作区分：前端，将浏览器中为用户进行页面展示的部分称之为前端后端，将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端二、什么是前后端分离二、什么是前后端分离客户端服务器RESTful1.交互形式3.开发模式2.代码组织方式4.数据接口规范流程提出需求前端开发页面翻译成模版前后端对接二次集成后端返工前端返工集成遇到问题集成成功交付上线前后端分离并不只是开发模式，而是WEB应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对WEB应用进行分离部署，前后端之间使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识：提出需求设计接口约定数据前后端并行开发前后端集成交付上线集成成功前端调整页面传统开发流程前后端分离开发流程定制接口前端开发联调提测后端开发定义规范后端自测Mock数据检验格式自动化测试前端代码后端代码前端代码后端代码前端代码后端代码前后端未分离前后端半分离前后端分离比为什么要前后端分离更现实的问题是，什么时候需要前后端分离，即前后端分离的应用场景。适合前后端分离的应用场景有：1、页面交互和样式复杂2、有较高的页面呈现效果的要求;3、页面中包含有大量复杂业务逻辑处理4、页面需要渲染的数据量较大。5.、高并发，对页面性能要求高等等。它可以带来的好处：三、为什么要前后端分离前后端职责分离前后端技术分离用户体验和业务处理解耦分别归约两端的设计对应复杂多变的前端需求增强代码可维护性四、前后端开发人员职责在使用前后端分离模式后，前后端人员分工明确，职责清晰。前端开发人员，更关注于界面呈现和交互效果的实现上服务端开发人员，更关注业务和数据接口上UI界面页面呈现页面交互用户体验等等前端职责数据存储业务逻辑处理Restful接口性能等等后端职责此外，若存在多端场景，例如，一个服务端RESTfulAPI，按照这种方式Web／iOS／Android／PC等四个前端，对于后端来说就无差别了，这是多么棒的设计啊。五、前后端分离模式的关键环节很多团队在前后端分离的探索中举步维艰，可能最重要的原因就是对API文档的重视不够。希望大家看清楚前后端分离过程中最重要的一个环节，不是原型，不是设计，不是开发，也不是测试，而是API文档的编写/维护/发布/阅读。软件开发流程中的几个关键环节：基于这个流程，API文档环节直接关系到了前端和后端两个开发团队，也是整个软件开发流程中耗时最大的环节。一旦API文档编写不合理，或者维护太麻烦，或者阅读不方便，将极大的影响开发效率，影响团队士气。而其他环节通常不会跨部门耦合，常用解决方案非常成熟，并且所消耗的资源也远不及开发团队。提出需求设计接口约定数据前后端并行开发前后端集成交付上线集成成功前端调整页面五、前后端分离模式的关键环节API文档环节就变成了前后端分离团队中最关键的环节。因此，做好以下两点非常重要：*标准化的API文档*方便取阅和维护的文档服务器一旦前后端分离模式在项目中运作起来后，前端,更多会关注于前端界面呈现和业务逻辑的处理，后端,更多会关注到业务和数据接口上。最后，前后端的通过接口请求数据，根据接口返回的数据来进行交互。因此，对于接口URL的定义、请求参数、响应数据格式、以及错误码的约定就显得尤为重要了。可以肯定的说，只要输出了标准化的API接口文档，项目就算完成了40%了。因为标准化API文档输出后：业务已基本梳理完，前后端开发人员对于要实现的目标基本可以达到共识,可能会有部分细节会需要临时调整，都并不影响大局。RestfulAPI最佳实践在我们不清楚如何实践时，最好的方式就是学习参考其他人的实践，个人推荐：RESTfulAPI最佳实践RESTFulAPI接口文档模板华为公有云API接口在线文档-示例根据当前已实施过前后端分离的项目情况分析统计，常见问题及改进措施：六、前后端分离的常见问题序号主要痛点根因分析解决方案/改进措施1接口文档永远都是不对的维护文档的带来了一定的成本却没能带来价值引入接口文档评审机制，前端开发只认已发布的接口文档2测试工作永远只能临近上线才能开始在开发阶段测试同学无法介入，接口在变，前端也在变，

“提测”

之前只能喝茶，“提测”之后又忙的要命制定测试计划，严格控制SIT/UAT关键测试时间点TFSStory转测SIT时间严格控制3联调时间长，返工次数多缺少实施规范&流程，实施规范遵从执行不严格制定前后端分离开发规范及流程，并严格执行4前后端相互等待时间长基于Story任务安排不合理，前后端开发完成时间不一致落实TFSStory

Owner问责机制，由StoryOwner来推动Story的闭坏七、实战：前后端分离实践目前实施的前后端分离模式的开发流程：需求分析&澄清阶段*需求分析阶段，由SE和华为方对接，深入了解需求*需求澄清阶段，全员参与澄清会议，深入理解各自将要负责的需求，并提出相关疑问。2.项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定：*API风格*职责分配*开发协助模式*确定人员配备*设计确定后，前后端人员共同制定开发接口。3.项目开发阶段，前后端分离是各自分工，协同敏捷开发*后端，提供RestfulAPI，并给出详细文档说明*前端，进行页面编写绘制，通过