基于Vue.js的信息管理系統(tǒng)前端架構(gòu)

蔡澤銘 王文華

（廣東海洋大學(xué)電子與信息工程學(xué)院 廣東省湛江市 524088）

1 引言

信息管理是各組織日常的主要管理工作，信息作為生產(chǎn)力中最活躍的因子，其管理是一個(gè)十分重要的工作。而隨著互聯(lián)網(wǎng)技術(shù)和移動(dòng)終端的發(fā)展，Web 信息管理系統(tǒng)應(yīng)用的需求在不斷增加，網(wǎng)頁(yè)呈現(xiàn)方式也不再僅僅只是簡(jiǎn)單的文字和圖片的簡(jiǎn)單呈現(xiàn)，近幾年前端在國(guó)內(nèi)外有了非常多的發(fā)展[1-4]。在早期前端發(fā)展出的框架主要是以J Query 為主的一類框架，可以稱作JavaScript 的一個(gè)庫(kù)，以及一些UI 框架，例如Bootstrap[5]、YUI[6]。隨著前端的工作量和復(fù)雜度的增加，開發(fā)者們開始嘗試以更高效的方式簡(jiǎn)化工作、提升效率，提高代碼質(zhì)量，因此框架應(yīng)運(yùn)而生。在2013年，F(xiàn)acebook 開源了React[5]，這是由Facebook 的一個(gè)內(nèi)部項(xiàng)目發(fā)展出來的一個(gè)前端框架，用于代替已有的JavaScript MVC 框架，它通過盡可能減少對(duì)DOM(Document Object Model)的操作而提出了Virtual DOM 的概念。通過抽象出一個(gè)對(duì)象來描述DOM 的原本模樣，而如何呈現(xiàn)最終是通過Virtual DOM 來更新真實(shí)的DOM。再早一些的有Angular Js，它是Google 發(fā)布的一個(gè)MVC 框架，核心思想是MVC、模塊化，自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。

而在國(guó)內(nèi)方面，由于前端框架的發(fā)展，隨之出現(xiàn)了前后端分離的思想。為解決開發(fā)中前后端職責(zé)不清，前端開發(fā)重度依賴開發(fā)環(huán)境等問題，以及隨著AJAX（Asynchronous JavaScript And XML）的出現(xiàn)，前后端分離這個(gè)概念才開始真正的有了實(shí)現(xiàn)的基礎(chǔ)。各類開發(fā)人員能夠?qū)Ｗ⒂谧约旱念I(lǐng)域，其通過定義接口而進(jìn)行數(shù)據(jù)的交互，以及后來出現(xiàn)的Vue.js，其通過數(shù)據(jù)驅(qū)動(dòng)，通過數(shù)據(jù)的雙向綁定[6]使DOM 和數(shù)據(jù)保持同步，這也是MVVM(Model-View-ViewModel)設(shè)計(jì)模式的一個(gè)核心思想。

Vue.js 具有完善的生態(tài)圈，能夠快速搭建Vue Router 和Vuex 等。本文基于Vue.js 技術(shù)實(shí)現(xiàn)管理系統(tǒng)的布局和樣式，便于人機(jī)交互操作的信息管理系統(tǒng)，在完善數(shù)據(jù)采集和可視化展示等功能的同時(shí)使瀏覽器的渲染速度加快，改善信息管理系統(tǒng)的性能。

圖1：系統(tǒng)的總體功能需求分析

圖2：信息采集與數(shù)據(jù)展示示意圖

圖3：系統(tǒng)的整體構(gòu)建流程圖

2 信息管理系統(tǒng)的需求分析

2.1 系統(tǒng)的產(chǎn)品定位與功能分析

針對(duì)不同細(xì)分領(lǐng)域而產(chǎn)生的信息管理系統(tǒng)能夠很好地針對(duì)性進(jìn)行信息管理，從而實(shí)現(xiàn)有的放矢。大學(xué)生在中國(guó)是一個(gè)很大的群體，其中所需要管理的信息量巨大且種類繁多，其中的就業(yè)信息更是多種多樣。本文選擇從學(xué)生方面入手進(jìn)行信息管理系統(tǒng)的前端架構(gòu)開發(fā)與研究，定位于整理大學(xué)生就業(yè)信息方面，重在通過前端的圖表的方式展現(xiàn)出來，讓問題簡(jiǎn)化，易于管理。

