孫思杰

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

關(guān)鍵詞：Web;前后端分離模式;SpringBoot，Vue.js

中圖分類號：TP393? ? ? ? ?文獻(xiàn)標(biāo)志碼：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)網(wǎng)上成為了一種通用性的交流語言，不論是在瀏覽器中可以看到的各種各樣的網(wǎng)頁也好還是手機(jī)App的后端也好，都是基于著Web技術(shù)進(jìn)行構(gòu)建、建設(shè)。在Web開發(fā)中，各式各樣的技術(shù)棧成群出現(xiàn)，我們也習(xí)慣的將他們大致的分為前端技術(shù)、后端技術(shù)。

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

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

2 什么是前后端分離

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

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

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

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

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

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

3.2 團(tuán)隊(duì)開發(fā)的高效性

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

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

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

3.4 增強(qiáng)項(xiàng)目業(yè)務(wù)的可擴(kuò)展性和代碼的可維護(hù)性

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

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

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

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

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

4.1 技術(shù)簡介——SpringBoot

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

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

4.2 技術(shù)簡介——Vue.js

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

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

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

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

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

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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