方生

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

關(guān)鍵詞：MVVM;Web;前端;Vue.js

中圖分類號：TP311? ? ? 文獻標(biāo)識碼：A

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

1 背景

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

2 “MVVM”模式

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

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

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

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

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

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

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

4.1 項目目錄組織結(jié)構(gòu)

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

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

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

1）NavBar.vue

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