吳新華

Web開(kāi)發(fā)技術(shù)發(fā)展簡(jiǎn)析

吳新華

（萍鄉(xiāng)學(xué)院 信息與計(jì)算機(jī)工程學(xué)院，江西 萍鄉(xiāng) 337000）

通信和網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，基于B/S架構(gòu)的Web開(kāi)發(fā)已經(jīng)取代桌面開(kāi)發(fā)成為發(fā)展的主流， Web開(kāi)發(fā)技術(shù)發(fā)展的目的是減少前后端開(kāi)發(fā)人員的耦合，提高開(kāi)發(fā)效率。文章闡述了Web開(kāi)發(fā)技術(shù)的發(fā)展歷程，并分析了各個(gè)階段開(kāi)發(fā)技術(shù)的應(yīng)用場(chǎng)景以及優(yōu)劣勢(shì)，為應(yīng)用型本科高校的計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的教學(xué)提供了良好的課堂素材。

Web開(kāi)發(fā)；B/S架構(gòu)；前后端分離

1 背景

Web程序開(kāi)發(fā)總體需求就是Request和Response的過(guò)程，用戶(hù)在客戶(hù)端（瀏覽器）發(fā)送請(qǐng)求，服務(wù)器端接收到請(qǐng)求，首先根據(jù)請(qǐng)求頭中的Token 進(jìn)行用戶(hù)鑒權(quán)，然后分析需求，執(zhí)行數(shù)據(jù)庫(kù)的CRUD操作，將處理后的結(jié)果返回給客戶(hù)端展現(xiàn)給用戶(hù)[1]。最早的Web項(xiàng)目界面簡(jiǎn)陋，功能簡(jiǎn)單，沒(méi)有專(zhuān)門(mén)的前端美工人員，項(xiàng)目的前、后端都是由后端程序員負(fù)責(zé)[2]。后端程序員既要熟練掌握前端（Html、CSS、Javascript）知識(shí)，又要掌握后端（Java、C#、PHP）知識(shí)，還必須熟悉數(shù)據(jù)庫(kù)（SQL）知識(shí)，也就是我們常說(shuō)的全棧開(kāi)發(fā)人員。這種開(kāi)發(fā)模式對(duì)程序員的要求很高，不利于項(xiàng)目的分工協(xié)作和后期的升級(jí)維護(hù)。隨著時(shí)代的發(fā)展和技術(shù)的更新，許多Web項(xiàng)目開(kāi)發(fā)模式開(kāi)始把前后端的界限分得越來(lái)越清晰，前端工程師只負(fù)責(zé)前端開(kāi)發(fā)，后端工程師只負(fù)責(zé)后端開(kāi)發(fā)，前后端逐步分離[3]。

前端業(yè)務(wù)追求頁(yè)面流暢，版式精致，良好的用戶(hù)體驗(yàn)，前端程序員工作重點(diǎn)是網(wǎng)頁(yè)設(shè)計(jì)，包括最新的Html5、CSS3標(biāo)準(zhǔn)，JavaScript基礎(chǔ)，各種前端框架（Vue js，Node.js）；后端業(yè)務(wù)追求高并發(fā)、高存儲(chǔ)、高性能，數(shù)據(jù)安全，后端程序員工作重點(diǎn)為L(zhǎng)inux操作系統(tǒng)，軟件設(shè)計(jì)模式，JVM原理，SSH或SSM框架工作原理及源碼，網(wǎng)絡(luò)協(xié)議等。

2 靜態(tài)Html時(shí)代

靜態(tài)Html時(shí)代最早的Web開(kāi)發(fā)技術(shù)架構(gòu)，通常只要幾個(gè)人就可以完成一個(gè)小型項(xiàng)目的開(kāi)發(fā)，所有的業(yè)務(wù)邏輯全部放在服務(wù)器端，前端瀏覽器只負(fù)責(zé)頁(yè)面的顯示，用戶(hù)從客戶(hù)端瀏覽器發(fā)出請(qǐng)求，Web服務(wù)器建立連接，接收用戶(hù)請(qǐng)求，解析并生成靜態(tài)的Html頁(yè)面，再返回到客戶(hù)端。靜態(tài)Html架構(gòu)如圖1所示。

圖1 靜態(tài)Html架構(gòu)

