黃冰

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

關鍵詞：Web開發(fā)；高校團委；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 背景

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

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

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

2 項目需求分析

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

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

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

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

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

具體的功能需求包括：

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

2）團支部可將團日活動、志愿服務等內(nèi)容放到網(wǎng)站展示。

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

4）團委可以發(fā)布新聞動態(tài)以及通知公告。

5）可以實現(xiàn)對各個團支部的管理。

3 基于MVVM的網(wǎng)站總體設計

3.1 網(wǎng)站總體架構

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

3.2.1 前端功能架構設計

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

3.2.2 后臺功能架構設計

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

3.2 MVVM介紹

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

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

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

3.3 MVVM在項目中的應用

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

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

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

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

4 結束語

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

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

參考文獻：

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

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

[3] 張帆. Vue.js項目開發(fā)實戰(zhàn)[M]. 北京： 機械工業(yè)出版社， 2018： 1-298.

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

【通聯(lián)編輯：謝媛媛】