前后端分離框架在軟件設計中的應用

李 宇，劉 彬

（攀枝花學院，四川 攀枝花 617000）

1 概述

在互聯網技術的發展過程中，前端開發在較長的一段時間不被重視，大多數前端人員也只是開發HTML和Css，前端沒有自己的架構，甚至部分前端工作都由后臺完成。但隨著目前互聯網的高速發展，對系統的要求變得十分高，軟件系統的復雜性和軟件體系規模也在不斷地增長。在2017年雙十一當天，淘寶系統頁面瀏覽量（Page View，PV）達400億次，涉及的軟件系統大大小小達數百個模塊。若還使用傳統的前后端耦合的方式，那么注定會有大量重復的代碼，當需要對一個功能修改時則需要將前后臺都進行修改，代碼管理難度上升，系統維護麻煩。根據這種情況，本文介紹目前解決此類問題的前后端分離的開發模式，并以一個項目演示前后端分離的基本結構。

2 發展歷程

2.1 傳統開發模式

在互聯網發展過程中，有很長的一段時間軟件開發模式都是使用的傳統開發的模式。其特點是通過后臺語言提供的模板來生成HTML頁面，然后通過服務器將生成的頁面返回給瀏覽器，由瀏覽器呈現給用戶。以Java語言為例，在傳統開發模式中，使用JSP作為模板引擎，JSP通過在HTML代碼中使用Java代碼或者特定的標簽集合來封裝動態邏輯。當客戶端請求JSP頁面時，服務器會將JSP編譯成為servlet后執行。這樣做的好處是開發效率較高，但是在JSP嵌入Java代碼使得前后端邏輯耦合嚴重，前端人員在維護頁面必須要會JSP，使得學習成本增高，并且項目上線后維護也十分不便。

2.2 Ajax

Ajax（異步的JavaScript和XML）是一種不需要刷新整個頁面僅對頁面中局部進行刷新的技術。使用Ajax后對頁面數據的更新不需要再刷新整個頁面，只需要后臺提供返回數據的API。在前端通過Ajax調用Api便可以對系統數據進行增刪改查等操作。通過這種方式將對請求的調用工作放在了前端進行，后臺開發人員不需要關注頁面，只提供符合要求的API，前端人員只需要根據后臺開發的API獲取數據即可，這樣將前后臺進行了一定程度的解耦。

2.3 前后端分離框架

隨著互聯網技術的高速發展，目前Web項目所需要應付的場景和以往有著很大的不同，以往的時候我們將代碼、數據庫放在同一個服務器中，所有的壓力都由一個服務器承擔。但目前各個網站訪問量都有了很大的上升。如果還是將所有的應用放在一個服務器中，很容易使得服務器崩潰，為解決這類問題，現在許多系統都是用集群或者分布式模式，將一個項目部署到多個服務器或者分為多個子項目分別部署。當用戶發送請求時，走完一個請求的全部流程可能需要經過多個服務器，還存在著請求跨域的問題，如果項目前后端耦合度較高，那么必然使得系統復雜性上升。為解決這一情況，前后端分離已經變成了一種必然的趨勢。

前后端分離是指將前端和后端從之前的相互融合中分離開來，兩者不再共用一個Server，前端作為一個獨立Server存在。這種情況下使得一部分業務邏輯轉移到前端，后臺通過API將數據交給前端后對前端就已經是無感知狀態，后端不再接觸任何的HTML或者模板頁面，前端獲得數據后進行業務邏輯的處理。

目前市面上流行的前端框架分別為：VueJS，React，Angular，使用這些框架都能很好地實現前后端分離，其中VueJS和Angular都使用了MVVM的開發模式實現業務邏輯，MVVM是對MVC的一個改進，將其中的View的狀態和行為進行抽象化，將頁面和業務分開。視圖獨立于模型而存在，單獨對視圖或模型修改不會影響對方，同時可以將一些視圖邏輯放到一個ViewModel中，實現邏輯的重用。

3 基于VueJS的學術成果展示系統設計

下面以攀枝花學院學術成果展示系統的設計為例，分析前后端分離模式在軟件設計中的應用。

3.1 技術介紹

