面向企业级web应用的前后端分离开发模式及实践

杜艳美 黄晓芳

(西南科技大学计算机科学与技术学院 四川绵阳 621010)

随着前端技术的飞速发展和web应用的复杂化，web应用正在往兼容多端、高性能的方向发展[1-2]，为了快速迭代产品以满足用户日益变化的需求，提高用户体验及提升企业竞争力，web应用开发技术要求更加高效率地开发，并兼顾性能要求，方便快速迭代及后期维护简单。

传统的B/S(Browser/Server，浏览器/服务器)模式下的web开发中存在前端代码无法复用、性能在移动互联网中很难达到最优、大量多页面应用和单页web应用(SPA，single page web application)不能满足需求等问题，而且，在这种开发模式下，网页路由需要后端配合，前后端工作无法独立，再次迭代和维护效率较低，无法满足企业级应用的迭代速度。

本文针对前后端分离的开发模式[3-4]，提出一种解决多终端性能、组件化开发和打包部署的完整的开发模型，以求进一步提高开发效率，通过实际系统的开发实践，证明了该开发模型的有效性。

1 研究现状

随着模块化和组件化理念出现，前端开发技术开始更加关注性能优化、用户体验的提升以及开发速度的快速迭代。如Google公司的开源框架AngularJs[5]，AngularJs首创的双向数据绑定、内置的模块注入和组件化的支持，为web的发展提供了较大贡献；FaceBook开发的开源框架ReactJs是第一个采用虚拟节点( virtual dom )技术的框架,使得框架足够轻量和灵活，推进了web性能的提升；VueJs[6-7]以其轻量级、高性能、灵活性的特点，使其不仅适用于大型复杂的web应用，而且适合移动场景，为web技术的发展和性能提升做了进一步的贡献。模块构建工具WebPack的出现给前端性能优化带来更多便利。NodeJs逐渐发展成一个成熟的开发平台，吸引了许多开发者，国内诸多大型高流量网站都采用NodeJs进行开发。NodeJs的发展，为web研发模式带来了新的解决思路[8-9]，即通过在传统的前端和后端之间引入NodeJs作为中间层，使得前端和后端实现完全解耦，业界诸如阿里、百度都已有基于NodeJs做前后端分离的应用。在学术界，针对web端性能的优化，也有大量的研究工作。2016年，孔令旭等人提出了一种基于Node.js实现的前后端分离的解决方案，并证明了其在性能方面的高效性[10]；2017年，吴贺提出一种前后端解耦模式的开发方案，其核心是通过在传统的MVC结构上，引入Node.js作为前端和后端的中间层，从而解耦前端和后端，实现前端独立开发[11]；同样在2017年，仇晶、黄岩等人提出基于Node.js中间层的web开发，在传统的互联网前后端web应用中，提出了引入Node.js作为中间层来解除前、后端之间的耦合关系的新解决方案[12]。但是对于企业级大型web应用前后端分离，如何提升前端开发效率等研究较少。目前,大部分的系统架构如图1所示，虽然有些系统采用分布式架构，层与层之间使用了远程调用框架，但是本质类似。前后端耦合的问题主要发生

图1 目前大部分的系统架构Fig.1 Most of the current system architecture

在控制层(Control)，控制层是前端和服务端交互的边界，但是在开发过程中控制层(Control)和服务层(Server)常常混淆不清，这就是前后端耦合度高的重要原因。因此，要前后端解耦，就要划清控制层的边界。同时，前后端分离的终极目标应该是前端和服务端是完全独立的项目，前端项目应该包含图1里的浏览器和控制层，服务端项目包括服务层、DAO层等。项目开发时让前端脱离于后端，让后端专注于业务服务，最后生产发布也要独立部署，前端专注于展示和交互，这样就达到了前后端真正解耦。

2 一种高效的前后端技术分离模型

2.1 总体思路

本文通过在前端和后端之间引入nodeJs作为中间层，后端通过REST框架实现前后端分离架构。前端模型构建视图层、接口层和服务端，其中视图层包含组件、路由模块，接口层包括所有具体的业务接口以及服务端nginx[13]作为静态资源代理和nodeJs作为前端和后端服务的中间层，并且服务端可以根据应用的性能要求，采用负载均衡的方案以达到高性能的要求，从而快速响应客户端的请求。前端基于nodeJs+npm对开源依赖包和工具进行管理，通过webPack工具实现前端模块化打包、合并和压缩文件。

通过vue实现前端模块化和组件化开发模式；通过vue-router管理用户请求和页面跳转；页面通过ajax调用后端的restful api接口；前端与后端定义一个相对通用的JSON响应结构，其中包含两部分：元数据与返回值，其中，元数据表示操作是否成功与返回值消息等，返回值对应服务端方法所返回的数据。

JSON响应结构如下：

{

"meta": {

"success": true,

"message": "ok"

},

"data": ...

}

前后端分离的总体架构模型如图2所示。

2.2 面向企业业务应用场景的组件化开发模型

对于大型web应用，涉及多团队合作开发，要让开发人员之间高效合作，就得降低各功能之间的耦合度和重复开发的成本，尽量让各开发人员负责的模块依赖度降低，同时也便于后期的共同维护。组

图2 前后端分离的总体技术模型Fig.2 General technical model of frontend-backend separation

