輕量級前后端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.