孙思杰

摘  要：在传统的Web项目开发中，前后端代码耦合度高，效率低下，且可维护性低下，直接造成了页面响应速度慢的效果。然而，前后端分离模式将会让开发人员分工明确从而大大提高工作效率，为优质产品打造精益团队。

关键词：Web;前后端分离模式;SpringBoot，Vue.js

中图分类号：TP393         文献标志码：A         文章编号：2095-2945（2020）27-0096-02

Abstract： In the traditional Web project development， the front and back end code coupling is high， the efficiency is low， and the maintainability is low， which directly results in the slow response speed of the page. However， the front-end separation mode will allow developers to have a clear division of labor， thus greatly improving productivity and creating lean teams for high-quality products.

Keywords： Web; front-end separation mode; SpringBoot，Vue.js

引言

Web开发如今在互联网上成为了一种通用性的交流语言，不论是在浏览器中可以看到的各种各样的网页也好还是手机App的后端也好，都是基于着Web技术进行构建、建设。在Web开发中，各式各样的技术栈成群出现，我们也习惯的将他们大致的分为前端技术、后端技术。

1 传统Web开发

传统的Web开发（见图1），前后端代码高度耦合，业务逻辑和网页视图混搭在一起，之后逐渐发展为MVC的三层架构。MVC使用一种逻辑、数据、视图分离的方法组织项目代码。MVC中重要的控制器将实体类对象和视图之间建立起一个重要的桥梁。实现多层次之间的解耦。MVC的出现无疑是一种巨大的进步。但用户想要看到最终页面必须要经过三层的流程。在浏览器收到页面之前，一切的工作都是由后端渲染完成，这便占用了服务器的运算资源，而网站访问量较大时网站响应速度较慢，并且服务端压力较大，它的缺点也十分明显。当网站逐渐庞大起来，项目必定要进行升级扩展和结构优化。但是传统的开发造成了项目的扩展困难，增加的扩展成本，不能及时优化将会影响到企业的利益。

2 什么是前后端分离

前后端分离是种架构模式，或者说是最佳实践，前后端分离的核心：后台提供数据，前端负责显示。如果将前后端代码以及数据库放在同一个服务器，很容易使得服務器全盘崩溃，导致项目被迫下线。所以前端一个服务器，后端一个服务器，前后端之间只进行数据的传输。说通俗点就是后端项目里面看不到页面（JSP|HTML），后端给前端提供接口，前端调用后端提供的REST风格接口就行，前端专注写页面（JSP|HTML）和渲染（JS|CSS|各种前端框架）;后端专注写代码。

3 前后端分离的模式能带给我们什么

3.1 打造高质量技术人才（开发人员分离）

曾经的开发人员是被称为全栈开发人员，全栈指的是他既要会数据库开发（SQL），又要会服务器端的开发

（JAVA＼C#＼C++＼Python等），又要会前端页面的开发

（HTML＼CSS＼JS）。但现实却是，样样通不如一样精，一个人的精力是有限的，如果每一种技能都用心去学，纵使天资聪颖，每种都掌握得不错，但也比不上一个专攻一门技术的人。术业有专攻的人在其他的领域，或许一窍不通，但是在他擅长的领域，却可以取得非凡的成就。前后端分离就会解救那些全栈开发人员。让他们有更多的精力去专攻一种方向，前端或者后端。

3.2 团队开发的高效性

前后端分离的开发模式可以使得开发人员各司其职，前端开发人员只需要专心追求：页面表现，速度流畅，兼容性，用户体验等。后端开发人员只需要专心追求：高并发，高可用，高性能，安全，存储，业务等。两者并行开发，提高开发效率，让项目迅速上线，抢占市场。

3.3 前后端分开部署服务器，系统性能提升

分别部署服务器，前端项目一个服务器，后端项目一个服务器，这样会大大提升页面的流畅度，提高用户体验度。随着互联网技术的不断发展，更多的人在网页上寻找他们所需的信息，而这则会加大后端服务器压力，为了使用户有更好的体验，我们更关心的则是业务逻辑的完整，流畅。在大并发高流量时，我们可以水平扩展前后端服务器，多台服务器可以一起承担巨大的访问量，解决了高访问高并发时服务器压力大，容易服务器崩溃的现象。

3.4 增强项目业务的可扩展性和代码的可维护性

当项目发展到一定程度时，项目的可维护性就会逐渐变差，可能会经常出现改一处而动全部的情况。当公司需要修改某个业务功能的时候，或者添加一项新的功能业务的时候，将会耗费巨大的人力与时间。这种情况下，高可扩展性的、低耦合的程序代码就变得非常重要了。