靜態(tài)頁(yè)面模式的優(yōu)點(diǎn)是開(kāi)發(fā)快速敏捷，只要架設(shè)一個(gè)服務(wù)器，所有的開(kāi)發(fā)和調(diào)試都能在本地完成。靜態(tài)網(wǎng)頁(yè)不需要連接后臺(tái)數(shù)據(jù)庫(kù)，因此響應(yīng)速度很快，適合于做內(nèi)容相對(duì)固定的網(wǎng)頁(yè)，例如：旅游風(fēng)景區(qū)介紹、學(xué)校的發(fā)展歷史，人員簡(jiǎn)介等等，且很容易被谷歌、百度等搜索引擎檢索。但如果項(xiàng)目很龐大，業(yè)務(wù)邏輯復(fù)雜，需要更多的開(kāi)發(fā)人員時(shí)，就會(huì)遇到以下各種問(wèn)題：

（1）業(yè)務(wù)邏輯較多時(shí)，代碼之間的調(diào)用關(guān)系變得復(fù)雜，需要更多的時(shí)間去調(diào)試和測(cè)試，開(kāi)發(fā)人員可以搭建集中服務(wù)器的開(kāi)發(fā)環(huán)境來(lái)解決這些問(wèn)題，這種開(kāi)發(fā)方式對(duì)于后端程序員沒(méi)有影響，但對(duì)前端開(kāi)發(fā)將會(huì)變得不友好，如果前端頁(yè)面想改變一種界面顏色或字幕樣式，要經(jīng)歷本地開(kāi)發(fā)、上傳代碼到服務(wù)器、頁(yè)數(shù)生成等幾個(gè)煩瑣步驟，如此周而復(fù)始，無(wú)形中延長(zhǎng)了開(kāi)發(fā)周期，降低了開(kāi)發(fā)效率。

（2）靜態(tài)網(wǎng)頁(yè)無(wú)法連接數(shù)據(jù)庫(kù)，靜態(tài)頁(yè)面的數(shù)據(jù)是固定的，如果業(yè)務(wù)數(shù)據(jù)要更新，只能通過(guò)程序員手動(dòng)逐一更改單個(gè)頁(yè)面的方式，在互聯(lián)網(wǎng)初期，數(shù)據(jù)量較少，這種方式尚可以接受，但對(duì)于現(xiàn)在的互聯(lián)網(wǎng)體系，數(shù)據(jù)量呈幾何級(jí)的增長(zhǎng)，例如淘寶、京東等商城系統(tǒng)，每天都有海量的數(shù)據(jù)更新，如果仍然以靜態(tài)網(wǎng)頁(yè)技術(shù)去解決，就會(huì)浪費(fèi)極大的人力和物力，團(tuán)隊(duì)協(xié)作將會(huì)變得無(wú)比復(fù)雜，系統(tǒng)調(diào)試、測(cè)試、后期維護(hù)等也將無(wú)法實(shí)現(xiàn)。

為了解決以上問(wèn)題，Web開(kāi)發(fā)技術(shù)開(kāi)啟了第二階段的征程。

3 Servlet時(shí)代

圖2 經(jīng)典MVC架構(gòu)

經(jīng)典MVC體系架構(gòu)的工作流程如下所示：

首先用戶(hù)從瀏覽器發(fā)出請(qǐng)求，控制器（Servlet）接收用戶(hù)請(qǐng)求，經(jīng)過(guò)用戶(hù)鑒權(quán)，業(yè)務(wù)處理，然后響應(yīng)給適當(dāng)?shù)腏SP頁(yè)面；接著Servlet根據(jù)需求執(zhí)行數(shù)據(jù)庫(kù)的增刪改查操作，將結(jié)果數(shù)據(jù)生成特定對(duì)象；最后視圖端調(diào)用方法得到對(duì)象中的數(shù)據(jù)，采用相應(yīng)的模板引擎，完成視圖渲染。

代碼編寫(xiě)測(cè)試完成后，將項(xiàng)目前后端代碼（包括JS、CSS資源文件、第三方庫(kù)等）打成一個(gè)War包，接下來(lái)步驟是將這個(gè)War包部署到Web容器中，然后啟動(dòng)向外提供服務(wù)。用戶(hù)在瀏覽器中輸入項(xiàng)目網(wǎng)站域名，瀏覽器通過(guò)域名服務(wù)器解析服務(wù)器外網(wǎng)IP地址，將Http請(qǐng)求發(fā)送到服務(wù)器，經(jīng)過(guò)三次握手成功之后，服務(wù)器開(kāi)始接收參數(shù)，執(zhí)行業(yè)務(wù)需求，通過(guò)Tcp協(xié)議開(kāi)始傳輸數(shù)據(jù)，之后返回應(yīng)答給瀏覽器，瀏覽器解析并返回給用戶(hù)。

