鄧鈞瀚 白俊鴿 四川大學 錦城學院

1 引言

近年來隨著科技和經(jīng)濟的迅速發(fā)展，我國的個人電腦與智能手機的普及率迅速增長，給人們帶來了巨大的科技福利，并使信息的傳播變得更為迅速。漸漸許多高校也開始建立了獨立的校內(nèi)信息發(fā)布系統(tǒng)，以滿足校內(nèi)學生，教員之間的信息通訊以及重要信息的發(fā)布，以助于巨大地提升了校園內(nèi)部交流的速率與質(zhì)量。根據(jù)同樣的情況，我們也將開發(fā)一款基于網(wǎng)頁適用于手機端和個人電腦端的校內(nèi)信息發(fā)布系統(tǒng)。

2 web前端開發(fā)技術的選擇

2.1 主要的一些開發(fā)技術

近幾年來，前端技術的發(fā)展十分迅速，適用于不同種類的技術不斷井噴式發(fā)展。對于前端UI框架而言，最為主流的技術是由Twitter開發(fā)的Bootstrap3開源工具包。該技術良好地解決了不同分辨率的適應問題，十分適合于開發(fā)適合個人電腦端與手機端的網(wǎng)頁布局。Vue的入門比較輕松，上手會很迅速，只要學過前端的基礎知識人都可以馬上開始使用，十分適合新手使用，所以在本系統(tǒng)中我們便選擇了這款技術進行開發(fā)。我們基于最基本的Html，CSS和JavaScript再加上前面所述的兩種框架共同開發(fā)了這款校內(nèi)信息發(fā)布系統(tǒng)。

2.2 Bootstrap3框架的概念和大致使用

本系統(tǒng)主要使用了Bootstrap3框架中的柵格系統(tǒng)對于不同分辨率用戶端的響應式布局。這一系統(tǒng)十分便利，而且類是可以復用，極大地提升了開發(fā)的效率。該框架中的表單，button等工具類也十分方便，直接使用這些類減去了花費在UI上的開發(fā)時間。如果在自己對于UI方面不是特別擅長，開發(fā)者也可以在網(wǎng)上尋找適合的基于該框架的網(wǎng)頁免費開源模板，再進行適當?shù)男薷?，便可以幫助自己完成對于網(wǎng)頁布局的開發(fā)。

2.3 Vue框架的概念和大致使用

Vue框架是一款漸進式的JavaScript框架，即自底向上的增量式開發(fā)框架。在該系統(tǒng)中，主要運用了該框架的響應式的數(shù)據(jù)綁定功能，以及對于部分模板的復用，這些特性使該網(wǎng)頁端系統(tǒng)實現(xiàn)了響應的特性。同時我們也應用了該框架的數(shù)據(jù)綁定的特性實現(xiàn)了網(wǎng)頁與網(wǎng)頁之間的數(shù)據(jù)通信。此外，Vue框架的compute模塊也實現(xiàn)了翻頁部件中動態(tài)對于CSS元素動態(tài)更改，使得用戶體驗更加完善。

3 主要功能描述

該校內(nèi)信息發(fā)布系統(tǒng)支持使用的教員與學生登錄和注冊新賬戶，并在登錄成功后跳轉(zhuǎn)到信息模塊進行信息發(fā)布評論以及查看發(fā)布信息下評論等主要功能。用戶可以看到其他發(fā)布者和評論者的公開信息，以及對于個人信息更新。

3.1 登錄注冊頁面

該界面中由上往下為等待使用者輸入的ID號碼，密碼，以及數(shù)字驗證碼這三個表單。注冊模態(tài)框內(nèi)顯示ID，Nickname，密碼，確認密碼和E-mail的表單信息，以及立即注冊按鈕。找回密碼模態(tài)框內(nèi)應顯示注冊E-mail，E-mail驗證碼和新密碼的三個表單以及發(fā)送驗證碼，更改密碼的按鈕。

3.2 信息展示頁面

本頁面內(nèi)的主要內(nèi)容為信息類別條，信息發(fā)布功能欄，已發(fā)布信息展示框。其中已發(fā)布信息展示框中需要顯示的內(nèi)容應為發(fā)布者Nickname，time，所在分類，標題，簡版發(fā)布內(nèi)容，查看詳情按鈕和翻頁條。在觸發(fā)查看詳情按鈕后，浮現(xiàn)出對應發(fā)布信息的具體內(nèi)容的模態(tài)框。模態(tài)框內(nèi)需要顯示和以上相同的內(nèi)容外還會增加關于評論的信息（評論時間，評論內(nèi)容，以及評論者的Nickname）和翻頁條。

3.3 個人信息頁面

本頁的主要顯示用戶的個人信息包括ID，Nickname，e-mail，通訊地址和更改個人信息按鈕。

4 功能的具體實現(xiàn)

4.1 Ajax數(shù)據(jù)通信模塊

該模塊的功能是網(wǎng)頁與php服務器之間基于http協(xié)議的通訊和數(shù)據(jù)傳輸。該校內(nèi)信息發(fā)布系統(tǒng)中幾乎所有的功能都會需要這一模塊的相應支持，以完成與服務器之間的數(shù)據(jù)傳輸。首先我們需要和服務器端約定好通信的接口規(guī)范和初始化與服務器通信時需要用的服務器地址URL。之后我們需要建立一個新XMLHttpRequest并進行一些必要的設置。以上完成后，再拼裝好符合通信接口規(guī)范的Json數(shù)據(jù)，并通過send()發(fā)送到之前初始化過的服務器地址。然后再進行對于服務器返回信息的監(jiān)聽，通過之前的規(guī)范判斷數(shù)據(jù)傳輸是否成功，成功后進行對于json數(shù)據(jù)的解析。此時可以運用console類中的log()功能函數(shù)對于數(shù)據(jù)傳輸細節(jié)進行查看，方便開發(fā)前期以及后期維護時對于問題的跟蹤。

