面向企业级web应用的前后端分离开发模式及实践-西南科技大学学报.pdf

第３３卷　第２期　　　　 　　　西　南　科　技　大　学　学　报　　　 　　　Ｖｏｌ．３３Ｎｏ．２ ２０１８年６月　　　　　　 ＪｏｕｒｎａｌｏｆＳｏｕｔｈｗｅｓｔＵｎｉｖｅｒｓｉｔｙｏｆＳｃｉｅｎｃｅａｎｄＴｅｃｈｎｏｌｏｇｙ 　　　　　Ｊｕｎｅ２０１８ 面向企业级ｗｅｂ应用的前后端分离开发模式及实践 杜艳美　黄晓芳 （西南科技大学计算机科学与技术学院　四川绵阳　６２１０１０） 摘要：针对企业级的ｗｅｂ应用，研究前后端分离技术，提出一种解决多终端性能、组件化开发和打包部署的完整的开 发模型，通过Ｖｕｅ实现组件化开发思想。企业级开发应用实践证明了该开发模式及框架的高效性，满足多终端的设 计及运行需求。 关键词：前后端分离　组件化开发　Ｎｏｄｅ．ｊｓＶｕｅ 中图分类号：ＴＰ３９３　　文献标志码：Ａ　　文章编号：１６７１－８７５５（２０１８）０２－００８３－０５ ＦｒｏｎｔｅｎｄＢａｃｋｅｎｄＳｅｐａｒａｔｉｏｎＤｅｖｅｌｏｐｍｅｎｔＭｏｄｅｌａｎｄＰｒａｃｔｉｃｅ ｆｏｒＥｎｔｅｒｐｒｉｓｅＬｅｖｅｌＷｅｂＡｐｐｌｉｃａｔｉｏｎｓ ＤＵＹａｎｍｅｉ，ＨＵＡＮＧＸｉａｏｆａｎｇ （ＳｃｈｏｏｌｏｆＣｏｍｐｕｔｅｒＳｃｉｅｎｃｅａｎｄＴｅｃｈｎｏｌｏｇｙ，ＳｏｕｔｈｗｅｓｔＵｎｉｖｅｒｓｉｔｙｏｆＳｃｉｅｎｃｅａｎｄＴｅｃｈｎｏｌｏｇｙ， Ｍｉａｎｙａｎｇ６２１０１０，Ｓｉｃｈｕａｎ，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ａｉｍｉｎｇａｔｔｈｅｗｅｂａｐｐｌｉｃａｔｉｏｎｉｎｅｎｔｅｒｐｒｉｓｅｌｅｖｅｌ，ｔｈｅｓｅｐａｒａｔｉｏｎｔｅｃｈｎｏｌｏｇｙｏｆｆｒｏｎｔａｎｄｒｅａｒｉｓ ｓｔｕｄｉｅｄ．Ａｃｏｍｐｌｅｔｅｄｅｖｅｌｏｐｍｅｎｔｍｏｄｅｌｉｓｐｕｔｆｏｒｗａｒｄｔｏｓｏｌｖｅｔｈｅｍｕｌｔｉｔｅｒｍｉｎａｌｐｅｒｆｏｒｍａｎｃｅ，ｃｏｍｐｏｎｅｎｔ ｄｅｖｅｌｏｐｍｅｎｔａｎｄｐａｃｋａｇｅｄｅｐｌｏｙｍｅｎｔ，ａｎｄｔｈｅｃｏｍｐｏｎｅｎｔｄｅｖｅｌｏｐｍｅｎｔｉｄｅａｉｓｒｅａｌｉｚｅｄｂｙＶｕｅ．Ｆｉｎａｌｌｙ， ｔｈｅｐｒａｃｔｉｃｅａｎａｌｙｓｉｓｏｆｅｎｔｅｒｐｒｉｓｅｄｅｖｅｌｏｐｍｅｎｔａｐｐｌｉｃａｔｉｏｎｐｒｏｖｅｓｔｈａｔｔｈｅｄｅｖｅｌｏｐｍｅｎｔｍｏｄｅｌａｎｄｆｒａｍｅ ｗｏｒｋａｒｅｅｆｆｉｃｉｅｎｔａｎｄｍｅｅｔｔｈｅｄｅｓｉｇｎａｎｄｏｐｅｒａｔｉｏｎｒｅｑｕｉｒｅｍｅｎｔｓｏｆｍｕｌｔｉｔｅｒｍｉｎａｌ． Ｋｅｙｗｏｒｄｓ：ＦｒｏｎｔｅｎｄＢａｃｋｅｎｄｓｅｐａｒａｔｉｏｎ；Ｃｏｍｐｏｎｅｎｔｂａｓｅｄｄｅｖｅｌｏｐｍｅｎｔ；Ｎｏｄｅ．ｊｓ；Ｖｕｅ 　　随着前端技术的飞速发展和ｗｅｂ应用的复杂 本文针对前后端分离的开发模式［３－４］，提出一 化，ｗｅｂ应用正在往兼容多端、高性能的方向发 种解决多终端性能、组件化开发和打包部署的完整 展［１－２］，为了快速迭代产品以满足用户日益变化的 的开发模型，以求进一步提高开发效率，通过实际系 需求，提高用户体验及提升企业竞争力，ｗｅｂ应用开 统的开发实践，证明了该开发模型的有效性。 发技术要求更加高效率地开发，并兼顾性能要求，方 １　研究现状 便快速迭代及后期维护简单。 传统的Ｂ／Ｓ（Ｂｒｏｗｓｅｒ／Ｓｅｒｖｅｒ，浏览器／服务器） 随着模块化和组件化理念出现，前端开发技术 模式下的ｗｅｂ开发中存在前端代码无法复用、性能 开始更加关注性能优化、用户体验的提升以及开发 在移动互联网中很难达到最优、大量多页面应用和 速度的快速迭代。如Ｇｏｏｇｌｅ公司的开源框架Ａｎｇｕ ［５］ 单页ｗｅｂ应用（ＳＰＡ，ｓｉｎｇｌｅｐａｇｅｗｅｂａｐｐｌｉｃａｔｉｏｎ）不 ｌａ