馮夢雨 黃媛媛 劉雨嘉 四川大學(xué)錦城學(xué)院 計算機與軟件學(xué)院
由于現(xiàn)代互聯(lián)網(wǎng)科技的發(fā)展,如今人們的生活娛樂信息大都來自于網(wǎng)絡(luò)信息傳遞,因此,本網(wǎng)站在一定程度上使得當(dāng)代熱愛生活的年輕人可以及時的了解當(dāng)下娛樂信息走向,全面的旅游攻略,各類美食,多元化的電影評論等。同時,也可分享和記錄自己的喜聞樂見。本文即通過關(guān)鍵技術(shù)選型介紹,可行性分析,需求分析,功能模塊的設(shè)計,大概介紹本網(wǎng)站的開發(fā)流程。
本次開發(fā)采用前后端分離的方法建設(shè)網(wǎng)站,關(guān)鍵技術(shù)選型如下:
Vue.js 是一套漸進式的JavaScript 框架,它只關(guān)注圖層,采用自底向上的增量開發(fā)設(shè)計,目標(biāo)是通過盡可能簡單的API 實現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件,采用MVVM 模式,開發(fā)也比較簡易,熟練掌握的要求不高。因此,將它作為本次網(wǎng)站開發(fā)的框架。
Element 是基于vue 框架下的組件庫,是由餓了么團隊開發(fā),組件庫中組件種類多,實用性強,并且參照了Bootstrap 的響應(yīng)式設(shè)計,增強了網(wǎng)頁的自適應(yīng)性。在此次開發(fā)設(shè)計中,網(wǎng)頁格局分布,主頁的導(dǎo)航,登錄注冊表單,不同意義的按鈕等大都是參考element 組件庫,省去了自己編寫的時間,節(jié)約了開發(fā)成本,也規(guī)范了代碼書寫。
Ajax,(異步Javasctipt 和XML)創(chuàng)建交互式網(wǎng)頁應(yīng)用,通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,實現(xiàn)異步更新,完成頁面的局部刷新,來提高響應(yīng)效率,還可以改變頁面的表現(xiàn)和交互方式,為用戶提供更人性,更優(yōu)秀的服務(wù)。對提高信息傳輸和交換疏導(dǎo)等方面的速度有十分重要的作用。
Vue.js 綜合了React.JS 和Angular.JS 優(yōu)點,摒棄了他們的缺點。開源,維護性高,輕量,可以說是目前Web應(yīng)用程序開發(fā)的最佳框架之一,有多種腳手架可供選擇使用,適用于小型網(wǎng)站開發(fā),更是小型網(wǎng)站開發(fā)的首選。
Element,Vue 框架下的腳手架,開源使用,布局多樣,類別涵蓋范圍廣,滿足本網(wǎng)站開發(fā)對各類組件的需求。
Ajax,適用于本網(wǎng)站交互式網(wǎng)頁的使用。
MongoDB 對海量數(shù)據(jù)處理方面有著極其優(yōu)越的性能[3],實際操作簡單,適用于本網(wǎng)站的后臺開發(fā)。
綜上,技術(shù)可行。
針對于本次開發(fā),普通的個人筆記本作為工具即可,使用終端測試語言,基本瀏覽器開發(fā)者工具就可以查看錯誤以及基本測試結(jié)果。因此,經(jīng)濟上可行。
Vue.js 基于Javascript 語言,并且ElementUI,Ajax,MongoDB實際操作簡單,易上手。因此,只要精通Javascript 開發(fā)語言,了解Ajax 使用規(guī)則,熟悉MongoDB 各語句功能,加以實踐,熟練操作,就可以順利完成開發(fā)工作。因此,開發(fā)上也可行。
基于市場用戶調(diào)查,網(wǎng)站的目標(biāo)群眾主要為當(dāng)代年輕人,他們除工作外,樂于分享生活,旅游美食,音樂電影內(nèi)容等藝術(shù)鑒賞信息,對于頁面設(shè)即傾向于頁面簡潔,可讀性高的設(shè)計,我們嚴(yán)格依據(jù)具體調(diào)查分析結(jié)果進行設(shè)計與開發(fā)。在本次的網(wǎng)站的開發(fā)中,主要是PC 端的開發(fā),參考了市面上同類網(wǎng)站,需求主要分為用戶注冊,用戶登錄,瀏覽全文,發(fā)布文章,轉(zhuǎn)發(fā),點贊,評論,刪除,搜索,個人信息修改等。
本網(wǎng)站的主要分有用戶注冊,用戶登錄,發(fā)表文章,瀏覽全文,文章點贊,評論,收藏,個人信息的維護,文章搜索以及用戶管理幾大模塊進行設(shè)計,意為用戶提供一個操作性強,實用性高的分享信息類網(wǎng)站。當(dāng)以游客身份瀏覽網(wǎng)站時,可以瀏覽全文,但并不可以對文章進行評論等交互操作,功能模塊選擇性開放,部分操作受到限制。注冊后,通過用戶登錄身份進入網(wǎng)站,基本功能全部開放使用,以確保用戶的使用體驗。
1.用戶注冊/登錄
(1)本功能面向新注冊的用戶(已注冊用戶忽略)。
(2)用戶自行在系統(tǒng)中點擊注冊進行注冊(填寫內(nèi)容包括:用戶名、密碼、聯(lián)系方式等)。
(3)用戶進行界面的注冊或登錄操作,會發(fā)送消息到后臺服務(wù)器,后臺服務(wù)器接收到消息,操作數(shù)據(jù)庫,對數(shù)據(jù)庫進行添加、查詢操作。
2.文章管理
(1)該功能面向已登錄用戶。
(2)用戶可以瀏覽全文,發(fā)表文章,刪除文章。
(3)用戶可對其他文章進行點贊,評論等交互。
(4)用戶對文章的操作,比如發(fā)表、刪除文章等,會發(fā)送消息的后臺服務(wù)器,服務(wù)器接受到消息后,再操作數(shù)據(jù)庫,返回對應(yīng)的信息給用戶瀏覽器。
3.用戶管理
(1)該功能面向已登錄用戶。
(2)內(nèi)容完全由用戶自我管理、設(shè)置。
(3)用戶可在個人頁面上傳圖像,修改個人信息,進行文章管理等。
(4)用戶信息保存在數(shù)據(jù)庫中,用戶管理頁面的所有操作,會發(fā)送消息到后臺服務(wù)器,后臺服務(wù)對數(shù)據(jù)庫執(zhí)行對應(yīng)操作,并返回消息給用戶瀏覽器。
由于目前市面此類網(wǎng)站繁多,因此,本網(wǎng)站以內(nèi)容簡潔,信息明確,用戶操作性強的訴求進行設(shè)計與開發(fā),致力于信息雖對等卻有別于同類網(wǎng)站,增強競爭力。當(dāng)然,本網(wǎng)站還有其他需要完善的地方。例如,用戶與用戶之間進行私信互動,會員用戶的特權(quán)功能。在進一步的更新優(yōu)化中,這都是需要考慮后期添加的問題,爭取做出用戶滿意使用的分享類信息網(wǎng)站。
本文給出了網(wǎng)站基于VUE 的設(shè)計與開發(fā)過程,MongDB 作為后臺數(shù)據(jù)庫實現(xiàn)網(wǎng)站的功能。用戶可以在電腦端對文章進行瀏覽,收藏,評論等功能,同時系統(tǒng)前臺對所有表單,后臺向前臺提交的數(shù)據(jù)會自行進行的校驗,字?jǐn)?shù)限制以及輸入格式的校驗等,后臺向前臺提交數(shù)據(jù),確保系統(tǒng)運行的穩(wěn)定性,以及用戶的舒適體驗度。