4.2 注冊界面

在用戶點擊注冊button后，對于表單中的內(nèi)容進行提取，然后在本地利用正則表達式判斷所填內(nèi)容的合法性，然后對比密碼和重復密碼是否相同。如果以上步驟出現(xiàn)輸入內(nèi)容非法或者兩次密碼不同，彈出信息框?qū)τ脩暨M行相應提示。如果合法性判定成功，便將密碼轉(zhuǎn)化為md5加密數(shù)據(jù)并將其他表單數(shù)據(jù)和已加密密碼拼接轉(zhuǎn)化為json數(shù)據(jù)，再通過ajax通信模塊發(fā)送到服務器。在收到服務器發(fā)送的包后，通過服務器返回報頭判定注冊是否完成。如果判定結(jié)果為成功，當前頁加載到登陸界面并提示注冊成功信息給用戶。若分析后結(jié)果為失敗，顯示出服務器提供的具體有關問題的內(nèi)容。

4.3 登陸界面

在用戶填完賬號，密碼和驗證碼后點擊登陸按鈕，被觸發(fā)函數(shù)將會提取表單中的內(nèi)容并將利用以打封裝好的md5類對密碼進行加密。前面的步驟完成后，組裝符合登陸指令的json數(shù)據(jù)并通過通信模塊發(fā)送到服務器端。收到服務器返回指令后，對比數(shù)據(jù)包頭和規(guī)定協(xié)議以判斷登陸是否完成。如果登陸完成，跳轉(zhuǎn)到信息展示頁面并將登陸狀態(tài)信息存儲到sessionStorage中，如果返回指令顯示登陸失敗，提示用戶失敗具體信息并清空表單中密碼一欄內(nèi)的數(shù)據(jù)。

4.4 數(shù)據(jù)顯示

打開數(shù)據(jù)展示頁面后，立即啟動數(shù)據(jù)顯示函數(shù)，該函數(shù)將會根據(jù)當前的頁面分類信息拼接json數(shù)據(jù)，并通過數(shù)據(jù)通信模塊向發(fā)送請求以獲取已發(fā)布信息的數(shù)據(jù)。在接收到服務器返回的json后，將收到的json進行字符串化，并存入sessionStorage[3]。通過Vue的模板方法，數(shù)據(jù)綁定，以及if功能提取sessionStorage數(shù)據(jù)并顯示前十條發(fā)布信息在該頁面。翻頁條在點擊翻頁后使用Vue框架中的compute模塊計算下一頁應顯示數(shù)據(jù)的序列號。根據(jù)計算好的序列號在之前存儲在sessionStorage的數(shù)據(jù)中匹配到應顯示的發(fā)布數(shù)據(jù)并通過Vue的set功能進行動態(tài)地修改目標頁面的文本內(nèi)容。在使用者按下查看詳情按鈕后，獲取目標所在發(fā)布信息的ID并顯示出該發(fā)布信息ID對應的詳情信息到新的模態(tài)框中。以上完成后，通過數(shù)據(jù)通信模塊獲取當前的發(fā)布信息所對應評論數(shù)據(jù)，并通過Vue模板顯示到當前模態(tài)框中。

4.5 信息發(fā)布

獲取當前用戶登陸信息和發(fā)布信息的表單中的數(shù)據(jù)打包成對應json數(shù)據(jù)，并使用通訊模塊發(fā)送到服務器。成功時，提示使用者信息發(fā)布成功并再次調(diào)用數(shù)據(jù)顯示模塊刷新當前界面的信息。如果返回數(shù)值顯示失敗，便向使用者顯示相應失敗的具體信息。

4.6 評論

獲取用戶當前用戶登陸信息和評論信息后，將其打包成對應的json數(shù)據(jù)，并使用通訊模塊發(fā)送到服務器。如果成功，提示用戶評論發(fā)布成功并重新調(diào)用數(shù)據(jù)顯示模塊刷新當前模態(tài)框評論信息。若服務器的返回數(shù)值表示評論不成功，當即向用戶顯示服務器返回的具體情況信息。

4.7 個人信息查看

從sessionStorage中獲取當前用戶的登陸信息并將ID打包成對應的json數(shù)據(jù)發(fā)送到服務器。當收到服務器回發(fā)的Json包后，將包轉(zhuǎn)化為字符串并通過Vue動態(tài)寫入到當前的模態(tài)框中。點擊發(fā)布信息中他人的Nickname時可以通過以上的相同步驟并獲取對應用戶的可以對外個人信息。

4.8 其他附加功能

在信息顯示主頁面的上方點擊注銷，可以清除sessionStorage中的登陸信息以及其他用戶有關信息，再退出該系統(tǒng)并回到登錄的頁面。

5 結(jié)語

本文主要介紹了相較于其他開發(fā)平臺web前端的高效開發(fā)優(yōu)勢，網(wǎng)頁界面的構建，Bootstrap柵格系統(tǒng)如何用于布局，Vue框架如何實現(xiàn)web動態(tài)頁面和如何一步一步完成校內(nèi)信息發(fā)布系統(tǒng)網(wǎng)頁端的構建。