輕量級前后端Web 開發(fā)框架選取及應(yīng)用

趙曉麗

摘 要：文章通過對前后端分離思想的理解，對后端jersey框架的闡述，以及對前端框架的對比分析，最終前端選取React+Antd框架。前后端選取框架相結(jié)合，最終搭建輕量級的前后端分離的Web開發(fā)框架，并將開發(fā)框架應(yīng)用于保險行業(yè)，快速開發(fā)風(fēng)勘系統(tǒng)，實現(xiàn)了業(yè)務(wù)功能。

關(guān)鍵詞：Web;Jersey;React;輕量級;前后端

隨著信息時代的快速發(fā)展，各種計算機語言、各種信息系統(tǒng)開發(fā)方式都在變革，掌握其他語言的開發(fā)人員，要轉(zhuǎn)為Web開發(fā)，而Spring+SpringMVC原理對于轉(zhuǎn)型的程序員來說，很難快速入門。以前的Java Web項目前后端工程整合在一起，漸漸地，許多公司開始把前后端的界限分開，前后端工程師各司其職。針對以上現(xiàn)象，如何快速搭建一個輕量級的前后端分離的Web開發(fā)框架并應(yīng)用于系統(tǒng)，成為許多新人及中小公司的首選。文章首先闡述了Web前后端分離思想，其次介紹了輕量級的后端服務(wù)框架jersey，再次闡述了前端框架的選取，最后將輕量級Web框架應(yīng)用于具體保險行業(yè)項目，快速開發(fā)了系統(tǒng)功能，使項目按期上線應(yīng)用。

1 Web前后端分離思想

目前，Web前后端分離開發(fā)架構(gòu)已漸漸成為計算機互聯(lián)網(wǎng)項目開發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式，其核心思想就是前端的HTML頁面通過Ajax調(diào)用后端的Restuful Api服務(wù)接口，前后端使用json格式數(shù)據(jù)進行交互，最終實現(xiàn)通信要求[1]。

1.1 傳統(tǒng)Java Web的缺點

以前的Java Web項目大多使用JSP作為頁面層展示數(shù)據(jù)給用戶，一般都是Java程序員前后端代碼都要編寫，效率低下，而且靜態(tài)資源和動態(tài)資源全部耦合在一起，使服務(wù)器壓力很大。目前，對互聯(lián)網(wǎng)項目的性能要求越來越高，原始的前后端耦合的架構(gòu)模式已不能滿足現(xiàn)代互聯(lián)網(wǎng)的開發(fā)需要，更需要尋找一種新的前后端解耦的開發(fā)方式，來提升開發(fā)效率及服務(wù)器負載能力，于是前后端分離的思想應(yīng)運而生[2]。

1.2 前后端分離的優(yōu)勢

前后端分離既是一種開發(fā)模式，也是一種架構(gòu)模式，其實現(xiàn)了真正的前后端解耦。前端的Web服務(wù)器存放靜態(tài)資源（CSS、js、字體、圖片等），前端服務(wù)器負責(zé)控制頁面的引用、跳轉(zhuǎn)及路由，前端頁面異步調(diào)用后端的服務(wù)接口。后端應(yīng)用服務(wù)器使用Tomcat進行發(fā)布，作為數(shù)據(jù)提供者，加快了整體響應(yīng)速度。前后端互不干擾，只是簡單的調(diào)用關(guān)系，前端通過Ajax調(diào)用HTTP請求來調(diào)用后端的Restful api。

具體優(yōu)勢：前后端分工更明確;減少后端服務(wù)器的并發(fā)與負載壓力;增加代碼的易讀性和維護性;前后端并行開發(fā)，改變強依賴關(guān)系;前端大量的組件代碼得以復(fù)用，提升開發(fā)效率;局部性能提升。前端通過對路由進行配置，來實現(xiàn)頁面的按需加載，改善一起加載網(wǎng)站所有資源的現(xiàn)象，服務(wù)器無需解析前端頁面，在頁面交互和用戶體驗上有所提升[3]。

2 Web服務(wù)端輕量級jersey框架

2.1 jersey框架簡介

REST：表述性狀態(tài)轉(zhuǎn)移是一種跨語言、跨平臺的軟件架構(gòu)風(fēng)格，其通過超文本傳輸協(xié)議（HTTP協(xié)議）確定一組約束和屬性（GET、PUT、DELETE、POST），并使用URI協(xié)議來唯一標(biāo)識某個資源發(fā)布出來的接口。REST的簡單、輕量級特點與現(xiàn)行某些架構(gòu)及通信技術(shù)的復(fù)雜性形成鮮明對比，使得構(gòu)建服務(wù)和應(yīng)用變得異常簡單。

Jersey是一個實現(xiàn)REST架構(gòu)的web service框架，開源參考實現(xiàn)用于構(gòu)建RESTful的Web service。其擴展了JAX-RS規(guī)范，提供了更多的特性和工具，可以進一步簡化RESTful的client和service開發(fā)。對于請求式服務(wù)，如DELETE、GET請求，只要給出一個URI即可獲得請求，實現(xiàn)操作[4]。

