方生

摘要：隨著“JavaScript”技術的快速發(fā)展和瀏覽器功能的增強，為了追求更好的用戶體驗和開發(fā)模式，“Web”系統(tǒng)的開發(fā)過程已經(jīng)從過去的后端分層模式發(fā)展到今天的前端分層模式，其開發(fā)模式發(fā)生了質的變化。該文闡述了“Web”系統(tǒng)開發(fā)模式的發(fā)展過程，介紹了基于“MVVM”模式的前端框架“Vue.js”技術，并以“Web”前端的“主頁”模塊為例，說明了基于“MVVM”模式的“Web”前端的具體實現(xiàn)。

關鍵詞：MVVM;Web;前端;Vue.js

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）20-0147-03

1 背景

隨著“Internet”的發(fā)展，作為信息傳遞載體的“Web”系統(tǒng)頁面的內容、組織結構、表現(xiàn)形式和交互方式都沒有發(fā)生太大的變化。改變較大的是“Web”系統(tǒng)的開發(fā)模式和主流技術。目前，“Web”系統(tǒng)開發(fā)的主要模式有“MVC”模式和“MVVM”模式?！癕VC”模式是一種系統(tǒng)級架構模式，此模式使開發(fā)人員能夠從體系結構級別了解應該在什么地方編寫什么代碼。但這種模式的典型問題是前端開發(fā)嚴重依賴于開發(fā)環(huán)境，前端和后端仍然糾纏在一起。而“MVVM”模式是在特定的組件或單個頁面中使用的，可以很好地解決“MVC”模式所存在的問題。

2 “MVVM”模式

在傳統(tǒng)的“Web”項目中，“Web”項目通常在服務器端渲染。服務器進程從數(shù)據(jù)庫中獲取數(shù)據(jù)后，使用后端模板引擎，甚至直接在“HTML”模板中嵌入后端語言（如“JSP”“PHP”“ASP”）來加載數(shù)據(jù)生成“HTML”，然后通過網(wǎng)絡傳輸?shù)接脩魹g覽器，再由瀏覽器解析成可見的“HTML”頁面。這種頁面簡單，交互性弱，數(shù)據(jù)處理和呈現(xiàn)方式相對簡單[1]。

但是，對于目前的大型“Web”應用程序項目，有必要將前端和后端分開。隨著“JavaScript”技術的飛速發(fā)展，為了追求更好的用戶體驗和開發(fā)方法，瀏覽器端分層架構的“MVVM（Model-View-ViewModel）”模式開始出現(xiàn)。“MVVM”模式用于特定組件或單個頁面。前端在瀏覽器端工作，后端在服務器端工作。這種模式的好處是顯而易見的，前端和后端的責任是明確的。明確的分工可以使開發(fā)并行，前端可以在本地開發(fā)，后端可以集中處理業(yè)務邏輯和輸出“RESTful”接口。前端開發(fā)和部署相對獨立，只要使用前端和后端接口，調試或開發(fā)新功能就非常方便。

3 基于“MVVM”模式的前端框架技術“Vue.js”

為了降低前端開發(fā)的復雜性，出現(xiàn)了大量的前端框架，如“Google”的“Angularjs”“Facebook”的“Reactjs”和本文中的“Vue.js”。

“Vue.js”采用的是“MVVM”的開發(fā)模式。其核心思想是數(shù)據(jù)驅動和組件化[2]。數(shù)據(jù)驅動的思想使前端從原先的“DOM”操作中解放出來，我們不再需要在維護視圖和數(shù)據(jù)的統(tǒng)一上花費大量的時間，只需要關注“Data”的變化[3]。而組件化是“Vue.js”的重要的核心思想，應用組件化的特點，可以將任意封裝好的代碼注冊成標簽，這樣就在很大程度上減少了重復開發(fā)。組件化思想使得“Web”頁面的構建就像搭建積木一樣，從而提高了開發(fā)效率和代碼復用性?；凇癡ue.js”技術的“MVVM”開發(fā)模式架構圖1所示[4]。

4 基于“MVVM”模式的“Web”系統(tǒng)的開發(fā)

利用基于“MVVM”模式的前端框架技術“Vue.js”實現(xiàn)“Web”系統(tǒng)的開發(fā)。

4.1 項目目錄組織結構

設計規(guī)范合理的目錄組織結構，可以方便日后的維護和管理。項目目錄組織結構如圖2所示。

4.2 項目首頁設計與實現(xiàn)

主頁是用戶訪問網(wǎng)站的入口頁面。如今，用戶體驗越來越受到重視。主頁的設計是非常重要和關鍵的。優(yōu)秀的視覺界面設計和便捷的個性化體驗會讓用戶印象深刻，流連忘返[5]。根據(jù)自上而下，由簡到繁的原則，首先實現(xiàn)頂部區(qū)的功能。頂部區(qū)主要有導航菜單組成，方便用戶切換到其他頁面。

1）NavBar.vue

在“components”文件夾下新建“NavBar.vue”文件。主要代碼如下：