前后端分离的系统解耦部署方案设计与实现＊

赵圆圆，伍 岑

(湛江科技学院，广东 湛江 524000)

0 引言

传统模式下的软件开发过程一般是前端工程师设计用户界面，交由后端开发工程师进行修改，嵌套模板引擎，最后打包部署。这样的方式在小型项目中固然可取，而在当今爆发式的数据流量大背景下，传统的开发模式带来的不仅是开发效率低下，耦合度高，更加大了开发人员的学习成本。面对以上问题，前后端分离架构应运而生，前端工程师只需负责设计人机交互接口、渲染后端数据；后端工程师不必关心页面效果，只需关心实现约定接口和相关业务逻辑。如此前后端代码实现完全解耦，项目发布后可维护性高，同时可以实现并行开发，能大大的提高开发效率，在团队分工中达到职责清晰、术业专攻。

1 方案综述

1.1 传统模式下开发的Web应用

传统方式下的Web 应用开发主要方式为“模板引擎混合开发模式”，这样的工作流程如图1所示。客户端向Web 服务器发送一次请求，交由Servlet作简单的逻辑判断，接着向后台查询对应的结果，再将数据与模板引擎进行数据的渲染，最后将渲染后的模板以HTML的形式返回给浏览器。这样一套流程不难看出要实现一个Web 应用后端工程师需要对HTML 页面嵌套诸如JSP、Freemarker 的模板引擎，在模板引擎中参与数据的输出渲染。虽然在开发中不会产生问题，但是在后期维护中显得捉襟见肘，Web 应用在每一次迭代升级的过程中要需要前后端工程师不断沟通，效率低下。

图1 模板引擎混合开发模式

1.2 前后端解耦的Web应用

前后端解耦的核心在于如何将前端代码与后端实现画出一条清晰的分界线，在项目设计中，以接口作为前后端交互的桥梁，在项目开发前就定义好接口文档，例如通信时的请求方式、返回值数据类型、异常操作返回格式等一系列约定，这在项目开发前就需要准备好，这样，前端按照约定接口开发前端代码，后端根据约定接口实现具体功能。

而在接口设计中以“RESTful”（表现层状态转换）为约定风格，这也是前后端分离的最佳实践。RESTful 架构是实现前、后端分离的根本所在，如图2所示为前后端分离交互模式，客户端通过url方式通过向服务器发送一次资源请求，Web 服务器向客户端返回的是一段json 或xml 格式的数据，前端将数据渲染到客户端界面。而通过返回数据的方式将前后端代码彻底解耦，前端需要做的就是渲染数据，再展现到客户端。在前面说到传统的MVC 模式是服务器向客户端输出的是页面，导致前后端不能解耦，而以数据的形式传递到客户端则彻底解放了前后端的耦合性。

图2 前后端分离交互模式

1.3 后台服务器与数据库服务器的解耦

在实现接口具体操作时不可避免的需要对数据库进行CRUD 操作，一般情况下会将简单的SQL语句、以及连接数据库的写在后端代码中，这样也能实现数据持久化操作，这样带来的弊端就是SQL 语句与后端代码融合，在项目部署上线后如要进行数据查询规则的调整则需要修改后台代码，改动代码意味着要重新对程序进行编译，这样对项目上线后维护是及其不方便的。

而在Mybatis 框架下可以将SQL 语句与后台代码完全分离，将SQL 语句通过mapper.xml 文件进行统一管理，将主要的环境配置（用户名、密码、驱动、url 等）放置在mybatis-config.xml 核心配置文件中，同时在核心文件中配置类的扫描路径。这样当后台需要对数据进行持久化操作时的工作流程就演变成了如图3所示的后台服务器与SQL 分离工作模式：后台根据接口找到对应的mapper 文件，在mapper 文件中找到相对应的数据操作语句，然后对数据库进行CRUD操作，最后向Dao 层返回操作结果。这样带来的好处就是后台服务器与数据库完全解耦，在系统后续优化SQL语句时，直接修改mapper文件，无需改动后台代码。

图3 后台服务器与SQL分离工作模式

2 技术分析

基于前后端分离的系统开发前端以Vue（一套轻量级的构建用户的渐进式框架）为主体开发架构，summernote、echarts 等作为样式组件，通过Axios 与后端进行交互；后台以Springboot、Mybatis作为主要开发框架，以RESTFul 风格设计交互接口，向前端传递JSON格式数据。整体的逻辑架构如图4所示。

图4 基于前后端分离的系统架构图

Spring boot：

Spring 框架是Java 平台上的一种开源应用框架，提供具有控制反转特性的容器。而springboot 是基于spring4.0设计的一套敏捷的Web开发框架。

Mybatis：

MyBatis 是一款优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的XML 或注解来配置和映射原始类型、接口和Java POJO 为数据库中的记录。

VUE：

Vue 是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

3 项目部署

基于前后端分离的Web 系统开发实现后需要进行部署、测试、上线等工作。这里以在Linux 操作系统下进行服务器部署为例加以介绍。

在项目部署前需要做以下的前置工作，在Windows系统中下载安装VMwareworkstation工作站，在VMware中安装CentOS7虚拟镜像。当有了这样的环境后开始对项目部署，此过程省略了前后端代码的打包操作。由于采用前后端分离部署的方案，因此必须要在虚拟机中安装Nginx 反向代理服务器，用于存放前端静态资源。具体部署如下：

3.1 前端部署（linux操作环境）

⑴使用wgethttp://nginx.org/download/nginx-1.17.0.tar.gz将Nginx安装包下载到虚拟机；

⑵安装gcc环境：yuminstallgcc-c++；⑶安装pcre、openssl依赖库：

⑷解压NGINX 安装包：tar -zxvf nginx-1.17.0.tar.gz；

⑸启动NGINX，进入sbin目录：./nginx；

⑹放行NGINX 启动端口（NGINX 默认启动端口为80，因此放行80端口）：

⑺将前端项目打包后dist文件夹上传到centos7中。

⑻修改NGINX核心配置文件，如图5所示。

图5 修改NGINX核心配置文件

3.2 后端部署（linux操作环境）

⑴在服务器中下载JDK8：

⑵ 解压jdktar -zxvf jdk-8u40-linux-x64.tar.gz/usr/local/java；

⑶配置jdk环境变量：

⑷安装jdkyum install -y java-1.8.0-openjdk；

⑸通过文件上传工具将后端打包好的jar文件上传至服务器；

⑹使用jar命令运行项目jar包java -jar XXXX.jar。

3.3 数据库部署（linux操作环境）

⑴下载安装MySQL数据库：

⑵设置权限chownmysql:mysql -R/var/lib/mysql；

⑶初始化MySQLmysqld --initialize；

⑷启动MySQLsystemctl start mysqld；

⑸在Windows中下载可视化工具Navicat；

⑹远程连接Linux服务器中的MySQL；

⑺执行目标SQL文件。

通过以上操作就完成了整体项目在Linux 中的前后端分离部署，在部署完成之后需要在服务器中开放相应的防火墙端口，这样就能在Windows 平台中输入IP地址进行访问了。

4 结束语

前后端代码分离解耦后，前端工程师只需要给后端工程师提供接口文档，后端工程师不用关心前端代码实现，仅关注业务逻辑的实现与优化，给后端工程师提供了更多的精力去追求高性能、高并发、高可用；前端工程师也不用关心后端如何实现功能，只关注前端界面给用户带来的页面表现，速度流畅，兼容性，用户体验等其他工作。前后端代码解耦后能带来的优势是十分明显的，这也真正意义上达到了术业有专攻效果。