Web项目前后端分离的设计与实现

来源:用户上传      作者:王建 罗政 张希 张梦琪 张科 马文成

　　摘  要：针对传统互联网WEB程序开发模式中存在的耦合度较高、串行开发效率低等问题，在充分分析传统互联网WEB程序开发模式的基础上，我们引入了SSM架构来实现前后端分离，从而解决人力不足，分工不明确和前后端耦合度高等问题。并在此基础上，开发了一个基于GIS的土壤重金属污染分析与模拟系统，系统为B/S架构，后端程序采用Java的SSM架构（Spring、Spring MVC、Mybatis），前后端交互操作利用Ajax技术实现。在此基础上，可以得出前后端分离技术具有加快项目的开发速度，提高用户访问Web程序的响应速度，并且能够解决项目开发中人员分工不明确等问题的结论。
　　关键词：SSM架构;前后端分离;Ajax;Spring;MVC框架
　　中图分类号：TP311     文献标识码：A
　　Abstract：Aiming at the issues of high coupling and low serial development efficiency in the traditional internet WEB program development model，based on a full analysis of the traditional internet WEB program development model，this research introduced the SSM architecture to achieve front-end and back-end separation，thereby solving the issues of insufficient human resource，unclear division of labor，and high front-end coupling.Based on this，a GIS-based heavy metal soil pollution analysis and simulation system was developed.The system adopts B/S architecture.The back-end program uses the Java SSM architecture（Spring，Spring MVC，Mybatis）.The front-end and back-end interactive operations use Ajax for technical realization.On this basis，it can be concluded that the front and back end separation technology can speed up the development of the project，improve the response speed of users accessing web programs，and solve the problem of unclear division of labor in project development.
　　Keywords：SSM architecture;front-end and back-end separation;ajax;spring;MVC framework.
　　1   引言（Introduction）
　　现在B/S开发模式因其开发的项目更新速度快和无须用户安装的优点，逐渐成为应用开发时的主流开发模式。但是它的缺点也十分明显，例如难以处理复杂的业务，网站比较庞大或者流量较大时网站响应速度较慢，并且服务端压力较大[1]。
　　从项目维护和扩展的角度上说，随着网站流量的增加，和项目架构的不断的演进，项目势必要进行升级扩展和结构优化。传统的开发模式中前后端代码耦合在一起，造成了代码的可读性以及可扩展性不高，给后期项目的维护和扩展增加了难度，增加了维护和扩展成本，可能会影响项目的更新上线速度，降低网站的访问流量，对企业造成损失[2]。
　　从开发的角度来看，传统开发模式中开发人员在开发过程中，不仅要设计后端的结构和功能，还要设计制作前端页面，最后将两者融合在一起，这会影响开发速度，增加开发时间。并且还会增加编程人员学习的成本，整个项目的前后端都是一个人设计实现，要求开发人员熟悉前后端开发技术，但是前后端开发技术多达十几种，对开发人员来说是一个极大的负担[3]。因其对开发人员要求较高，且开发周期较长，势必会增加项目开发的成本。但是前后端分离模式的出现较好地解决了这个问题。
　　因此WEB项目用前后端分离的开发模式是十分合理和必要的。
　　2  前后端分离的优势（Advantages of front and back end separation）
　　2.1   什么是前后端分离模式
　　在传统的互联网Web软件开发中，程序员不仅需要负责后端，还要负责前端，这就导致了Web应用程序的高度耦合，使软件开发的效率大大降低。而在前后端分离的开发模式中，开发者都只需要各司其职，即后端程序员只负责业务逻辑等，并向前端程序员提供API接口，而前端则负责将API接口上获得的数据渲染到HTML页面上[4]。在这种模式中，前后端基本实现了高度解耦，职责分明，分工明確，开发者只需要把后端的每一个视图视为一个接口，前端页面通过对接口的访问来与数据库进行交互。
　　2.2   前后端分离的优点
　　（1）有利于打造高质量团队
　　开发人员只需要对前端或者后端之中选其一进行深入学习，从而节省学习的时间，并且随着不断地学习和项目经验的积累，开发人员对自己所负责的部分会越来越精通，编写的代码质量越来越高[5]。这有利于开发高质量产品的同时，也会不断地提升开发人员和团队的业务水平。 　　（2）提高工作效率，分工更加明确
　　前后端分离模式能够让前端开发人员专门负责前端，不会因要兼顾后端而分心，后端开发人员只需专门负责后端，不用考虑前端代码。两者并行开发，提高开发效率，加快项目上线速度，有利于抢占市场。前端页面中的某些不涉及数据的页面调整只需修改前端代码，而不用修改后端代码。对于企业而言，程序出现bug，快速定位是谁的问题，这是非常重要的。页面内部的布局和逻辑，页面与页面之间跳转时出现失误，页面与浏览器不兼容，页面的样式不合理等问题，全部由前端开发人员来负责。调用接口时数据出错，数据提交失败，请求超时等问题，全部由后端开发人员来解决[6]。双方互不干扰，职责清晰。
　　（3）分别部署，系统性能提升
　　前后端项目成为两个单独的项目，每个项目都部署在单独的服务器上，这会大大提高页面的响应速度，并且在页面与用户的交互及用户体验上有较大提升。特别是对于大型项目和流量巨大的网站，这种方式尤为重要。举个例子，淘宝的一个页面就要3000多台前端服务器进行分布式集群来顶住每日平均几亿的用户访问量，由此可知它的后端程序有多么复杂[7]。前后端分离有利于大型项目做集群，多台服务器共同承担访问流量，不易造成程序崩溃。对于其后端而言，后端程序中没有前端代码，只有后端代码，服务器只需要运行后端代码，给前端页面提供接口和数据。这极大地降低了服务器运行的压力，提升了页面响应的速度。
　　（4）增强代码的可维护性
　　前后端代码基本实现完全解耦，项目可以进行模块化开发，前端大量的代码以组件的方式得以复用，后端代码的逻辑更加清晰，可以以模块的方式得以复用。这种方式为项目的维护和升级提供了比较好的环境，以后相似项目的开发可以利用这些模块化代码，这会缩短开发时间。
　　3  基于GIS的土壤重金属污染分析与模拟系统设计（Analysis and simulation system design of heavy metal pollution in soil based on GIS）
　　3.1   前端设计
　　（1）用户模块
　　用户模块主要包括登录页面（包括字段验证和提交登录接口），用户注册（包括用户名异步检查和提交注册接口），找回密码（包括通过密码提示问题和token找回密码的逻辑实现，获取密码提示问题接口，获取token接口，重置密码接口），个人中心（包括显示个人信息，修改个人信息，获取用户信息接口），修改密码（包括根据原密码修改密码和更新密码接口）。
　　（2）地图浏览与基本操作模块
　　地图浏览（用户可以拖动平移工作区内的地图区域进行查看，但不影响整个地图的完整性和初始状态），图层切换（通过勾选不同的地图，以实现不同的底图风格），地图缩放（放大功能：系统可以支持用三两种放大功能，一种是滚动鼠标，即用户通过滚动鼠标，该区域按比例方大;第二种是逐级放大，用户直接点选放大，工作区内的地图按一定比例放大;第三种是缩放条放大，通过滑动缩放条，实现对工作区一定比例的放大。缩小功能：同放大功能，方向相反。选择高亮显示：因选择某要素后在地图上形成高亮显示）增添数据（增加污染源）等。
　　（3）查询模块
　　点击查询（通过鼠标点击采样点，会将该点放入数据集中，被选中的对象高亮显示，返回各种重金属浓度以饼状图和漏斗图显示），绘制查询（通过绘制多边形，获取多边形覆盖的点集合，被选中的点集合高亮显示，并将点集合中的采样点的各种重金属浓度以饼状图和漏斗图显示出来），SQL查询（在客户端合成查询SQL语句，向服务器提交进行SQL查询。通过选择重金属的种类以及浓度的等级，显示查询得到的点集合，查询到的结果在图形显示窗口中将高亮显示，其属性将以饼状图和漏斗图显示），数据集功能（保存当前查询到的样本的信息，可通过点击上一点或者下一点，可以查询数据集中样本点的信息）。
　　（4）分析模块
　　污染分析模块包括泰森多边形、克里格分析、表面等值线、缓冲区分析、热力图分析等。
　　泰森多边形（通过一组连接两邻点线段的垂直平分线组成的连续多边形组成。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离），表面等值线（某一数量指标值相等的各点连成的平滑曲线，由地图上标出的表示制图对象数量的各点，采用内插法找出各整數点绘制而成的），缓冲区分析（指以点、线、面实体为基础，自动建立其周围一定宽度范围内的缓冲区多边形图层）。
　　（5）展示模块
　　专题地图展示模块包括点聚合显示、折线图展示、柱状图展示、饼状图展示和雷达图展示等。点聚合显示（通过聚合显示，更直观地显示区域采样点的密度），单值柱状图专题图（通过指定某个字段单值柱状图专题图），柱状图专题图（通过指定字段或多个字段制作柱状图专题图），饼状图专题图（通过指定字段或多个字段制作饼状图专题图），玫瑰图专题图（通过指定字段或多个字段制作玫瑰图专题图）。
　　（6）重金属污染物的扩散模拟模块
　　污染模拟（通过重金属类型，将该重金属的相关信息传到后台，通过重金属扩散迁移模型，模拟出在一定时间内，扩散的范围，并显示在地图上）热力图显示（实现展示该对象的密度，通过数量来渲染颜色的等级），具体的前端界面如图1所示。
　　3.2   后端设计
　　后端主要有用户模块、地图浏览与基本操作模块、查询模块、分析模块、展示模块，以及重金属污染物的扩散模拟模块。用户模块主要包括用户登录、用户名的验证、用户注册、忘记密码、提交问题答案、重置密码、获取用户信息、更新用户信息、退出登录等功能。地图浏览与基本操作模块主要根据用户操作对地图进行放大、缩小、图层切换、添加数据等功能。查询模块主要有点击查询、绘制查询、SQL查询、数据集等功能。分析模块主要有泰深多边形、表面等值线、缓冲区分析等功能。展示模块主要有专题地图展示模块包括点聚合显示、折线图展示、柱状图展示、饼状图展示以及雷达图展示等功能。重金属污染物的扩散模拟模块主要由污染扩散模拟和热力图等功能。每个模块都有数据调用的接口。 　　3.3   数据库设计
　　数据是系统的基础，数据库设计就是为了将信息化的海量数据统一、高效地组织和管理起来，本系统中，有用户表，污染源表等10张关系型数据库表，还有一张图层空间数据库表。系统的总体架构图如图2所示。
　　4   前后端分离的实现（Implementation of front and back end separation）
　　4.1   前端项目实现
　　进行前端项目开发一般使用HTML、CSS、JavaScript、jQuery、Ajax等技术，并且可以使用主流的前端框架Vue.js、React、Angular.js等简化开发流程。IDE可以使用WebStorm来提高开发效率。前后端数据交互使用json格式的数据，前端页面给后端页面发请求，请求后端的接口[8]，从后端获取需要的数据，拿到后端数据之后解析数据然后用Ajax对数据进行渲染，将数据显示在界面上。可以利用Node.js、webpack对前端项目进行打包压缩和部署。
　　4.2   后端项目实现
　　后端的实现使用了SSM（Spring+SpringMVC+MyBatis）这款流行的后端开发框架，使用了Maven这款自动化构建工具，使用了IDEA作为IDE，并且还使用了许多优秀的插件，可以简化开发流程，提高开发效率[9]。根据项目的设计进行编码实现。
　　5   结论（Conclusion）
　　Web项目前后端分离开发实现了并行开发，有效地提高了开发效率。前后端分离降低了程序员的学习成本，程序员只需专精前端或者后端，不用像以前一样前后端都要会。大大提高了代码编写质量，缩短了开发周期。前后端分离可以基本实现前后端完全解耦，有利于提高后端代码的复用性，同时也有利于前端使用模块化的开发方式[10]。方便以后项目的维护和扩展升级。
　　参考文献（References）
　　[1] 林志玮，杨素慧，黄联发.Web与VR结合的植物实验教学系统建设[J].实验技术与管理，2020（02）：144-147.
　　[2] 王英，张震宇.我国省级档案馆Web可获取性研究[J].档案与建设，2020（01）：20-24;13.
　　[3] 康海燕，李昊.基于Web日志的性格预测与群体画像方法研究[J].郑州大学学报（理学版），2020，52（01）：39-46.
　　[4] 迟殿委.前后端分离的Web架构解决方案[J].智慧工厂，2019（06）：37-38.
　　[5] 杜艳美，黄晓芳.面向企业级web应用的前后端分离开发模式及实践[J].西南科技大学学报，2018，33（02）：83-87.
　　[6] 戈家龙，吴红亚，杨保华.基于SSM的前后端分离电商网站的设计与实践[J].电脑知识与技术，2018，14（13）：276-277.
　　[7] 何璇，马佳琳.基于Hadoop的Web日志分析系統的设计[J].软件工程，2019，22（02）：11-12;4.
　　[8] 孙一笑，张玉军，孙宇成，等.基于WebAPI前后端完全分离的软件开发模式[J].信息与电脑（理论版），2019（06）：96-97.
　　[9] 张鹏飞，王乾，胡晓冬，等.基于Node.js和JS的前后端分离实现[J].软件，2019，40（04）：11-17.
　　[10] 霍福华.Web前端MVC框架的发展方向以及意义[J].软件工程，2019，22（04）：44-46.
　　作者简介：
　　王   建（1999-），男，本科生.研究领域：GIS应用.
　　罗   政（1998-），男，本科生.研究领域：GIS应用.
　　张   希（2000-），男，本科生.研究领域：GIS应用.
　　张梦琪（2000-），男，本科生.研究领域：GIS应用.
　　张   科（1999-），男，本科生.研究领域：GIS应用.
　　马文成（2001-），男，本科生.研究领域：web前端.
转载注明来源:https://www.xzbu.com/1/view-15172268.htm