Web頁(yè)面開(kāi)發(fā)模式演變歷史研究

劉敏娜 黃素萍 李延香

摘要：隨著瀏覽器應(yīng)用復(fù)雜度的提高，前端技術(shù)在不斷的演進(jìn)。經(jīng)歷了靜態(tài)網(wǎng)頁(yè)、后端動(dòng)態(tài)程序、后端MVC、后端基于J2EE框架、前端的SPA時(shí)代和前端MVC設(shè)計(jì)方法。本文探索了這些設(shè)計(jì)方法的優(yōu)缺點(diǎn)，闡述了推進(jìn)技術(shù)變革的主要因素是效率和性能，相信隨著瀏覽器的發(fā)展，會(huì)有更多更新的前端開(kāi)發(fā)技術(shù)出現(xiàn)。

關(guān)鍵詞：Web;前端;后端;MVC

中圖分類(lèi)號(hào)：TP311.52 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2019）10-0117-02

前端開(kāi)發(fā)技術(shù)經(jīng)歷了從前后端不分離的早期階段，后端為主的MVC階段，SPA時(shí)代和前端為主的MVC時(shí)代。這四種階段分別分析如下：

1 早期階段

在互聯(lián)網(wǎng)中采用的是B/S工作模式，工作過(guò)程是用戶(hù)使用瀏覽器向服務(wù)器發(fā)起網(wǎng)絡(luò)請(qǐng)求，服務(wù)器動(dòng)態(tài)響應(yīng)請(qǐng)求，此時(shí)會(huì)為客戶(hù)端啟動(dòng)一個(gè)新的線(xiàn)程，通過(guò)線(xiàn)程訪(fǎng)問(wèn)靜態(tài)web頁(yè)面，同時(shí)將請(qǐng)求信息借助網(wǎng)絡(luò)發(fā)送給用戶(hù)端的瀏覽器，工作流程如圖1[1]。在網(wǎng)絡(luò)早期，隨著超本文http技術(shù)的出現(xiàn)，網(wǎng)絡(luò)上傳輸?shù)氖庆o態(tài)的文本信息，這些文本數(shù)據(jù)通過(guò)超級(jí)鏈接技術(shù)相關(guān)聯(lián)，實(shí)現(xiàn)了信息的共享[2]。這個(gè)時(shí)期被稱(chēng)為Web1.0，這個(gè)階段用戶(hù)是被動(dòng)瀏覽信息，被動(dòng)接受頁(yè)面數(shù)據(jù)。頁(yè)面數(shù)據(jù)以靜態(tài)HTML形式展示，數(shù)據(jù)沒(méi)有專(zhuān)用錄入接口，網(wǎng)頁(yè)更新不及時(shí)。

2 后端為主的階段

隨著網(wǎng)絡(luò)上的數(shù)據(jù)量的增加，數(shù)據(jù)的管理是一個(gè)不能忽略的問(wèn)題。而web1.0階段將數(shù)據(jù)靜態(tài)綁定在HTML文檔中不利于數(shù)據(jù)的保存和維護(hù)操作。因此提出將數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中，通過(guò)動(dòng)態(tài)開(kāi)發(fā)技術(shù)把讀取的數(shù)據(jù)顯示在頁(yè)面上[3]。這個(gè)階段給用戶(hù)返回的頁(yè)面是動(dòng)態(tài)拼湊而成的，不同的訪(fǎng)問(wèn)者，在不同的時(shí)間，處于不同的地點(diǎn)返回的頁(yè)面內(nèi)容可以不同。實(shí)現(xiàn)了數(shù)據(jù)和網(wǎng)頁(yè)之間的分離。

這個(gè)階段的動(dòng)態(tài)開(kāi)發(fā)語(yǔ)言有CGI、ASP、PHP、JSP等。主要使用的服務(wù)器有Apache，Tomcat。數(shù)據(jù)庫(kù)管理軟件有MySQL、SQLServer和Oracle等。

后端為主的web工作流程如圖2所示?？蛻?hù)端發(fā)起網(wǎng)絡(luò)請(qǐng)求，網(wǎng)絡(luò)中啟動(dòng)一個(gè)新的線(xiàn)程向web服務(wù)器請(qǐng)求服務(wù)，服務(wù)器讀取指定程序并加載程序，讀取指定數(shù)據(jù)庫(kù)中數(shù)據(jù)，通過(guò)動(dòng)態(tài)拼湊形式生成頁(yè)面，將頁(yè)面返回給客戶(hù)端瀏覽器[4]。

