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

劉敏娜 黃素萍 李延香

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

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

中圖分類號：TP311.52 文獻標(biāo)識碼：A 文章編號：1007-9416（2019）10-0117-02

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

1 早期階段

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

2 后端為主的階段

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

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

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

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

3 后端的MVC階段

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

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

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

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

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

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

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

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

SSM技術(shù)介紹：

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

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

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

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

5 前端的SPA時代

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

6 前端的MVC交互時代

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

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

參考文獻

[1] 劉巖.技術(shù)升級與傳媒變革：從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].電子測試，2019（12）：73-74.

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

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

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

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