Web頁面開發模式演變歷史研究

劉敏娜 黃素萍 李延香

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

關鍵詞：Web;前端;后端;MVC

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

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

1 早期階段

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

2 后端為主的階段

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

這個階段的動態開發語言有CGI、ASP、PHP、JSP等。主要使用的服務器有Apache，Tomcat。數據庫管理軟件有MySQL、SQLServer和Oracle等。

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

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

3 后端的MVC階段

伴隨著動態頁面的邏輯越來越復雜，為了很好的與前端頁面交互，更好的與數據庫進行交互，更好的表示數據對象，第3個階段為服務器架構作了升級，有學者提出了MVC設計模式，即控制層、視圖層、模型層?？刂茖迂撠熅唧w的業務邏輯操作，根據視圖的請求對數據做處理，將結果保存在模型中，同時讓模型和視圖進行交互;視圖層向控制器提交所需數據，同時顯示模型中的數據;模型層用來存儲數據的對象。

JSP技術中的MVC模型的實現如下：

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

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

控制層：是Servlet對象，根據視圖提交的數據請求進行數據操作，將結果存儲到模型層，然后通過轉發方式將數據在頁面顯示。

4 后端基于J2EE的框架技術

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

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

SSM技術介紹：

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

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

MyBatis是當前主流的Java持久層框架之一，它具有性能優越，高度的靈活性，可優化性和易于維護等特性，在企業級開發中使用廣泛。MyBatis消除了JDBC代碼和參數的手動設置，使用簡單的XML或注解進行配置和原始映射，將接口和java的POJO映射程數據庫中的記錄，使開發人員通過面向對象編程思想操作數據庫[6]。

SSM框架執行流程，頁面發送請求給控制器，控制器調用業務層處理邏輯，邏輯層向持久層發送請求，持久層與數據庫交互，后將結果返回給業務層，業務層將處理邏輯發送給控制器，控制器再調用視圖展現數據。

5 前端的SPA時代

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

6 前端的MVC交互時代

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

前端技術的發展伴隨著瀏覽器的結構而變化，前端開發模式經歷了靜態網頁，服務器組裝，后端MVC等階段。發展的原始推動力是效率和性能。在不遠的未來，將有更多的優化技術出現。

參考文獻

[1] 劉巖.技術升級與傳媒變革：從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應用中的使用MVC模式[J].電子測試，2019（12）：73-74.

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

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

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

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