這個(gè)階段的web數(shù)據(jù)能較好的保存下來(lái)，并且可以單獨(dú)管理數(shù)據(jù)，數(shù)據(jù)改變之后用戶(hù)看到的頁(yè)面內(nèi)容動(dòng)態(tài)發(fā)生變化。但是美中不足的是，所有的業(yè)務(wù)邏輯，數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)邏輯都定義在動(dòng)態(tài)頁(yè)面中，造成頁(yè)面內(nèi)容復(fù)雜，維護(hù)不方便。

3 后端的MVC階段

伴隨著動(dòng)態(tài)頁(yè)面的邏輯越來(lái)越復(fù)雜，為了很好的與前端頁(yè)面交互，更好的與數(shù)據(jù)庫(kù)進(jìn)行交互，更好的表示數(shù)據(jù)對(duì)象，第3個(gè)階段為服務(wù)器架構(gòu)作了升級(jí)，有學(xué)者提出了MVC設(shè)計(jì)模式，即控制層、視圖層、模型層?？刂茖迂?fù)責(zé)具體的業(yè)務(wù)邏輯操作，根據(jù)視圖的請(qǐng)求對(duì)數(shù)據(jù)做處理，將結(jié)果保存在模型中，同時(shí)讓模型和視圖進(jìn)行交互;視圖層向控制器提交所需數(shù)據(jù)，同時(shí)顯示模型中的數(shù)據(jù);模型層用來(lái)存儲(chǔ)數(shù)據(jù)的對(duì)象。

JSP技術(shù)中的MVC模型的實(shí)現(xiàn)如下：

模型層：是定義的一個(gè)或多個(gè)JavaBean對(duì)象，可以存儲(chǔ)數(shù)據(jù)。在JavaBean中定義了setter和getter方法，用來(lái)映射數(shù)據(jù)。

視圖層：是一個(gè)或多個(gè)JSP文件，作用是向控制器提交數(shù)據(jù)和顯示數(shù)據(jù)。

控制層：是Servlet對(duì)象，根據(jù)視圖提交的數(shù)據(jù)請(qǐng)求進(jìn)行數(shù)據(jù)操作，將結(jié)果存儲(chǔ)到模型層，然后通過(guò)轉(zhuǎn)發(fā)方式將數(shù)據(jù)在頁(yè)面顯示。

4 后端基于J2EE的框架技術(shù)

JavaEE是Java的企業(yè)級(jí)應(yīng)用，它的技術(shù)基礎(chǔ)是Java SE，JavaEE平臺(tái)已經(jīng)成為使用最廣泛的Web程序設(shè)計(jì)技術(shù)，目的是能夠使企業(yè)開(kāi)發(fā)者大幅縮短投放市場(chǎng)時(shí)間。常見(jiàn)的JavaEE框架有SSM（Struts2+Spring+MyBatis）技術(shù)和SSH（Struts2+Spring+ Hibernate）技術(shù)。

SSM技術(shù)和SSH技術(shù)都是以Spring框架為核心，區(qū)別在于MVC的實(shí)現(xiàn)方式不同和ORM持久化不同。SSM注重注解式開(kāi)發(fā)，ORM實(shí)現(xiàn)更加簡(jiǎn)單靈活。SSH注重配置開(kāi)發(fā)，通過(guò)Hibernate對(duì)數(shù)據(jù)的增刪改查操作更加自動(dòng)化[5]。

SSM技術(shù)介紹：

Spring是輕量級(jí)的開(kāi)源框架，以IoC和AOP為核心，使用基本的JavaBean完成EJB完成的工作。Spring在表現(xiàn)層提供了Spring MVC的功能，在業(yè)務(wù)邏輯層可以管理事務(wù)、記錄日志，在持久層可以整合MyBatis等技術(shù)。

SpringMVC是Spring提供的實(shí)現(xiàn)了Web MVC設(shè)計(jì)模式的輕量級(jí)web框架。和Struts2一樣，都屬于MVC框架。使用SpringMVC可以自動(dòng)綁定用戶(hù)輸入，并能正確的轉(zhuǎn)換數(shù)據(jù)類(lèi)型，支持多種視圖技術(shù)，同時(shí)使用基于XML的配置文件，具有很大的靈活性，很容易與其它框架集成。

