Web項目基于前后端分離模式的設計與應用

孫思杰

摘? 要：在傳統(tǒng)的Web項目開發(fā)中，前后端代碼耦合度高，效率低下，且可維護性低下，直接造成了頁面響應速度慢的效果。然而，前后端分離模式將會讓開發(fā)人員分工明確從而大大提高工作效率，為優(yōu)質產品打造精益團隊。

關鍵詞：Web;前后端分離模式;SpringBoot，Vue.js

中圖分類號：TP393? ? ? ? ?文獻標志碼：A? ? ? ? ?文章編號：2095-2945（2020）27-0096-02

Abstract： In the traditional Web project development， the front and back end code coupling is high， the efficiency is low， and the maintainability is low， which directly results in the slow response speed of the page. However， the front-end separation mode will allow developers to have a clear division of labor， thus greatly improving productivity and creating lean teams for high-quality products.

Keywords： Web; front-end separation mode; SpringBoot，Vue.js

引言

Web開發(fā)如今在互聯(lián)網上成為了一種通用性的交流語言，不論是在瀏覽器中可以看到的各種各樣的網頁也好還是手機App的后端也好，都是基于著Web技術進行構建、建設。在Web開發(fā)中，各式各樣的技術棧成群出現(xiàn)，我們也習慣的將他們大致的分為前端技術、后端技術。

1 傳統(tǒng)Web開發(fā)

傳統(tǒng)的Web開發(fā)（見圖1），前后端代碼高度耦合，業(yè)務邏輯和網頁視圖混搭在一起，之后逐漸發(fā)展為MVC的三層架構。MVC使用一種邏輯、數據、視圖分離的方法組織項目代碼。MVC中重要的控制器將實體類對象和視圖之間建立起一個重要的橋梁。實現(xiàn)多層次之間的解耦。MVC的出現(xiàn)無疑是一種巨大的進步。但用戶想要看到最終頁面必須要經過三層的流程。在瀏覽器收到頁面之前，一切的工作都是由后端渲染完成，這便占用了服務器的運算資源，而網站訪問量較大時網站響應速度較慢，并且服務端壓力較大，它的缺點也十分明顯。當網站逐漸龐大起來，項目必定要進行升級擴展和結構優(yōu)化。但是傳統(tǒng)的開發(fā)造成了項目的擴展困難，增加的擴展成本，不能及時優(yōu)化將會影響到企業(yè)的利益。

2 什么是前后端分離

前后端分離是種架構模式，或者說是最佳實踐，前后端分離的核心：后臺提供數據，前端負責顯示。如果將前后端代碼以及數據庫放在同一個服務器，很容易使得服務器全盤崩潰，導致項目被迫下線。所以前端一個服務器，后端一個服務器，前后端之間只進行數據的傳輸。說通俗點就是后端項目里面看不到頁面（JSP|HTML），后端給前端提供接口，前端調用后端提供的REST風格接口就行，前端專注寫頁面（JSP|HTML）和渲染（JS|CSS|各種前端框架）;后端專注寫代碼。

3 前后端分離的模式能帶給我們什么

3.1 打造高質量技術人才（開發(fā)人員分離）

曾經的開發(fā)人員是被稱為全棧開發(fā)人員，全棧指的是他既要會數據庫開發(fā)（SQL），又要會服務器端的開發(fā)

（JAVA＼C#＼C++＼Python等），又要會前端頁面的開發(fā)

（HTML＼CSS＼JS）。但現(xiàn)實卻是，樣樣通不如一樣精，一個人的精力是有限的，如果每一種技能都用心去學，縱使天資聰穎，每種都掌握得不錯，但也比不上一個專攻一門技術的人。術業(yè)有專攻的人在其他的領域，或許一竅不通，但是在他擅長的領域，卻可以取得非凡的成就。前后端分離就會解救那些全棧開發(fā)人員。讓他們有更多的精力去專攻一種方向，前端或者后端。

3.2 團隊開發(fā)的高效性

前后端分離的開發(fā)模式可以使得開發(fā)人員各司其職，前端開發(fā)人員只需要專心追求：頁面表現(xiàn)，速度流暢，兼容性，用戶體驗等。后端開發(fā)人員只需要專心追求：高并發(fā)，高可用，高性能，安全，存儲，業(yè)務等。兩者并行開發(fā)，提高開發(fā)效率，讓項目迅速上線，搶占市場。

3.3 前后端分開部署服務器，系統(tǒng)性能提升

分別部署服務器，前端項目一個服務器，后端項目一個服務器，這樣會大大提升頁面的流暢度，提高用戶體驗度。隨著互聯(lián)網技術的不斷發(fā)展，更多的人在網頁上尋找他們所需的信息，而這則會加大后端服務器壓力，為了使用戶有更好的體驗，我們更關心的則是業(yè)務邏輯的完整，流暢。在大并發(fā)高流量時，我們可以水平擴展前后端服務器，多臺服務器可以一起承擔巨大的訪問量，解決了高訪問高并發(fā)時服務器壓力大，容易服務器崩潰的現(xiàn)象。

3.4 增強項目業(yè)務的可擴展性和代碼的可維護性

當項目發(fā)展到一定程度時，項目的可維護性就會逐漸變差，可能會經常出現(xiàn)改一處而動全部的情況。當公司需要修改某個業(yè)務功能的時候，或者添加一項新的功能業(yè)務的時候，將會耗費巨大的人力與時間。這種情況下，高可擴展性的、低耦合的程序代碼就變得非常重要了。