件化开发即可解决这样的问题，组件以其高内聚、可重用、可互换、可组合的特点使得开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，也更容易支持多个团队共同维护一个大型应用的开发。在一个企业内部，web前端的组件，不管这个组件是UI层级，还是javascript开发层级，都脱离不了该企业业务产品的模式，比如常见的登录、注册、新闻网站的新闻列表组件、文件系统的文件列表组件，都可以抽象成组件。基于组件开发，最重要的是组件可以用来组合构成其他组件，通过分类处理，理清组件的应用边界，这样可以有针对性的积累和完善这些组件，有意识地开发相关的组件，最终形成一个针对某个业务组件的组件仓库，即页面上的每个独立的可视/可交互区域视为一个组件(图3)。

图3 组件与页面的关系Fig.3 The relationship between the component and the page

VueJs的组件化、模块化的特点和WebPack模块化打包的方案使得组件化开发、后期的打包部署和模块化带来的性能问题有了技术支撑，是真正将 JavaScript，Css和 Template 同时都考虑进去的模块化方案，而非仅仅 JavaScript 模块化方案。

3 模型的实践分析

3.1 模型实践开发

通过将该模型用于面向SaaS级的企业web应用开发，该应用是一款电子签名产品，其面向多终端用户提供服务，提供文件签名、文件查询、文档预览、签名制作、个人信息设置、实名认证等核心功能。

前端开发选用轻量级的vueJs作为基础库，采用vue-router对页面路由进行构建和管理，通过vuex管理组件状态，前端基于nodeJs+npm对开源依赖包和工具进行管理，通过webPack工具实现前端模块化打包、合并和压缩文件(图4)。

图4 前端主要技术Fig.4 Main front-end technology

基于面向企业业务场景的组件化开发模型，应用在此系统中，为了让各终端的体验效果和页面视觉效果达到最佳，将视图层分为了移动端和电脑客户端，根据界面原型进行UI组件划分，通过对所有界面进行分析、解构、重组，最后总结UI组件的构件分成移动UI业务组件、公共UI业务组件、电脑UI业务组件三大部分，UI组件的总体构建思路如图5所示。结合前后端分离模型，应用的前端工程目录结构划分如表1所示。

图5 UI组件的构建思路Fig.5 The idea of building UI components

各户端开发目录用途commons存放公共文件component用于存放业务基础组件interface用于前端接口处理,可提供各终端调用。page-components最终客户端可访问的页面,页面内部由多个基础业务组件组合成一个完整的功能页。routes路由分发,为了让不同终端的用户体验效果达到最佳,这里的重构设计将移动端单独做了一份页面,但是基于组件化的思想,各终端共用了基础的业务组件,共用接口层,只有view层做了变化,因此,达到在保证各终端体验效果最佳的情况下,最大化地减少功能重复开发的成本。styles存放样式模块

3.2 效果分析

经过前后端分离，原先开发Java后台的人员只需要专注API的设计和实现，无需关心前端页面路由；前端以组件化的方式划分，可以轻易将前端开发人员进行分层，擅长网络层和js开发的人员，专注

server端与后台接口的对接和专注书写提供客户端调用的js模块，擅长css和html的开发人员，即可专注UI组件的实现，且开发人员以组件划分任务。

(1)前后端开发模式由串行变成了并行，开发效率明显提升，各模块之间没有耦合，大家只需要按照需求实现各自组件即可。

(2)前端部分性能优化不再受限，静态页面的访问可以通过引用Nignx，使得后台不再关心静态页面访问带来的压力，并且前端server端可根据用户端的情况扩展服务器，以达到良好的访问速度(图6)。

图6 负载均衡的时间图Fig.6 Design diagram of load balance

(3)使用压力测试工具ab(ab是apache自带的压力测试工具)，分别模拟4组数据，并发请求访问本地发布的2种单服务器环境的相同首页访问效果，采用前后端分离模型之后性能显著提升，且并发请求量越高，分离后的性能优势越明显(表2)。

表2 性能测试数据Table 2 Performance test data

4 结束语

本文通过前后端分离技术的研究，设计了面向web应用的前后端分离模型的设计与开发，并设计了面向企业业务场景的组件化开发模型，通过实践证明该模型在web应用开发过程中的高效性。

[1] 刘顺益.移动互联网技术的发展现状及未来发展趋势[J].黑龙江科技信息,2017,(17):167.

[2] 吴秒秒.WEB系统前端性能优化研究[J].中国科技投资,2017,(1):315.

[3] 林嘉婷.试谈前后端分离及基于前端MVC框架的开发[J].电脑编程技巧与维护,2016,(23):5-8.

[4] 孙娉娉,李新,史广军.基于前后端分离的内容管理系统[J].科研信息化技术与应用,2016,(4):70-75.

[5] 董英茹.简谈AngularJS在下一代Web开发中的应用[J].软件工程师,2015,(5):30-31.

[6] 朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017,(20):119-121.

[7] 李曰斌，詹舒波.基于Vue的前端组件化研究与实践[Z].2016.09.09.

[8] 万里晴,杨浩.探究基于V8引擎的Node.js在各应用领域的发展[J].通信世界,2015,(13):97-97.

[9] 王金龙,宋斌,丁锐.Node.js:一种新的Web应用构建技术[J].现代电子技术,2015,(6):70-73.

[10] 孔令旭. 基于Node.js的前后端分离框架的实现与应用[D]. 湖北武汉：华中科技大学, 2016.

[11] 吴贺. 前后端解耦模式及开发[J]. 计算机系统应用, 2017, 26(2):217-221.

[12] 仇晶, 黄岩, 柴瑜晗. 基于Node.js中间层Web开发的研究与实现——以微信图书借阅平台为例[J]. 河北工业科技, 2017, 34(2):118-124.

[13] 肖明魁.基于Nginx负载均衡技术初探[J].科技展望,2015,(36):125.