基于MVVM的高校團委網站設計與開發

黃冰

摘要：結合目前高校共青團工作信息化趨勢，文章介紹了基于流行的MVVM技術開發高校團委網站的過程，包括需求分析、架構設計、MVVM原理，介紹了一種基于MVVM的前端應用框架Vue并展示了其在實際項目中的運用。該網站項目為學校團委加強校園團建工作提供了強有力的信息化支持，同時基于MVVM模式進行開發，保證了項目的開發效率與質量的同時為后續項目提供了良好的擴展性，也為高校各部門的信息化在技術上進行了有益的探索。

關鍵詞：Web開發；高校團委；MVVM；Vue

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

文章編號：1009-3044（2019）11-0089-02

Abstract： Combining with the informatization trend on the daily work of Communist Youth League（CYL） in universities， this article introduces the process of developing the website for CYL based on MVVM， including requirements analysis， architecture design， MVVM principles， introduces Vue which is a web framework based on MVVM and how to facilitate Vue in website project. This website provides solid supports for the work of CYL， and the adoption of MVVM pattern ensures the efficiency， the quality and the expansibility of the project， also conducts profitable researches on the informatization for departments in universities.

Key words： web development； university CYL； MVVM； Vue

1 背景

當今時代，網絡已經成為青年的重要聚集地。全國近7億網民中，青少年網民約占80%。認真學習貫徹習近平總書記青年工作思想和網絡強國戰略思想，緊緊抓住共青團改革的重大機遇，充分運用網絡信息化手段探索創新團的組織和工作，努力打造“團網”深度融合、“團青”充分互動的“共青團+互聯網”工作新格局，是新時代共青團工作的總目標。青年在哪里，共青團就要在哪里。新一輪共青團改革，把全面構建“互聯網+共青團”工作格局作為重要內容，描繪出以“青年之聲”和“智慧團建”為主體，構建工作網、聯系網、服務網“三網合一”的共青團互聯網工作體系的亮麗“藍圖”。

隨著互聯網時代的大潮，“網上共青團”已經揚帆啟航。每一名團員青年都是這艘巨輪上的船員。所有團員并肩協力、同舟共濟，朝著讓團組織在網上有門戶、有平臺、有聲音、有活動，讓團員通過網絡有“戶口”、有聯系、有態度、有表現的目標奮力前行。“互聯網+共青團”，就是要把你我他緊緊地“+”在一起！

基于以上趨勢，結合學校團委的要求，采用流行的MVVM技術設計開發了高校團委網站。該網站主要服務于校團委工作人員，學生團員干部以及全體學生團員。管理人員可以發布新聞、通知、公告、文件、活動日志、活動查看審核，數據總結分析等，使用者可以查看各種通知公告，提出活動申請，報名參加活動，查看個人歷史信息及當前活動等。

2 項目需求分析

該項目功能上解決目前分院團委缺乏一個統一的宣傳平臺，團組織陣地建設不健全、團組織發揮作用不明顯、團委團支部聯系不夠緊密等問題，利用當下互聯網新媒體的力量，建設出具有一定完善功能可供團委及團支部使用的團情交互性網站，以更具創新性的方式增強以下幾點校園團建工作優勢。

實踐上著力解決團委需求到網站內容的映射，技術上采用目前比較流行的技術和架構，針對目前智能手機普及率高的情況，在設計、實現以及測試階段重點關注手機端瀏覽器的渲染適應情況，特別是對不同手機尺寸的自適應，比如流動布局、字體圖片自適應等進行充分良好的設計規劃，使得廣大學生能在使用過程中獲得良好的用戶體驗。

項目建設可供團委、團支部使用的團情交互式網站，包含前端展示和后臺兩個模塊。

前端模塊主要包括新聞瀏覽、通知公告展示、各支部團委活動展示、志愿服務展示、文件下載、新媒體導航等功能，

后端模塊主要有數據庫管理、活動日志管理、新聞通知公告文件發布、審核打分、數據流量監控分析等功能。

具體的功能需求包括：

1）管理員、團支部負責人后臺操作權限。

2）團支部可將團日活動、志愿服務等內容放到網站展示。

3）管理員具有審核活動，審核活動日志，對活動打分的功能。

4）團委可以發布新聞動態以及通知公告。

5）可以實現對各個團支部的管理。

3 基于MVVM的網站總體設計

3.1 網站總體架構

根據前面項目需求分析部分的介紹對網站的前后端總體需求進行了設計，包含了前后端架構設計。

3.2.1 前端功能架構設計

前端頁面包含的展示模塊如圖1所示，當學生登陸以后，可以到個人中心查看自己曾經參加過或者正在參加的各種社會實踐、志愿者服務、團校等，并且能看到自己獲得的相應的經驗值，有的活動還可以對應抵扣相應的學分，同時學生也可以自己發起活動申請并提交，等待管理員的審核審批。

3.2.2 后臺功能架構設計

后臺的管理主要包括的功能在項目如圖2所示，具體的功能在項目需求分析里已經做過詳細說明。

3.2 MVVM介紹

