孫思杰

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

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

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

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

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

2 什么是前后端分離

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

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

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

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

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

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

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

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

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

分別部署服務(wù)器，前端項(xiàng)目一個(gè)服務(wù)器，后端項(xiàng)目一個(gè)服務(wù)器，這樣會(huì)大大提升頁(yè)面的流暢度，提高用戶體驗(yàn)度。隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，更多的人在網(wǎng)頁(yè)上尋找他們所需的信息，而這則會(huì)加大后端服務(wù)器壓力，為了使用戶有更好的體驗(yàn)，我們更關(guān)心的則是業(yè)務(wù)邏輯的完整，流暢。在大并發(fā)高流量時(shí)，我們可以水平擴(kuò)展前后端服務(wù)器，多臺(tái)服務(wù)器可以一起承擔(dān)巨大的訪問(wèn)量，解決了高訪問(wè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ù)性就會(huì)逐漸變差，可能會(huì)經(jīng)常出現(xiàn)改一處而動(dòng)全部的情況。當(dāng)公司需要修改某個(gè)業(yè)務(wù)功能的時(shí)候，或者添加一項(xiàng)新的功能業(yè)務(wù)的時(shí)候，將會(huì)耗費(fèi)巨大的人力與時(shí)間。這種情況下，高可擴(kuò)展性的、低耦合的程序代碼就變得非常重要了。

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

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

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

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

4.1 技術(shù)簡(jiǎn)介——SpringBoot

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

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

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

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

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

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

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

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

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

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