前后端分离的开发模式，正是将前后端代码进行解耦，使得项目可以使用模块化的开发模式，前端代码使用组件便可以进行代码复用，后端代码使用经典三层架构使得逻辑清晰。这样一来，添加业务功能也变得方便。可扩展性大大提高。

发生bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本问题，页面样式问题，全部由前端工程师负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方互不干扰。

4 前后端分离开发模式具体实现

首先后端可以采用比较流行的微服务架构SpringBoot，它继承了Spring优秀的基因，并拥有着简化开发，简化配置、简化部署等诸多优势。前端则可以采用典型的单页应用框架Vue。二者相结合实现前后端分离架构。

4.1 技术简介——SpringBoot

SpringBoot是一个基于Spring的全新框架，它的出现目的是用来简化Spring项目的初始搭建和开发过程。以前在写Spring的项目时，需要各种繁琐的配置文件。以及之后Spring对其他框架的整合时各种的配置文件。以往我们使用SSM框架进行开发的时候，搭建项目和整合三大框架，我们需要做很多繁琐的配置文件，比如配置web.xml，配置Spring，配置Mybatis，并将它们整合在一起等，Spring的开发模式越来越显得笨重。在这种环境下，Spring Boot伴随着Spring4一起出现了。

SpringBoot它化繁为简的能力，让开发变得极其简单和快捷，所以在业界备受关注。SpringBoot在国内的关注趋势也日渐超过Spring。

4.2 技术简介——Vue.js

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

Vue.js的出现使得开发人员可以用简单的API实现响应的数据绑定和组合的视图组件。但它自身不是一个全能框架——它只聚焦于视图层。所以它的学习成本也相对较低。它的创造者也是一位中国人，所以Vue.js的使用文档也非常亲近于国人。Vue是MVVM模式的，使用Vue的话，不需要直接操作dom，效率更高。

4.3 前后端分离应用实例——基于Web应用的学生会管理系统

“学生会管理系统”主要解决的是目前高校中学生组织中管理难的问题，在校园学生会管理方面上仍存在着许多需要改进的地方。比如人员材料、活动记录等信息无法完全存档或存档之麻烦，没有科学的安排和规划，使得学生干部都需要做一些重复和繁琐的工作，导致工作无法创新发展，而这些繁琐的工作耗费了巨大的人力和精力。

此系統实现了“学生会管理系统”中的财务管理，会议记录，请假记录月计划总结，出勤管理，评优管理，成员管理，会议管理，公告管理、工作安排管理、部门管理以及权限安全方面的管理。

“学生会管理系统”是基于Web，使用前后端分离的架构进行开发。以下作者将简单介绍此系统的架构实现。

项目采用Vue+SpringBoot的技术实现前后端分离，之间进行跨域处理。前后端之间通过JSON格式的数据进行交互，前端控制页面的跳转，而后端则根据前端发来的请求响应数据，前端收到数据将其进行包装，并对页面相应的字段填充数据。前端部署在Nginx服务器，后端部署在Springboot内置Tomcat。分开部署，以减少服务器压力。

5 结束语

前后端分离的开发模式是合理的，十分有必要的。这种模式下，大家各司其职，分工明确。前后端分离实现了并行开发，有效的提高了开发效率，降低了学习成本并提高了代码质量，但任何的开发架构模式不可能适应所有的业务场景。前后端分离也例外，只是对于绝大部分的Web开发或移动App开发具有积极的影响。但如果开发人员专一于前端或者后端并不是全栈工程师，同时想具有高性能高并发，适合将前端与后端部署在不同的服务器上，建议使用前后端分离，但也不是绝对的，需结合真实业务场景进行选择。

参考文献：

[1]王松.SpringBoot+Vue全栈开发实战[M].清华大学出版社，2019.

[2]迟殿委.前后端分离的Web架构解决方案[J].智慧工厂，2019（06）：37-38.

[3]杜艳美.黄晓芳.面向企业级web应用的前后端分离开发模式及实践[J].西南科技大学学报（自然科学版），2018，33（002）：83-87.

[4]林嘉婷.试谈前后端分离及基于前端MVC框架的开发[J].电脑编程技巧与维护，2016（23）：5-8.

[5]魏钢.Web前后端分离模式下SpringMVC在高职JavaWeb教学中的研究[J].福建电脑，2019，035（002）：107-108.

[6]孟祥双.前后端分离式Web应用开发研究[J].电子元器件与信息技术，2019，3（06）：40-43.