MyBatis是當(dāng)前主流的Java持久層框架之一，它具有性能優(yōu)越，高度的靈活性，可優(yōu)化性和易于維護(hù)等特性，在企業(yè)級(jí)開(kāi)發(fā)中使用廣泛。MyBatis消除了JDBC代碼和參數(shù)的手動(dòng)設(shè)置，使用簡(jiǎn)單的XML或注解進(jìn)行配置和原始映射，將接口和java的POJO映射程數(shù)據(jù)庫(kù)中的記錄，使開(kāi)發(fā)人員通過(guò)面向?qū)ο缶幊趟枷氩僮鲾?shù)據(jù)庫(kù)[6]。

SSM框架執(zhí)行流程，頁(yè)面發(fā)送請(qǐng)求給控制器，控制器調(diào)用業(yè)務(wù)層處理邏輯，邏輯層向持久層發(fā)送請(qǐng)求，持久層與數(shù)據(jù)庫(kù)交互，后將結(jié)果返回給業(yè)務(wù)層，業(yè)務(wù)層將處理邏輯發(fā)送給控制器，控制器再調(diào)用視圖展現(xiàn)數(shù)據(jù)。

5 前端的SPA時(shí)代

靜態(tài)資源存儲(chǔ)，SPA Single page application單頁(yè)面應(yīng)用。SPA是一種特殊的Web應(yīng)用，加載單個(gè)HTML頁(yè)面并在用戶(hù)與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的。它將所有的活動(dòng)局限于一個(gè)Web頁(yè)面中，僅在該Web頁(yè)面初始化時(shí)加載相應(yīng)的HTML、JavaScript、CSS[7]。一旦頁(yè)面加載完成，SPA不會(huì)因?yàn)橛脩?hù)的操作而進(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)，而是利用JavaScript動(dòng)態(tài)的變換div切換顯示和隱藏狀態(tài)，從而實(shí)現(xiàn)UI與用戶(hù)的交互。在SPA應(yīng)用中，應(yīng)用加載之后就不會(huì)再有整頁(yè)刷新。相反，展示邏輯預(yù)先加載，并依賴(lài)于內(nèi)容Region中的視圖切換來(lái)展示內(nèi)容。

6 前端的MVC交互時(shí)代

前端MVC（Model-View-Controller）將DOM交互內(nèi)容表示為數(shù)據(jù)模型、視圖和事件控制三部分。Model可以表示數(shù)據(jù)對(duì)象和存放請(qǐng)求的數(shù)據(jù)結(jié)果，View用來(lái)進(jìn)行頁(yè)面更新和修改，Controller用來(lái)根據(jù)前端路由條件調(diào)用不同的Model給View渲染不同的數(shù)據(jù)。MVC模式組件結(jié)構(gòu)如圖3所示。

前端技術(shù)的發(fā)展伴隨著瀏覽器的結(jié)構(gòu)而變化，前端開(kāi)發(fā)模式經(jīng)歷了靜態(tài)網(wǎng)頁(yè)，服務(wù)器組裝，后端MVC等階段。發(fā)展的原始推動(dòng)力是效率和性能。在不遠(yuǎn)的未來(lái)，將有更多的優(yōu)化技術(shù)出現(xiàn)。

參考文獻(xiàn)

[1] 劉巖.技術(shù)升級(jí)與傳媒變革：從Web1.0到Web3.0之路[J].電視工程，2019（01）：44-47.

[2] Nath，K.，Dhar，S.Basishtha，S.Web 1.0 to Web 3.0-Evolution of the Web and its various challenges[C].Optimization Reliabilty，and Information Technology （ICROIT），2014.

[3] 蔡曉慶，陳燕平.在基于Ajax的Web應(yīng)用中的使用MVC模式[J].電子測(cè)試，2019（12）：73-74.

[4] 彭兵.淺談MVC設(shè)計(jì)模式在JSP程序中的應(yīng)用[J].信息與電腦（理論版），2019（11）：104-105.

[5] 曾艷麗，李諾.針對(duì)SSM框架Web系統(tǒng)的相關(guān)思考[J].信息與電腦（理論版），2019（03）：116-117.

[6] 王艷清，陳紅.基于SSM框架的智能Web系統(tǒng)研發(fā)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2019（05）：4751.

[7] 方敏，趙峰.單頁(yè)面技術(shù)在試驗(yàn)數(shù)據(jù)管理系統(tǒng)中的研究與應(yīng)用[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2019，28（4）：111-118.