系統(tǒng)的總體需求如圖1所示。一個(gè)好用的信息管理系統(tǒng)通常層次結(jié)構(gòu)會(huì)明了清晰，其邏輯結(jié)構(gòu)是管理系統(tǒng)的各個(gè)模塊構(gòu)成的一個(gè)網(wǎng)絡(luò)圖，而各個(gè)功能模塊的展示需要通過一個(gè)導(dǎo)航系統(tǒng)[8]來呈現(xiàn)。導(dǎo)航設(shè)計(jì)應(yīng)該是既好看又兼具實(shí)用性的，層次感更加分明，用戶能夠通過導(dǎo)航欄快速找到自己想要的內(nèi)容信息，本文在系統(tǒng)中使用的是縱向?qū)Ш綑凇?/p>

2.2 系統(tǒng)的功能需求分析

本信息管理系統(tǒng)主要包括四個(gè)主要功能，即登錄模塊、首頁(yè)模塊、信息采集模塊、數(shù)據(jù)展示模塊。用戶通過登錄界面進(jìn)行登錄，做出一個(gè)能夠吸引用戶的登錄界面是很有必要的。一個(gè)美觀有設(shè)計(jì)感的界面會(huì)讓用戶有興趣去了解，去深入。從這一方面來思考，登錄界面可以做得美觀一些，這是很重要的一個(gè)點(diǎn)。首頁(yè)是用戶登陸后的第一交互界面，其可以告訴用戶系統(tǒng)核心與重要的功能，通過一段介紹去了解這個(gè)系統(tǒng)，是用戶的第一印象所在，所以在前端領(lǐng)域來說，就是要提升首頁(yè)的交互體驗(yàn)，繼而影響到后期用戶對(duì)整個(gè)系統(tǒng)的后續(xù)體驗(yàn)。信息采集模塊在前端界面上比較重要的就是信息的采集錄入，因此系統(tǒng)專門分了一個(gè)模塊用于收集采集信息，其中表單元素居多。表單是系統(tǒng)交互的重要工具，其能夠給需要采集信息的用戶提供一定的反饋及信息的重要來源。用戶在瀏覽數(shù)據(jù)展示的時(shí)候一般都喜歡有許多圖片說明的信息，這樣的方式能夠比較輕松直觀地獲取到所需的信息，而統(tǒng)計(jì)圖表是一種很好的敘述方式。所謂統(tǒng)計(jì)表，就是人們將統(tǒng)計(jì)資料的數(shù)量關(guān)系采用表格的形式展示出來，從而達(dá)到直觀地展示出數(shù)據(jù)的走向趨勢(shì)，使用者能夠更好地獲取信息；而所謂統(tǒng)計(jì)圖，就是將統(tǒng)計(jì)資料的數(shù)量關(guān)系利用某種方法和工具繪制幾何圖形來展示，是以圖像化的方式將平時(shí)收集到的數(shù)據(jù)進(jìn)行了具象化的表現(xiàn)，提升了人們對(duì)數(shù)據(jù)的敏感度，觀察數(shù)據(jù)的走向，更好地對(duì)形勢(shì)作出判斷。常用的統(tǒng)計(jì)圖有柱形圖、條形圖、拆線圖以及餅狀圖等。

在信息采集模塊與數(shù)據(jù)展示模塊的聯(lián)系如圖2所示。

3 信息管理系統(tǒng)的設(shè)計(jì)與優(yōu)化

3.1 系統(tǒng)的設(shè)計(jì)

構(gòu)建一個(gè)站點(diǎn)的前端應(yīng)用，重點(diǎn)在于整體的構(gòu)建，減少各個(gè)組件之間的耦合度，因此在這次的技術(shù)選擇中選用了Vue.js 進(jìn)行開發(fā)。系統(tǒng)的整體構(gòu)建如圖3所示。

構(gòu)建后系統(tǒng)的整體效果如圖4所示。

其中，首頁(yè)是本系統(tǒng)的重要功能模塊，其主要功能是能夠及時(shí)更新一些重要信息，用戶可以通過首頁(yè)的未讀消息一欄看到最新發(fā)布的公告以及信息，避免錯(cuò)過所需的信息，并且在用戶的讀過消息之后會(huì)將消息轉(zhuǎn)入已讀消。系統(tǒng)通過讀取數(shù)據(jù)之后，將所調(diào)取到的數(shù)據(jù)放入unread 以及read 兩個(gè)數(shù)組變量中，程序?qū)⒆兞恐械臄?shù)據(jù)展示至前端界面，再通過相應(yīng)的代碼操作unread 以及read 數(shù)組變量的數(shù)據(jù)。當(dāng)點(diǎn)擊標(biāo)為已讀時(shí)，系統(tǒng)通過handleRead 方法將該條信息提取出來為item變量，再將item變量拼接至read變量中進(jìn)行展示，從而實(shí)現(xiàn)標(biāo)為已讀功能。