3.1.1 Node.js

Node.js是一個JavaScript運行時環境，Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度很快。但在本系統中并不直接使用Node.js進行系統開發，而是使用其提供了NPM工具對前端系統進行打包構建。

3.1.2 Vue.js

Vue.js是一套構建用戶界面的漸進式框架。其核心只關注視圖層，并且非常容易學習，非常容易與其他庫或已有項目整合。Vue完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。Vue的目標是通過簡單的 API實現響應的數據綁定和組合的視圖組件。Vue自身不是一個全能框架，它只聚焦于視圖層。在前后端分離的開發模式下，Vue作為前端框架管理前端的路由以及數據信息。這樣就好似前端作為一個系統而存在，即使后期后端需要大范圍的重構，只要保證數據格式不變，前端將不會有任何影響。

3.2 實現

3.2.1 后臺實現

該系統使用Spring+Springmvc+Mybatis框架搭建而成，后臺系統只對外提供數據接口，由前端通過API請求結構，后臺以Json格式的數據返回。在本系統中采用3層開發模式（Controller-Service-Dao），Controller是前端控制器，接收Client發送的請求并解析URL后將請求轉發給對應的邏輯。進入到Service后對請求進行邏輯處理，根據不同的需求各自處理。如搜索服務請求solr服務器，爬蟲則調用python，其他請求同數據庫進行交互。從數據源取到數據后由Springmvc將數據轉換為Json格式返回給前端。

3.2.2 前端設計

該項目采用前后端分離的開發模式，前端獨立作為一個項目存在，使用Node.js打包構建。系統的部分邏輯轉移到前端實現，后臺給前端提供數據。本系統采用基于MVVM模式的VueJS框架，通過其模塊化，雙向數據綁定和自定義路由等功能來簡化系統的開發。

用戶發送請求后并不是直接對后臺進行請求，而是先轉到Vue的路由（Router），由路由決定加載哪一個視圖（View），渲染View的數據全部都在ViewModel中保存，當需要從后臺獲取數據時Model和后臺進行數據交互，同時Model也會做一些前端邏輯處理。因為在MVVM模式中View和ViewModel是雙向綁定的，所以對ViewModel中數據的更新會直接更新View。

（1）創建項目結構。

在項目路徑下創建public文件夾，在public文件夾下創建package.json文件。在該文件中列出需要的庫信息，在終端鍵入：npm install，npm會自動下載我們需要的庫文件，下載好后會在當前文件夾下生成一個node_modules文件夾，庫文件放在該文件夾中。在public文件夾下創建src文件夾，用于存放項目的代碼文件。

（2）請求數據。

在src目錄下創建router.js文件，在該文件中編寫前端路由規則，導入Vue的路由組件，前端路由都從router.js開始，vue-router解析url后根據router.js文件的路由規則加載組件，在該組件中從后臺請求數據，同時可以做一些其他的業務邏輯操作。

在加載到數據后，因為Vue中View和ViewModel是雙向綁定，所以只需要更新ViewModel即可更新View，Vue提供了進行綁定的關鍵字，只需在HTML中的標簽上使用綁定的關鍵字即可實現雙向綁定。從后臺獲取到數據后通過vue的事件驅動即可實現數據的加載和其他操作，而不需要由程序員主動操作DOM，使得前端項目結構十分清晰。本項目中使用Node.js的npm工具打包，在開發好后，通過在終端使用npm install命令即可對前端打包完成，將前后端代碼分別部署相互不產生干擾。

4 結語

本文介紹了軟件開發中前后端模式的基本歷程，并以一種基于前后端分離的成果展示系統為例介紹了前后端分離的基本結構。軟件開發中前后端進行分離后由后端提供數據然后前端來進行渲染使得項目分工明確，開發過程中前后端可以各自測試已經完成的功能，最后將前后端進行對接，有效地提升開發效率。但同時需要注意的是由于前后端分離技術目前還不是十分成熟，并且由于在前端進行頁面渲染也不利于搜索引擎優化（Search Engine Optimization，SEO），所以我們在選擇開發模式時應根據項目需求決定，同時也應多嘗試前后端分離的模式，促進前后端分離模式趨于成熟。