前后端分离框架在软件设计中的应用

李 宇，刘 彬

（攀枝花学院，四川 攀枝花 617000）

1 概述

在互联网技术的发展过程中，前端开发在较长的一段时间不被重视，大多数前端人员也只是开发HTML和Css，前端没有自己的架构，甚至部分前端工作都由后台完成。但随着目前互联网的高速发展，对系统的要求变得十分高，软件系统的复杂性和软件体系规模也在不断地增长。在2017年双十一当天，淘宝系统页面浏览量（Page View，PV）达400亿次，涉及的软件系统大大小小达数百个模块。若还使用传统的前后端耦合的方式，那么注定会有大量重复的代码，当需要对一个功能修改时则需要将前后台都进行修改，代码管理难度上升，系统维护麻烦。根据这种情况，本文介绍目前解决此类问题的前后端分离的开发模式，并以一个项目演示前后端分离的基本结构。

2 发展历程

2.1 传统开发模式

在互联网发展过程中，有很长的一段时间软件开发模式都是使用的传统开发的模式。其特点是通过后台语言提供的模板来生成HTML页面，然后通过服务器将生成的页面返回给浏览器，由浏览器呈现给用户。以Java语言为例，在传统开发模式中，使用JSP作为模板引擎，JSP通过在HTML代码中使用Java代码或者特定的标签集合来封装动态逻辑。当客户端请求JSP页面时，服务器会将JSP编译成为servlet后执行。这样做的好处是开发效率较高，但是在JSP嵌入Java代码使得前后端逻辑耦合严重，前端人员在维护页面必须要会JSP，使得学习成本增高，并且项目上线后维护也十分不便。

2.2 Ajax

Ajax（异步的JavaScript和XML）是一种不需要刷新整个页面仅对页面中局部进行刷新的技术。使用Ajax后对页面数据的更新不需要再刷新整个页面，只需要后台提供返回数据的API。在前端通过Ajax调用Api便可以对系统数据进行增删改查等操作。通过这种方式将对请求的调用工作放在了前端进行，后台开发人员不需要关注页面，只提供符合要求的API，前端人员只需要根据后台开发的API获取数据即可，这样将前后台进行了一定程度的解耦。

2.3 前后端分离框架

随着互联网技术的高速发展，目前Web项目所需要应付的场景和以往有着很大的不同，以往的时候我们将代码、数据库放在同一个服务器中，所有的压力都由一个服务器承担。但目前各个网站访问量都有了很大的上升。如果还是将所有的应用放在一个服务器中，很容易使得服务器崩溃，为解决这类问题，现在许多系统都是用集群或者分布式模式，将一个项目部署到多个服务器或者分为多个子项目分别部署。当用户发送请求时，走完一个请求的全部流程可能需要经过多个服务器，还存在着请求跨域的问题，如果项目前后端耦合度较高，那么必然使得系统复杂性上升。为解决这一情况，前后端分离已经变成了一种必然的趋势。

前后端分离是指将前端和后端从之前的相互融合中分离开来，两者不再共用一个Server，前端作为一个独立Server存在。这种情况下使得一部分业务逻辑转移到前端，后台通过API将数据交给前端后对前端就已经是无感知状态，后端不再接触任何的HTML或者模板页面，前端获得数据后进行业务逻辑的处理。

目前市面上流行的前端框架分别为：VueJS，React，Angular，使用这些框架都能很好地实现前后端分离，其中VueJS和Angular都使用了MVVM的开发模式实现业务逻辑，MVVM是对MVC的一个改进，将其中的View的状态和行为进行抽象化，将页面和业务分开。视图独立于模型而存在，单独对视图或模型修改不会影响对方，同时可以将一些视图逻辑放到一个ViewModel中，实现逻辑的重用。

3 基于VueJS的学术成果展示系统设计

下面以攀枝花学院学术成果展示系统的设计为例，分析前后端分离模式在软件设计中的应用。

3.1 技术介绍

3.1.1 Node.js