現(xiàn)在來(lái)分析上述流程，假設(shè)項(xiàng)目網(wǎng)站首頁(yè)中有50張圖片，從用戶(hù)視角來(lái)看，就是一次Http請(qǐng)求，但代碼內(nèi)部執(zhí)行其實(shí)并不是一次，因?yàn)橛脩?hù)在第一次訪問(wèn)的時(shí)候，本地瀏覽器中還沒(méi)有緩存，下載50張圖片，意味著瀏覽器要發(fā)出50次Http請(qǐng)求，服務(wù)器每次接收到請(qǐng)求，都需要耗費(fèi)內(nèi)存完成傳輸，這時(shí)服務(wù)器承載的壓力會(huì)非常大，因?yàn)轫?yè)面中的所有請(qǐng)求都是由這臺(tái)服務(wù)器承載。如果業(yè)務(wù)量井噴，一萬(wàn)人并發(fā)訪問(wèn)網(wǎng)站，那對(duì)服務(wù)器的硬盤(pán)、內(nèi)存、網(wǎng)絡(luò)帶寬、IO接口等都是非常大的考驗(yàn)，稍有不慎，就會(huì)導(dǎo)致系統(tǒng)的崩盤(pán)。

4 SPA時(shí)代

移動(dòng)互聯(lián)端硬件沒(méi)有PC端豐富，傳統(tǒng)的MPA（多頁(yè)應(yīng)用）由多個(gè)獨(dú)立頁(yè)面組成，頁(yè)面間切換緩慢，需要耗費(fèi)更多的資源，在移動(dòng)互聯(lián)端不能流暢地運(yùn)行，導(dǎo)致用戶(hù)體驗(yàn)性較差，多頁(yè)應(yīng)用如圖3所示。

圖3 多頁(yè)應(yīng)用

Single Page Application（單頁(yè)應(yīng)用）由一個(gè)外殼頁(yè)面和多個(gè)頁(yè)面片段組成，在首次加載完外殼頁(yè)面后，后續(xù)多個(gè)頁(yè)面間的跳轉(zhuǎn)和切換只是頁(yè)面片段的隱藏或刪除，不需要整個(gè)頁(yè)面的切換，只是局部刷新，減輕了服務(wù)器的負(fù)擔(dān)，程序運(yùn)行非常流暢，因此SPA開(kāi)發(fā)技術(shù)在移動(dòng)互聯(lián)端的應(yīng)用越來(lái)越廣泛，單頁(yè)應(yīng)用如圖4所示。

圖4 單頁(yè)應(yīng)用

SPA單頁(yè)應(yīng)用提供給Web端或本地端的都是Json數(shù)據(jù)格式的應(yīng)用程序接口，其工作流程如下所示：

首先啟動(dòng)前端應(yīng)用，加載Html頁(yè)面、音視頻、圖片、JavaScript、CSS等基本公共資源；接著Web瀏覽器或Native端發(fā)出異步（Ajax）請(qǐng)求，后端處理請(qǐng)求，返回Json格式的數(shù)據(jù)，后端并不參與前端視圖的渲染，因此處理速度極快；最后前端將返回Json數(shù)據(jù)插入相應(yīng)邏輯模板中完成DOM數(shù)據(jù)格式的頁(yè)面渲染。

產(chǎn)品類(lèi)別進(jìn)一步劃分為：機(jī)電產(chǎn)品（較輕）、機(jī)電產(chǎn)品（較重）、輕工產(chǎn)品（較輕）、輕工產(chǎn)品（較重）、農(nóng)林牧漁和其他產(chǎn)品。美方現(xiàn)已正式公布的500億美元征稅商品清單，涵蓋了1 102個(gè)稅號(hào)的產(chǎn)品，此外，在4月份提出考慮在301條款下追加1 000億美元征稅商品，將涉及更大范圍的產(chǎn)品。我國(guó)出口美國(guó)第一位的機(jī)電產(chǎn)品（輕、重）將受到重大沖擊。其中，機(jī)電較輕類(lèi)涉及貿(mào)易金額970億美元，機(jī)電較重類(lèi)涉及370億美元，占征稅商品1 500億美元的89%；占2017年我國(guó)對(duì)美出口機(jī)電產(chǎn)品（輕、重）的69%。

單頁(yè)應(yīng)用開(kāi)發(fā)模式的優(yōu)點(diǎn)：（1）良好的用戶(hù)體驗(yàn)，應(yīng)用程序運(yùn)行流暢，頁(yè)面動(dòng)態(tài)數(shù)據(jù)都是通過(guò)Ajax異步獲取，頁(yè)面只需局部刷新，不需要整個(gè)頁(yè)面的切換，后端服務(wù)器響應(yīng)迅速；（2）良好的應(yīng)用移植性，后端API接口標(biāo)準(zhǔn)化，可以無(wú)縫連接移動(dòng)手機(jī)端、平面電腦、Web端，一套后端對(duì)應(yīng)多個(gè)前端，增強(qiáng)了代碼的復(fù)用性；（3）良好的分工協(xié)作模式，前后端代碼分離，并行開(kāi)發(fā)，出現(xiàn)Bug可迅速定位，及時(shí)清除。

