方 生，秦晓安，王 睿

（安徽商贸职业技术学院，安徽 芜湖 241002）

0 引言

随着Web技术的快速发展，Web应用正朝着兼容多终端、高性能的方向飞速发展［1］。传统的Web开发逐渐不能适应大规模互联网应用对异构技术栈多样性和多团队协同开发模式的要求［2］。因此，许多研究试图改进MVC体系结构。然而，由于MVC架构的局限性，很难将前端和后端服务完全分离。各种本应明确划分的服务混杂在一起，给开发带来诸多不便［3］。笔者针对软件系统开发过程中存在的前后端严重耦合的问题，基于当前的前后端技术体系，提出了一种前后端分离的软件架构模式。

1 相关技术

1.1 前端框架Vue.js及bootstrapvue技术

1.1.1Vue.js

为了提高开发效率，基于Vue.js（以下简写为Vue）框架开发了Web前端。Vue是一种用于搭建软件界面的渐进式前端框架。它采用自下而上的增量开发设计方法，是一种更灵活、更开放的解决方案，具有更简单的体系结构，便于开发人员快速掌握，还便于与第三方库或现有项目集成，可以为复杂的应用程序提供驱动程序［4］。

Vue采用MVVM（model-view-model）开发模式。此模式将前端从原始DOM操作中解放出来，使人们不再需要花费大量的时间来维护视图和数据的统一，而只需要关注数据的变化。Vue的核心是一个快速响应的数据绑定系统。绑定建立后，DOM将与Vue对象中的数据同步。这样，就不需要手动获取DOM值。将其同步到JS中，可使代码变得更加简洁易懂。MVVM开发模式架构如图1所示。

图1 MVVM开发模式架构图Fig.1MVVM development pattern architecture

1.1.2BootstrapVue

BootstrapVue是 基 于Bootstrap v4+Vue.js的 前端UI框架。它基于全球最流行的Bootstrap V4框架，在Vue.js前端栈基础上，构建了移动优先的响应式门户。……