而數(shù)據(jù)錄入模塊是信息錄入的途徑，主要是表單的輸入與綁定，該頁(yè)面的實(shí)現(xiàn)不需要太多復(fù)雜的樣式，一切以簡(jiǎn)約為主，如圖5所示，在表單的選擇上選擇了基本的輸入框、下拉列表、單選框，以及時(shí)間選擇框。對(duì)采集到的數(shù)據(jù)從數(shù)組中提取出來進(jìn)行展示，如圖6所示。

數(shù)據(jù)展示模塊旨在對(duì)錄入的數(shù)據(jù)進(jìn)行可視化的展現(xiàn)，通過許許多多的圖像技術(shù)及科學(xué)，將數(shù)據(jù)以圖像的方式進(jìn)行呈現(xiàn)出來，并表現(xiàn)在具體的設(shè)備上。本系統(tǒng)將采集到的數(shù)據(jù)使用Vue.js 封裝的Vueschart 的圖表組件進(jìn)行邏輯化處理，最終進(jìn)行可視化展示。通過使用可視化圖表組件，其展示效果如圖7所示。可視化的圖表讓用戶對(duì)信息能有個(gè)快速準(zhǔn)確的了解，發(fā)現(xiàn)數(shù)據(jù)信息的大體規(guī)律，省去冗余的文字?jǐn)⑹觯?jiǎn)化資料，便于分析、對(duì)比和計(jì)算。另外，使用可視化組件，程序代碼也會(huì)相對(duì)簡(jiǎn)單一些，通過選擇圖表的類型，以及具體的樣式及數(shù)據(jù)，就可以通過這種方式呈現(xiàn)出具體的圖像。

圖4：系統(tǒng)整體效果圖

圖5：錄入信息模塊界面圖

圖6：信息展示界面

圖7：數(shù)據(jù)展示效果

3.2 系統(tǒng)開發(fā)中應(yīng)用的技術(shù)

本文系統(tǒng)開發(fā)采用了以下技術(shù)：

3.2.1 Vue.js

隨著前端項(xiàng)目邏輯的復(fù)雜度提高以及難以維護(hù)的情況，前端引進(jìn)了后端的架構(gòu)思想MVC，JavaScript 框架開始受到歡迎。它們能幫助開發(fā)者書寫一些邏輯代碼，提高開發(fā)者的效率。Vue 取自法語(yǔ)中的Vue，是看見、視野、窗戶的意思，這很符合Vue.js 的思想。通過雙向綁定的數(shù)據(jù)流模式，解決了以往開發(fā)者需要經(jīng)常操作DOM 的問題。Vue.js 這幾年越來越受到前端開發(fā)者的歡迎，使用者大大增加。

3.2.2 CSS3(Cascading Style Sheets 3)

CSS3 是CSS 的一個(gè)新版本，其語(yǔ)言的開發(fā)是朝著模塊化發(fā)展的。相比以前的版本，它被分解為了很多的模塊，如盒子模型、列表模塊等等，并且在其中加入了許多的動(dòng)畫效果供開發(fā)者使用。本系統(tǒng)使用了很多CSS3 的特性，如圓角border-radius、過渡動(dòng)畫效果transition 等，代替網(wǎng)頁(yè)的腳本實(shí)現(xiàn)部分頁(yè)面的交互效果。這些功能提升了系統(tǒng)界面美觀度。另外，本文從減少HTTP 請(qǐng)求次數(shù)、組件復(fù)用、安全防御等方面對(duì)系統(tǒng)進(jìn)行了優(yōu)化。

4 結(jié)論

信息作為生產(chǎn)力中最活躍的因子之一，其管理是一個(gè)十分重要的工作，信息管理的好壞直接影響到該部門或該組織的工作效率。本文針對(duì)高校大學(xué)生就業(yè)信息方面的統(tǒng)計(jì)復(fù)雜繁重這項(xiàng)工作進(jìn)行信息管理系統(tǒng)的前端架構(gòu)開發(fā)與研究，重在將所需信息通過前端的圖表方式展現(xiàn)出來，讓問題簡(jiǎn)化，易于管理。隨之對(duì)功能需求進(jìn)行分析，采用Vue.js 進(jìn)行人性化的開發(fā)設(shè)計(jì)，并且從減少HTTP 請(qǐng)求次數(shù)、組件復(fù)用、安全防御等方面對(duì)系統(tǒng)進(jìn)行優(yōu)化，使得本文的系統(tǒng)層次清晰、簡(jiǎn)潔明了，有一定的應(yīng)用潛力。