前后端分離的開發(fā)模式，正是將前后端代碼進行解耦，使得項目可以使用模塊化的開發(fā)模式，前端代碼使用組件便可以進行代碼復用，后端代碼使用經典三層架構使得邏輯清晰。這樣一來，添加業(yè)務功能也變得方便?？蓴U展性大大提高。

發(fā)生bug，可以快速定位是誰的問題，不會出現(xiàn)互相踢皮球的現(xiàn)象。頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本問題，頁面樣式問題，全部由前端工程師負責。接口數據出錯，數據沒有提交成功，應答超時等問題，全部由后端工程師來解決。雙方互不干擾。

4 前后端分離開發(fā)模式具體實現(xiàn)

首先后端可以采用比較流行的微服務架構SpringBoot，它繼承了Spring優(yōu)秀的基因，并擁有著簡化開發(fā)，簡化配置、簡化部署等諸多優(yōu)勢。前端則可以采用典型的單頁應用框架Vue。二者相結合實現(xiàn)前后端分離架構。

4.1 技術簡介——SpringBoot

SpringBoot是一個基于Spring的全新框架，它的出現(xiàn)目的是用來簡化Spring項目的初始搭建和開發(fā)過程。以前在寫Spring的項目時，需要各種繁瑣的配置文件。以及之后Spring對其他框架的整合時各種的配置文件。以往我們使用SSM框架進行開發(fā)的時候，搭建項目和整合三大框架，我們需要做很多繁瑣的配置文件，比如配置web.xml，配置Spring，配置Mybatis，并將它們整合在一起等，Spring的開發(fā)模式越來越顯得笨重。在這種環(huán)境下，Spring Boot伴隨著Spring4一起出現(xiàn)了。

SpringBoot它化繁為簡的能力，讓開發(fā)變得極其簡單和快捷，所以在業(yè)界備受關注。SpringBoot在國內的關注趨勢也日漸超過Spring。

4.2 技術簡介——Vue.js

正如官網所說，Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。

Vue.js的出現(xiàn)使得開發(fā)人員可以用簡單的API實現(xiàn)響應的數據綁定和組合的視圖組件。但它自身不是一個全能框架——它只聚焦于視圖層。所以它的學習成本也相對較低。它的創(chuàng)造者也是一位中國人，所以Vue.js的使用文檔也非常親近于國人。Vue是MVVM模式的，使用Vue的話，不需要直接操作dom，效率更高。

4.3 前后端分離應用實例——基于Web應用的學生會管理系統(tǒng)

“學生會管理系統(tǒng)”主要解決的是目前高校中學生組織中管理難的問題，在校園學生會管理方面上仍存在著許多需要改進的地方。比如人員材料、活動記錄等信息無法完全存檔或存檔之麻煩，沒有科學的安排和規(guī)劃，使得學生干部都需要做一些重復和繁瑣的工作，導致工作無法創(chuàng)新發(fā)展，而這些繁瑣的工作耗費了巨大的人力和精力。

此系統(tǒng)實現(xiàn)了“學生會管理系統(tǒng)”中的財務管理，會議記錄，請假記錄月計劃總結，出勤管理，評優(yōu)管理，成員管理，會議管理，公告管理、工作安排管理、部門管理以及權限安全方面的管理。

“學生會管理系統(tǒng)”是基于Web，使用前后端分離的架構進行開發(fā)。以下作者將簡單介紹此系統(tǒng)的架構實現(xiàn)。

項目采用Vue+SpringBoot的技術實現(xiàn)前后端分離，之間進行跨域處理。前后端之間通過JSON格式的數據進行交互，前端控制頁面的跳轉，而后端則根據前端發(fā)來的請求響應數據，前端收到數據將其進行包裝，并對頁面相應的字段填充數據。前端部署在Nginx服務器，后端部署在Springboot內置Tomcat。分開部署，以減少服務器壓力。

5 結束語

前后端分離的開發(fā)模式是合理的，十分有必要的。這種模式下，大家各司其職，分工明確。前后端分離實現(xiàn)了并行開發(fā)，有效的提高了開發(fā)效率，降低了學習成本并提高了代碼質量，但任何的開發(fā)架構模式不可能適應所有的業(yè)務場景。前后端分離也例外，只是對于絕大部分的Web開發(fā)或移動App開發(fā)具有積極的影響。但如果開發(fā)人員專一于前端或者后端并不是全棧工程師，同時想具有高性能高并發(fā)，適合將前端與后端部署在不同的服務器上，建議使用前后端分離，但也不是絕對的，需結合真實業(yè)務場景進行選擇。

參考文獻：

[1]王松.SpringBoot+Vue全棧開發(fā)實戰(zhàn)[M].清華大學出版社，2019.

[2]遲殿委.前后端分離的Web架構解決方案[J].智慧工廠，2019（06）：37-38.

[3]杜艷美.黃曉芳.面向企業(yè)級web應用的前后端分離開發(fā)模式及實踐[J].西南科技大學學報（自然科學版），2018，33（002）：83-87.

[4]林嘉婷.試談前后端分離及基于前端MVC框架的開發(fā)[J].電腦編程技巧與維護，2016（23）：5-8.

[5]魏鋼.Web前后端分離模式下SpringMVC在高職JavaWeb教學中的研究[J].福建電腦，2019，035（002）：107-108.

[6]孟祥雙.前后端分離式Web應用開發(fā)研究[J].電子元器件與信息技術，2019，3（06）：40-43.