前端Web開發技術經過好幾代的迭代以后，逐漸進化除了以MVC為代表的架構，其思想是將業務邏輯、數據、界面顯示分離，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時，不需要重新編寫業務邏輯。其中的M代表了數據（Model），V代表了界面顯示（View）而C代表了業務邏輯控制器（Controller）。

在實際的開發中，由于業務邏輯控制器所包含的邏輯比較復雜，并且與界面視圖的耦合度比較高，造成了難以維護的困境。在這種情況下，MVVM應運而生。其中前兩個字母MV代表的含義與MVC中的是同樣的意思，而VM代表的是ViewModel，具體三者的關系如圖3所示。

可以看到在 MVVM 里面，原來在MVC里面的Controller中跟View耦合的部分被合并到了 View中，而對于其他部分與View和Model都無關的功能，包括檢驗用戶的輸入，網絡相關的服務等等邏輯則放入了ViewModel中。這樣做很好的解耦了Controller和View，提高了代碼的可維護度，同時由于ViewModel中僅僅是邏輯代碼，使得單元測試等方法更加適用，提高了代碼的可測試性。

3.3 MVVM在項目中的應用

目前市面上流行的幾大前端框架如React，Angular，Vue在設計思想上都有MVVM的影子在里面，本項目采用了目前在國內比較流行的Vue來進行開發。Vue是一套用于構建用戶界面的漸進式框架。與其他大型框架不同的是，Vue 被設計為可以自底向上逐層應用，它的優點包括容易上手，簡潔易用的API，數據驅動和組件化的思想。相比于手動操作DOM的網站開發方式，Vue是采用了將DOM和數據綁定起來的方法，而這種綁定是一種雙向的綁定，一旦你創建了綁定，DOM將和數據保持同步，每當數據更新，則相應的DOM節點也會得到更新，反之亦然，這種模式是區別于React里面的單向數據流的。

從圖4中可以看到，Vue架構在ViewModel里面的兩個工具DOM監聽器和數據綁定器是實現雙向綁定的關鍵性組件。從View的角度出發，ViewModel中的DOM監聽器工具可以監控網頁上DOM元素的更新變化，如果發生了變化，那么更新ViewModel中的數據；而 從ViewModel的角度來看，當ViewModel中的數據有更新變化的時候，數據綁定器會通知網頁去更新頁面中的視圖部分，也就是相對應的DOM元素。

在本項目開發的各個模塊中，以個人中心模塊為例，在登錄的時候設計了Person類，開發者通過Object.defineProperty的getter/setter方法來實現自定義的Person類與輸入表單input form中的用戶名和密碼等字段的雙向綁定，免去了對DOM元素的單獨操作，簡化了封裝數據的邏輯。而在個人歷史活動查詢的模塊中，頁面中定義了一些下拉列表，即select tag的DOM元素，來對不同時期、不同類型的活動進行篩選并通過頁面的其他部分對相應篩選出的數據進行展示，項目中將這些元素通過Vue提供的v-model指令這個簡易的API與后面相應的展示的部分進行雙向的綁定，省去了每次需要重復尋找DOM元素進行刷新的邏輯，大大地簡化了代碼的結構，使得代碼清晰可維護。

在其他各個前端以及后端模塊的開發過程中，該項目運用了包括v-model，v-bind，watch，v-if等等數據綁定和控制API，也運用了包括v-on等API來實現對DOM的鼠標或者鍵盤事件監聽并進而對相應的頁面內容進行自動化的刷新，從而將項目從對DOM的各種單獨操作如查詢、更新等事物中解脫出來，可以很好地將開發者的主要精力放在項目邏輯的構建上，而不必擔心被各種瑣碎的事務如數據拼湊、如何更新視圖等糾纏，使得項目的開發邏輯清晰，開發的質量和效率也大大地提高了。

4 結束語

該高校團委網站將為學校團委搭建一個網站平臺，供管理員、學生以及教師教輔等人員使用，針對當前團建工作過程中團組織陣地建設不健全、團組織發揮作用不明顯、團委團支部聯系不夠緊密等問題，探索“網絡團建”新模式，并結合學院學生專業特長，創建一個具有完善交互性可供團委、團支部緊密聯系的工作網、聯系網、服務網“三網合一”的校園共青團網站，以更具創新性的方式增強校園團建工作的活力。

同時該項目技術采用了目前比較流行的MVVM模式進行開發，保證了項目的開發效率與質量，并為項目后續的進一步開發提供了良好的擴展性，也為高校各部門的信息化在技術上進行了有益的探索。

參考文獻：

[1] 秦宜智同志在“青年之聲”互動社交平臺 服務能力建設推進會上的講話[J]. 中國共青團， 2015（7）： 5-11.

[2] 何煥春， 楊懌. 基于MVVM 構架的Web 前端框架研究[J]. 電腦知識與技術， 2017， 13（24）： 59-60.

[3] 張帆. Vue.js項目開發實戰[M]. 北京： 機械工業出版社， 2018： 1-298.

[4] 梁灝. Vue.js實戰[M]. 北京： 清華大學出版社， 2017： 1-235.

【通聯編輯：謝媛媛】