單頁(yè)應(yīng)用開(kāi)發(fā)模式的缺點(diǎn)：（1）Web網(wǎng)站首次要加載大量靜態(tài)基礎(chǔ)資源，服務(wù)器和客戶(hù)機(jī)硬件資源消耗嚴(yán)重，會(huì)出現(xiàn)載入卡頓，雖然也有懶加載、服務(wù)器渲染等相關(guān)解決機(jī)制，但也不能完全避免；（2）如果應(yīng)用程序業(yè)務(wù)復(fù)雜，對(duì)前端程序員的要求較高，前端JS的代碼量將非常龐大，需要多次向服務(wù)器端發(fā)送Http請(qǐng)求，造成頁(yè)面渲染緩慢；（3）容易出現(xiàn)SEO問(wèn)題，難以被谷歌、百度等搜索引擎收錄[4]。

5 Node.js時(shí)代

5.1 Node.js運(yùn)行機(jī)制

經(jīng)典MVC架構(gòu)在同步處理的業(yè)務(wù)場(chǎng)合效率較高，但卻不擅長(zhǎng)異步處理。單頁(yè)應(yīng)用SPA在一定程度上實(shí)現(xiàn)了前后端分離，但只適合移動(dòng)端應(yīng)用程序開(kāi)發(fā)，對(duì)Web情景下同步處理顯得有心無(wú)力，而且也存在上一節(jié)所述的各種缺點(diǎn)。為了解決這些問(wèn)題，Node.js開(kāi)始應(yīng)運(yùn)而生。

為了實(shí)現(xiàn)服務(wù)器的高效運(yùn)轉(zhuǎn)，Node.js引進(jìn)了非阻塞機(jī)制，非阻塞和Ajax的異步請(qǐng)求有異曲同工之妙，非阻塞機(jī)制下服務(wù)器接收到處理請(qǐng)求時(shí)會(huì)拋給一個(gè)底層子進(jìn)程，主進(jìn)程不需要同步等待處理結(jié)果，服務(wù)器主進(jìn)程會(huì)一直循環(huán)，當(dāng)?shù)讓幼舆M(jìn)程處理完請(qǐng)求，再通過(guò)回調(diào)函數(shù)將結(jié)果發(fā)送給服務(wù)器主進(jìn)程。Node.js與傳統(tǒng)架構(gòu)不同的是前端不僅僅只負(fù)責(zé)視圖（View）層，而且把本屬于后端控制層（Controller）也接管過(guò)來(lái)，這時(shí)后端就只專(zhuān)注于數(shù)據(jù)Model層和業(yè)務(wù)邏輯處理，Node.js的運(yùn)行機(jī)制如圖5所示。

圖5 Node.js運(yùn)行機(jī)制

從圖5可以清晰看到Node.js是處于中間層的位置，前端應(yīng)用不再直接發(fā)送Ajax異步請(qǐng)求給后端，而是先發(fā)送到Node.js，Node.js再發(fā)送Http請(qǐng)求到后端，后端返回?zé)o差別的Json數(shù)據(jù)，Node.js接收到數(shù)據(jù)后再渲染出前端視圖呈現(xiàn)給用戶(hù)。增加Node.js作為中間層，具體有以下優(yōu)點(diǎn)。

（1）增強(qiáng)可移植性；增加Node.js中間層，可以由Node.js維護(hù)各自controller層，如果前端需求發(fā)生改變，則無(wú)需再和后端溝通，自己就可以專(zhuān)職維護(hù)，前端專(zhuān)注視圖效果，后端專(zhuān)注于業(yè)務(wù)邏輯，前后端分工協(xié)作、各司其職。

（2）提高反應(yīng)速度：因?yàn)榍昂蠖藢儆诓煌恼Z(yǔ)言系統(tǒng)，數(shù)據(jù)格式和數(shù)據(jù)處理存在差異，當(dāng)后端返回給前端的數(shù)據(jù)量大的時(shí)候，相應(yīng)的處理時(shí)間就會(huì)明顯增長(zhǎng)，前端界面會(huì)有明顯的滯后效應(yīng)，這時(shí)候，采用Node.js分擔(dān)前端數(shù)據(jù)處理邏輯，可以加快前端數(shù)據(jù)處理速度，增加系統(tǒng)的靈活度和響應(yīng)度。

