基于Vue.js的信息管理系統前端架構

蔡澤銘 王文華

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

1 引言

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

而在國內方面，由于前端框架的發展，隨之出現了前后端分離的思想。為解決開發中前后端職責不清，前端開發重度依賴開發環境等問題，以及隨著AJAX（Asynchronous JavaScript And XML）的出現，前后端分離這個概念才開始真正的有了實現的基礎。各類開發人員能夠專注于自己的領域，其通過定義接口而進行數據的交互，以及后來出現的Vue.js，其通過數據驅動，通過數據的雙向綁定[6]使DOM 和數據保持同步，這也是MVVM(Model-View-ViewModel)設計模式的一個核心思想。

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

圖1：系統的總體功能需求分析

圖2：信息采集與數據展示示意圖

圖3：系統的整體構建流程圖

2 信息管理系統的需求分析

2.1 系統的產品定位與功能分析

針對不同細分領域而產生的信息管理系統能夠很好地針對性進行信息管理，從而實現有的放矢。大學生在中國是一個很大的群體，其中所需要管理的信息量巨大且種類繁多，其中的就業信息更是多種多樣。本文選擇從學生方面入手進行信息管理系統的前端架構開發與研究，定位于整理大學生就業信息方面，重在通過前端的圖表的方式展現出來，讓問題簡化，易于管理。

系統的總體需求如圖1所示。一個好用的信息管理系統通常層次結構會明了清晰，其邏輯結構是管理系統的各個模塊構成的一個網絡圖，而各個功能模塊的展示需要通過一個導航系統[8]來呈現。導航設計應該是既好看又兼具實用性的，層次感更加分明，用戶能夠通過導航欄快速找到自己想要的內容信息，本文在系統中使用的是縱向導航欄。

2.2 系統的功能需求分析

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

在信息采集模塊與數據展示模塊的聯系如圖2所示。

3 信息管理系統的設計與優化

3.1 系統的設計

構建一個站點的前端應用，重點在于整體的構建，減少各個組件之間的耦合度，因此在這次的技術選擇中選用了Vue.js 進行開發。系統的整體構建如圖3所示。

構建后系統的整體效果如圖4所示。

其中，首頁是本系統的重要功能模塊，其主要功能是能夠及時更新一些重要信息，用戶可以通過首頁的未讀消息一欄看到最新發布的公告以及信息，避免錯過所需的信息，并且在用戶的讀過消息之后會將消息轉入已讀消。系統通過讀取數據之后，將所調取到的數據放入unread 以及read 兩個數組變量中，程序將變量中的數據展示至前端界面，再通過相應的代碼操作unread 以及read 數組變量的數據。當點擊標為已讀時，系統通過handleRead 方法將該條信息提取出來為item變量，再將item變量拼接至read變量中進行展示，從而實現標為已讀功能。

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

數據展示模塊旨在對錄入的數據進行可視化的展現，通過許許多多的圖像技術及科學，將數據以圖像的方式進行呈現出來，并表現在具體的設備上。本系統將采集到的數據使用Vue.js 封裝的Vueschart 的圖表組件進行邏輯化處理，最終進行可視化展示。通過使用可視化圖表組件，其展示效果如圖7所示。可視化的圖表讓用戶對信息能有個快速準確的了解，發現數據信息的大體規律，省去冗余的文字敘述，簡化資料，便于分析、對比和計算。另外，使用可視化組件，程序代碼也會相對簡單一些，通過選擇圖表的類型，以及具體的樣式及數據，就可以通過這種方式呈現出具體的圖像。

圖4：系統整體效果圖

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

圖6：信息展示界面

圖7：數據展示效果

3.2 系統開發中應用的技術

本文系統開發采用了以下技術：

3.2.1 Vue.js

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

3.2.2 CSS3(Cascading Style Sheets 3)

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

4 結論

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