轻量级前后端Web 开发框架选取及应用

赵晓丽

摘 要：文章通过对前后端分离思想的理解，对后端jersey框架的阐述，以及对前端框架的对比分析，最终前端选取React+Antd框架。前后端选取框架相结合，最终搭建轻量级的前后端分离的Web开发框架，并将开发框架应用于保险行业，快速开发风勘系统，实现了业务功能。

关键词：Web;Jersey;React;轻量级;前后端

随着信息时代的快速发展，各种计算机语言、各种信息系统开发方式都在变革，掌握其他语言的开发人员，要转为Web开发，而Spring+SpringMVC原理对于转型的程序员来说，很难快速入门。以前的Java Web项目前后端工程整合在一起，渐渐地，许多公司开始把前后端的界限分开，前后端工程师各司其职。针对以上现象，如何快速搭建一个轻量级的前后端分离的Web开发框架并应用于系统，成为许多新人及中小公司的首选。文章首先阐述了Web前后端分离思想，其次介绍了轻量级的后端服务框架jersey，再次阐述了前端框架的选取，最后将轻量级Web框架应用于具体保险行业项目，快速开发了系统功能，使项目按期上线应用。

1 Web前后端分离思想

目前，Web前后端分离开发架构已渐渐成为计算机互联网项目开发的业界标准使用方式，其核心思想就是前端的HTML页面通过Ajax调用后端的Restuful Api服务接口，前后端使用json格式数据进行交互，最终实现通信要求[1]。

1.1 传统Java Web的缺点

以前的Java Web项目大多使用JSP作为页面层展示数据给用户，一般都是Java程序员前后端代码都要编写，效率低下，而且静态资源和动态资源全部耦合在一起，使服务器压力很大。目前，对互联网项目的性能要求越来越高，原始的前后端耦合的架构模式已不能满足现代互联网的开发需要，更需要寻找一种新的前后端解耦的开发方式，来提升开发效率及服务器负载能力，于是前后端分离的思想应运而生[2]。

1.2 前后端分离的优势

前后端分离既是一种开发模式，也是一种架构模式，其实现了真正的前后端解耦。前端的Web服务器存放静态资源（CSS、js、字体、图片等），前端服务器负责控制页面的引用、跳转及路由，前端页面异步调用后端的服务接口。后端应用服务器使用Tomcat进行发布，作为数据提供者，加快了整体响应速度。前后端互不干扰，只是简单的调用关系，前端通过Ajax调用HTTP请求来调用后端的Restful api。

具体优势：前后端分工更明确;减少后端服务器的并发与负载压力;增加代码的易读性和维护性;前后端并行开发，改变强依赖关系;前端大量的组件代码得以复用，提升开发效率;局部性能提升。前端通过对路由进行配置，来实现页面的按需加载，改善一起加载网站所有资源的现象，服务器无需解析前端页面，在页面交互和用户体验上有所提升[3]。

2 Web服务端轻量级jersey框架

2.1 jersey框架简介

REST：表述性状态转移是一种跨语言、跨平台的软件架构风格，其通过超文本传输协议（HTTP协议）确定一组约束和属性（GET、PUT、DELETE、POST），并使用URI协议来唯一标识某个资源发布出来的接口。REST的简单、轻量级特点与现行某些架构及通信技术的复杂性形成鲜明对比，使得构建服务和应用变得异常简单。

Jersey是一个实现REST架构的web service框架，开源参考实现用于构建RESTful的Web service。其扩展了JAX-RS规范，提供了更多的特性和工具，可以进一步简化RESTful的client和service开发。对于请求式服务，如DELETE、GET請求，只要给出一个URI即可获得请求，实现操作[4]。

2.2 前端框架选取

目前，主流前端框架有Angular、Vue、React。除此之外，还有easyui、MintUI等其他框架。

2.3 三大主流框架比较

Angular：Angular是一个优秀的JavaScript开源的前端框架，使用MVC架构模式的单页面web应用而设计，通过指令扩展HTML，且通过表达式将数据绑定到HTML，为开发者呈现一个更高层次的抽象来简化Web应用的开发。

Vue：Vue.js是一套构建web数据驱动及用户页面的渐进式前端开发框架，Vue采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API来实现响应的数据绑定和组合的视图组件。

React：React.js是一个开源的用于构建前端用户界面的JavaScript库，React应用程序的核心是组件，可以将按钮、输入框、日期控件等元素作为React组件。组件和组件之间可以嵌套组合，形成更大的组件，以供组合成页面。

2.4 选择React框架及Antd组件库

由于React的设计思想独特，性能出众，代码逻辑简单，目前得到广泛应用，并已经成为Web开发的主流工具。

Antd基于Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品，样式简洁大方。

基于以上框架比较，决定选择React作为前端开发框架，并采用Antd组件库[5]。

3 开发框架前后端搭建

3.1 通信原理

前端开发利用React原理的Antd组件化的开发方式，后端采用Jersey框架实现业务功能，轻量级开发框架前后端通信原理示意图如图1所示。

前端关注界面展现，后端关注业务逻辑，前后端分工明确，职责清晰。

3.2 前端开发环境搭建

安装Node.js环境（包含npm工具），利用React脚手架create-react-app创建简单的项目工程。由于开发应用es6语法，所以要安装相关依赖Babel，对于各静态资源（CSS、图片、字体等）要安装相应的loader加载器，开发环境等各种资源最终要进行打包处理，要安装Webpack相关依赖，并配置webpack的config文件。对于按需加载、使用html模板、代表压缩、提取css文件、自动构建项目等，都要安装相应的依赖库，根据需要按步骤依次进行安装后，开发环境基本配置完成。

3.3 后端发布服务

在Maven中引用jersey相关的库，在web.xml中添加配置，引入jersey库，同时配置资源加载器，然后完成Servlet的服务类代码编写，最后客户端调用web service接口完成通信。

3.3.1 完成Servlet服务类

3.3.2 代码理解

在类上面添加了@Path（"hello"），代表资源根路径为hello;在方法hi（）上面添加了两个标签，@GET标签代表该方法接受GET类型请求;@Produces标签代表该方法响应的MIME类型为json;启动tomcat，发布服务，请求/rest/hello，得到正确的响应结果[6]。

4 轻量级Web开发框架应用

基于以上java端的jersey框架和前端的React框架+Antd组件库，搭建了一套轻量级的前后端分离的Web开发框架，应用于某保险公司某系统，在较短时间内快速响应需求，实现了项目的业务功能，得到了用户的认可。

5 结语

通过对前后端分离思想的分析及前后端Web框架介绍与选取，搭建出一套轻量级的前后端开发框架，并将该框架应用于保险行业系统，快速响应项目的开发需求，顺利完成了项目。

参考文献

[1] 刘嵩，李文惠.JavaWEB开发前后端数据解耦合的思考[J].消费导刊，2019（43）：23-25.

[2] 朱芝佚.移动主机Web服务及其应用开发技术研究[D].大连：大连海事大学，2016.

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

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

[5] 杨颖莹.高性能Web框架的分析与应用[D].北京：北京邮电大学，2012.

[6] 卢长利.基于MVC模式的Web框架构建与应用[D].西安：西安电子科技大学，2009.