（3）增強(qiáng)系統(tǒng)性能：有時(shí)會(huì)有一種業(yè)務(wù)情景，前端請(qǐng)求一個(gè)頁(yè)面，可能需要調(diào)用多個(gè)后端接口才能得到這個(gè)Json數(shù)據(jù)，業(yè)務(wù)越復(fù)雜，處理速度就會(huì)越慢，特別是在移動(dòng)互聯(lián)端時(shí)，硬件資源較為貧乏，性能就會(huì)越受影響，采用Node.js作為中間層，采集好后端發(fā)送的多個(gè)數(shù)據(jù)，組裝成對(duì)象或集合再統(tǒng)一發(fā)送給前端，系統(tǒng)性能將得到成倍提升。

5.2 Node.js案例

使用 Node.js 實(shí)現(xiàn)簡(jiǎn)易登錄與注冊(cè)案例的代碼如下所示：

創(chuàng)建服務(wù)代碼如下所示：

寫(xiě)完后啟動(dòng)Http.js，要執(zhí)行的文件每次有更新都要重新用Node執(zhí)行一次，在瀏覽器中輸入Localhost: 3000/index會(huì)看到Index.Html頁(yè)面，如圖6所示。

圖6 登錄注冊(cè)首頁(yè)

6 總結(jié)

從古老的Html靜態(tài)網(wǎng)頁(yè)開(kāi)始，到經(jīng)典的JSP+Servlet+JavaBean的MVC體系框架，再到SSH（Spring + Struts + Hibernate）和SSM（Spring + SpringMVC + Mybatis）的Java體系框架，然后是前端框架（AngularJS、VueJS、ReactJS）為主的SPA、MVP時(shí)代，目前最新的是Node.js引領(lǐng)的前后端分離的全棧時(shí)代，Web開(kāi)發(fā)技術(shù)和編程架構(gòu)的發(fā)展從未停止，一直緊跟時(shí)代的步伐[5]。Ajax（SPA）應(yīng)用給前端開(kāi)發(fā)帶來(lái)了一次質(zhì)的飛躍，Node.js 是第二次飛躍，未來(lái)編程模式的發(fā)展，前后端的職責(zé)會(huì)越來(lái)越清晰，開(kāi)發(fā)效率會(huì)更高效。

[1] 李燕安. 基于Java的Web開(kāi)發(fā)技術(shù)的探討[J]. 中國(guó)新通信, 2020, 22(8): 73–73．

[2] 李廣宏. Web平臺(tái)前端開(kāi)發(fā)設(shè)計(jì)[J]. 計(jì)算機(jī)與網(wǎng)絡(luò), 2020, 46(15): 32–32.

[3] 何晶. 以SSH框架與jQuery技術(shù)為基礎(chǔ)的Java-Web開(kāi)發(fā)應(yīng)用探討[J]. 計(jì)算機(jī)產(chǎn)品與流通, 2019(11): 104–105.

[4] 劉彤彤. 單頁(yè)面應(yīng)用程序(SPA)的優(yōu)缺點(diǎn)[EB/OL]. (2019-07-09) [2022-01-11]. https://www.cnblogs.com/belongs-to-qinghua/p/11151054.html.

[5] 阿里云開(kāi)發(fā)者. Web開(kāi)發(fā)的歷史發(fā)展技術(shù)演變 [EB/OL]. (2020-08-24)[2022-01-15]. https://blog.csdn.net/alitech2017/ article/details/108200495.

Analysis on the Development of Web Developing Technology

WU Xin-hua

(School of Information and Computer Engineering, Pingxiang University, Pingxiang Jiangxi 337000, China)

With the rapid development of communication and network technology, web development based on B/S architecture has replaced desktop development as the mainstream of development. The purpose of the development of web development technology is to reduce the coupling of front- and rear-end developers and increase development efficiency. This paper systematically expounds the development process of web developing technology, and analyzes the application scenarios, advantages and disadvantages of developing technology in each stage, which provides good teaching resources for computer-related majors in application-oriented undergraduate colleges and universities.

web development; B/S architecture; front- and rear- end separation

2022-04-14

江西省高等學(xué)校教學(xué)改革研究課題（JXJG-21-22-5）

吳新華（1975—），男，江西萍鄉(xiāng)人，講師，碩士，研究方向：計(jì)算機(jī)應(yīng)用技術(shù)。

TP311

A

2095-9249（2022）03-0069-04

〔責(zé)任編校：陳楠楠〕