Node.js是一个JavaScript运行时环境，Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度很快。但在本系统中并不直接使用Node.js进行系统开发，而是使用其提供了NPM工具对前端系统进行打包构建。

3.1.2 Vue.js

Vue.js是一套构建用户界面的渐进式框架。其核心只关注视图层，并且非常容易学习，非常容易与其他库或已有项目整合。Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue的目标是通过简单的 API实现响应的数据绑定和组合的视图组件。Vue自身不是一个全能框架，它只聚焦于视图层。在前后端分离的开发模式下，Vue作为前端框架管理前端的路由以及数据信息。这样就好似前端作为一个系统而存在，即使后期后端需要大范围的重构，只要保证数据格式不变，前端将不会有任何影响。

3.2 实现

3.2.1 后台实现

该系统使用Spring+Springmvc+Mybatis框架搭建而成，后台系统只对外提供数据接口，由前端通过API请求结构，后台以Json格式的数据返回。在本系统中采用3层开发模式（Controller-Service-Dao），Controller是前端控制器，接收Client发送的请求并解析URL后将请求转发给对应的逻辑。进入到Service后对请求进行逻辑处理，根据不同的需求各自处理。如搜索服务请求solr服务器，爬虫则调用python，其他请求同数据库进行交互。从数据源取到数据后由Springmvc将数据转换为Json格式返回给前端。

3.2.2 前端设计

该项目采用前后端分离的开发模式，前端独立作为一个项目存在，使用Node.js打包构建。系统的部分逻辑转移到前端实现，后台给前端提供数据。本系统采用基于MVVM模式的VueJS框架，通过其模块化，双向数据绑定和自定义路由等功能来简化系统的开发。

用户发送请求后并不是直接对后台进行请求，而是先转到Vue的路由（Router），由路由决定加载哪一个视图（View），渲染View的数据全部都在ViewModel中保存，当需要从后台获取数据时Model和后台进行数据交互，同时Model也会做一些前端逻辑处理。因为在MVVM模式中View和ViewModel是双向绑定的，所以对ViewModel中数据的更新会直接更新View。

（1）创建项目结构。

在项目路径下创建public文件夹，在public文件夹下创建package.json文件。在该文件中列出需要的库信息，在终端键入：npm install，npm会自动下载我们需要的库文件，下载好后会在当前文件夹下生成一个node_modules文件夹，库文件放在该文件夹中。在public文件夹下创建src文件夹，用于存放项目的代码文件。

（2）请求数据。

在src目录下创建router.js文件，在该文件中编写前端路由规则，导入Vue的路由组件，前端路由都从router.js开始，vue-router解析url后根据router.js文件的路由规则加载组件，在该组件中从后台请求数据，同时可以做一些其他的业务逻辑操作。

在加载到数据后，因为Vue中View和ViewModel是双向绑定，所以只需要更新ViewModel即可更新View，Vue提供了进行绑定的关键字，只需在HTML中的标签上使用绑定的关键字即可实现双向绑定。从后台获取到数据后通过vue的事件驱动即可实现数据的加载和其他操作，而不需要由程序员主动操作DOM，使得前端项目结构十分清晰。本项目中使用Node.js的npm工具打包，在开发好后，通过在终端使用npm install命令即可对前端打包完成，将前后端代码分别部署相互不产生干扰。

4 结语

本文介绍了软件开发中前后端模式的基本历程，并以一种基于前后端分离的成果展示系统为例介绍了前后端分离的基本结构。软件开发中前后端进行分离后由后端提供数据然后前端来进行渲染使得项目分工明确，开发过程中前后端可以各自测试已经完成的功能，最后将前后端进行对接，有效地提升开发效率。但同时需要注意的是由于前后端分离技术目前还不是十分成熟，并且由于在前端进行页面渲染也不利于搜索引擎优化（Search Engine Optimization，SEO），所以我们在选择开发模式时应根据项目需求决定，同时也应多尝试前后端分离的模式，促进前后端分离模式趋于成熟。