2.2 前端框架選取

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

2.3 三大主流框架比較

Angular：Angular是一個優(yōu)秀的JavaScript開源的前端框架，使用MVC架構(gòu)模式的單頁面web應(yīng)用而設(shè)計，通過指令擴展HTML，且通過表達式將數(shù)據(jù)綁定到HTML，為開發(fā)者呈現(xiàn)一個更高層次的抽象來簡化Web應(yīng)用的開發(fā)。

Vue：Vue.js是一套構(gòu)建web數(shù)據(jù)驅(qū)動及用戶頁面的漸進式前端開發(fā)框架，Vue采用自底向上增量開發(fā)的設(shè)計。Vue的目標(biāo)是通過盡可能簡單的API來實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

React：React.js是一個開源的用于構(gòu)建前端用戶界面的JavaScript庫，React應(yīng)用程序的核心是組件，可以將按鈕、輸入框、日期控件等元素作為React組件。組件和組件之間可以嵌套組合，形成更大的組件，以供組合成頁面。

2.4 選擇React框架及Antd組件庫

由于React的設(shè)計思想獨特，性能出眾，代碼邏輯簡單，目前得到廣泛應(yīng)用，并已經(jīng)成為Web開發(fā)的主流工具。

Antd基于Ant Design設(shè)計體系的React UI組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，樣式簡潔大方。

基于以上框架比較，決定選擇React作為前端開發(fā)框架，并采用Antd組件庫[5]。

3 開發(fā)框架前后端搭建

3.1 通信原理

前端開發(fā)利用React原理的Antd組件化的開發(fā)方式，后端采用Jersey框架實現(xiàn)業(yè)務(wù)功能，輕量級開發(fā)框架前后端通信原理示意圖如圖1所示。

前端關(guān)注界面展現(xiàn)，后端關(guān)注業(yè)務(wù)邏輯，前后端分工明確，職責(zé)清晰。

3.2 前端開發(fā)環(huán)境搭建

安裝Node.js環(huán)境（包含npm工具），利用React腳手架create-react-app創(chuàng)建簡單的項目工程。由于開發(fā)應(yīng)用es6語法，所以要安裝相關(guān)依賴Babel，對于各靜態(tài)資源（CSS、圖片、字體等）要安裝相應(yīng)的loader加載器，開發(fā)環(huán)境等各種資源最終要進行打包處理，要安裝Webpack相關(guān)依賴，并配置webpack的config文件。對于按需加載、使用html模板、代表壓縮、提取css文件、自動構(gòu)建項目等，都要安裝相應(yīng)的依賴庫，根據(jù)需要按步驟依次進行安裝后，開發(fā)環(huán)境基本配置完成。

3.3 后端發(fā)布服務(wù)

在Maven中引用jersey相關(guān)的庫，在web.xml中添加配置，引入jersey庫，同時配置資源加載器，然后完成Servlet的服務(wù)類代碼編寫，最后客戶端調(diào)用web service接口完成通信。

3.3.1 完成Servlet服務(wù)類

3.3.2 代碼理解

在類上面添加了@Path（"hello"），代表資源根路徑為hello;在方法hi（）上面添加了兩個標(biāo)簽，@GET標(biāo)簽代表該方法接受GET類型請求;@Produces標(biāo)簽代表該方法響應(yīng)的MIME類型為json;啟動tomcat，發(fā)布服務(wù)，請求/rest/hello，得到正確的響應(yīng)結(jié)果[6]。

4 輕量級Web開發(fā)框架應(yīng)用

基于以上java端的jersey框架和前端的React框架+Antd組件庫，搭建了一套輕量級的前后端分離的Web開發(fā)框架，應(yīng)用于某保險公司某系統(tǒng)，在較短時間內(nèi)快速響應(yīng)需求，實現(xiàn)了項目的業(yè)務(wù)功能，得到了用戶的認(rèn)可。

5 結(jié)語

通過對前后端分離思想的分析及前后端Web框架介紹與選取，搭建出一套輕量級的前后端開發(fā)框架，并將該框架應(yīng)用于保險行業(yè)系統(tǒng)，快速響應(yīng)項目的開發(fā)需求，順利完成了項目。

參考文獻

[1] 劉嵩，李文惠.JavaWEB開發(fā)前后端數(shù)據(jù)解耦合的思考[J].消費導(dǎo)刊，2019（43）：23-25.

[2] 朱芝佚.移動主機Web服務(wù)及其應(yīng)用開發(fā)技術(shù)研究[D].大連：大連海事大學(xué)，2016.

[3] 孟祥雙.前后端分離式WEB應(yīng)用開發(fā)研究[J].電子元器件與信息技術(shù)，2019（06）：35-37.

[4] 魏鋼.Web前后端分離模式下SpringMVC在高職JavaWeb教學(xué)中的研究[J].福建電腦，2019（02）：44-46.

[5] 楊穎瑩.高性能Web框架的分析與應(yīng)用[D].北京：北京郵電大學(xué)，2012.

[6] 盧長利.基于MVC模式的Web框架構(gòu)建與應(yīng)用[D].西安：西安電子科技大學(xué)，2009.