基于web前端的校內(nèi)信息發(fā)布系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

鄧鈞瀚 白俊鴿 四川大學(xué) 錦城學(xué)院

1 引言

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

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

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

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

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

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

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

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

3 主要功能描述

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

3.1 登錄注冊頁面

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

3.2 信息展示頁面

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

3.3 個人信息頁面

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

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

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

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

4.2 注冊界面

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

4.3 登陸界面

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

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

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

4.5 信息發(fā)布

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

4.6 評論

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

4.7 個人信息查看

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

4.8 其他附加功能

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

5 結(jié)語

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