Go 标准库之 time
前后端开发
在传统的web应用开发中,大多数人将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端
之前以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。其实前后端分离并不只是开发模式,而是web应用的一种架构模式。
- 在开发阶段,前后端工程师要提前约定好数据交互的接口,从而实现并行开发和测试;
- 在运行阶段,前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。(NodeJs或Ngnix)
作为一种全新的架构模式,前后端分离大概可以分为四个方面:
- 交互形式
- 开发模式/流程
- 代码组织方式
- 数据接口规范流程
一、交互形式
在前后端分离架构中,后端需要负责按照约定的数据格式向前端提供可调用的API服务。前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。前后端之间通过HTTP请求进行交互。
这里有一个争议点是:约定的数据格式
是后端直接提供给前端可直接使用的数据格式,还是简单的数据库拉取数据不做加工直接推给前端,这个要视具体的项目情况而定,
- 如果后端支持的是多端,比如要同时适配pc端、手机端等多个终端,其多终端数据展现的形式如果各不相同,那后端只需要提供满足多端的基础数据格式。
- 如果只需要满足单个终端,建议直接将前后端数据格式进行统一处理,方便前后端协同;当然,数据处理可以也可以放在前端或后端做,视人员配备情况而定,但绝不是后端不做任何处理就将数据返回给前端,完全由前端组织数据。
二、开发模式/流程
我之前是 Python 全栈工程师,那时使用的是MVC架构模式,整体没有进行前后端分离,前端对应的就是View层,主要通过html/css/js实现静态页面和动态效果,在有后端进行模板变量的嵌套和一些页面逻辑的处理,最终打包成一个整体,部署到同一服务器上,同时会进行简单的动静态分离部署。
此时开发的流程如下: 需求=》设计=》后端开发=》前端静态页面开发+模板=》前后端调整=》测试=》修复=》复测 =》交付上线
随着项目越做越大,开始思考怎么样更好提高开发效率和质量,遂想做前后端分离,这时前端工程师只需要编写前端页面+前端数据、业务逻辑处理,之后通过HTTP或其他请求方式调用后端提供API,后端人员只需要专注处理后端逻辑,而无需考虑页面布局,前端交互等问题,而且除了在开发周期可以进行前后端分离,在部署阶段,也可进行前后端分离部署。
此时开发的流程如下:需求=》设计接口、约定数据=》前后端并行开发=》联调=》测试=》修复=》复测=》交付上线
通过上面的描述及流程,不难发现,前后端分离的开发方式不仅仅从分工上进行了区分,而且实现了前后端的并行开发。节省时间,提高效率。
三、代码组织方式
在传统的开发模式架构下,前端代码是作为项目的静态资源存在于项目工程下,页面中还夹着一些后端代码如jsp、php等技术,前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发,前后端同时维护一份代码,这种开发方式导致前后端代码互相影响,因此前后端分离势在必行。
而前后端分离模式在代码的组织形式上由以下两种形式组成:
半分离:前后端仍共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。
完全分离:完全分离后,前端代码可以通过Mock来模拟后端请求,从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例,确保接口的可用性。通过上述手段,降低开发集成风险。
四、数据接口规范流程
前后端分离开发模式最重要也是项目开发前必需的是确定数据接口
,包括数据接口的交互形式和数据格式
,需要前后端开发共同商定,并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发,前端开发完之后可以利用mock服务独自进行接口测试,后端也可以利用postman或其他接口测试工具进行测试,并提供完整的接口测试用例,然后前后端进行功能联调,最后再提交线上测试,也可进行自动化测试。
前后端分离适用场景
虽然前后端分离架构能带来许多的好处,但前提是建立在开发团队合适的基础上的。适合前后端分离的有以下几种场景
前端后端占比相同或相近,都需要投入大量且专业的人力。
终端适配情况多。
分布式架构,微服务化应用场景。
前后端分离方案
总体方向
后端:后端控制层(Restful API) & 服务层 & 数据访问层;
前端:前端控制层(Nodejs) & 视图层
流程
设计阶段: 前后端架构负责人将项目整体进行分析,讨论并确定API风格、职责分配、开发协助模式,确定人员配备;设计确定后,前后端人员共同制定开发接口。
开发阶段: 前后端各自分工,协同敏捷开发,
- 后端提供Restful API,并给出详细文档说明,搭建Mock平台,在 API 变化时更新接口文档 + MOCK平台;后端根据接口文档进行接口开发;
- 前端根据接口文档 + MOCK平台进行开发
测试阶段,API完成之前,前端人员会使用mock server进行模拟测试,后端人员采用junit进行API单元测试,不用互相等待;API完成之后,前后端再对接测试一下就可以了,当然并不是所有的接口都可以提前定义,有一些是在开发过程中进行调整的。
部署阶段,利用nginx 做反向代理,即Java + nodejs + nginx 方式进行。
技术
前端技术栈:前端代码 + mock服务
后端技术栈:postman + 接口 + 后端业务逻辑 + 数据库
公共依赖:接口文档/接口测试工具
常用的mock服务:jsonserver, YAPI(YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务)
常用的接口测试工具为postman、rap、swagger、doclever
部署方案
前后端代码分别开发和存储,但部署使用同一个服务器,集中部署。
使用Ngnix服务作为中间件,前端向Ngnix发请求,Ngnix自己解析静态服务,API请求由Nginx转发到后端服务器,由于,所以在seo优化上和页面性能优化上效果不明显,因此前端仍需与后端进行配合才能达到整体的优化。
1
浏览器 =》 Ngnix(静态页面) =》Ngnix(后端服务器,可省略)=》Server服务
nodejs作为中间层,将前端资源部署到Server层。同时实现数据代理服务,负责与提供数据的后端进行通信。
1
2
3浏览器=》Ngnix(处理分发请求)=》NodeServer
|| ||
└ ========Server服务浏览器向前端机发送请求,由Ngnix进行分发,url统一分发至NodeServer,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务挖成相应。
前后端分离部署方案比较
属性字段 | 传统模式 | Ngnix+Server | Node+Server | Ngnix+Node+Server |
---|---|---|---|---|
SEO | ok | no | ok | ok |
浏览器渲染负担 | ok | no | ok | ok |
前后端耦合 | no | ok | ok | ok |
请求相应效率 | no | ok | no | ok |
其他
分离的优点
首先,就目前的软件开发应用趋势来看,越来越注重用户的体验性,架构越来越大,服务越来越小,终端设备越来越丰富,而原来不分离的方式已经不能支撑现在的发展趋势,因此前后端分离开发及部署将势在必行。
采用前后端分离的架构有几个优点:
为优质产品打造精益团队。通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,是的前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。
提升开发效率。前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
完美应对复杂多变的前端需求。如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。
增强代码可维护性。前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。
前后端分离误区
前后端职责分配?
很多公司认为采用前后端分离之后,前后端只需要通过指定API进行交互即可,前端负责页面渲染,Nodejs负责路由分配,后端提供API。忽视了大量关键工作,职责分配和细节处理没有相应文档规定,缓存机制、图片上传下载、数据校验、语言国际化等等并没有出具相应信息。另外,大量忽视了nodejs层的作用,仅仅把nodejs当成一个路由中转,这一方面也是对nodejs技术的不熟悉导致的,其实nodejs能负责很多事,除了复杂业务逻辑处理和数据操作由Java 负责,大量工作完全可以在nodejs层处理。(PS:还是基础不够导致的!)
后端开发需要增加接口开发工作,增加任务量。
无论如何后端开发都是需要写接口的,只是前后端分离后需要按照ResetFul风格写接口,或者采用最新的GraphQl的方式进行交互,如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间,但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。
分离后仍出现互相等待的问题,反而不如传统开发模式快。
这个问题的产生其实也是由于对前后端分离后技术缺失导致的,常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调,实际上前端通过mockserver等方式是可以解决一些问题的。
reference
- 张亚涛(前后端分离实践一):https://segmentfault.com/a/1190000009329474