基于Vue 的Share 網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

馮夢雨 黃媛媛 劉雨嘉 四川大學(xué)錦城學(xué)院 計(jì)算機(jī)與軟件學(xué)院

引言

由于現(xiàn)代互聯(lián)網(wǎng)科技的發(fā)展，如今人們的生活?yuàn)蕵沸畔⒋蠖紒碜杂诰W(wǎng)絡(luò)信息傳遞，因此，本網(wǎng)站在一定程度上使得當(dāng)代熱愛生活的年輕人可以及時(shí)的了解當(dāng)下娛樂信息走向，全面的旅游攻略，各類美食，多元化的電影評(píng)論等。同時(shí)，也可分享和記錄自己的喜聞樂見。本文即通過關(guān)鍵技術(shù)選型介紹，可行性分析，需求分析，功能模塊的設(shè)計(jì)，大概介紹本網(wǎng)站的開發(fā)流程。

1 關(guān)鍵技術(shù)選型介紹

本次開發(fā)采用前后端分離的方法建設(shè)網(wǎng)站，關(guān)鍵技術(shù)選型如下：

Vue.js 是一套漸進(jìn)式的JavaScript 框架，它只關(guān)注圖層，采用自底向上的增量開發(fā)設(shè)計(jì)，目標(biāo)是通過盡可能簡單的API 實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件，采用MVVM 模式，開發(fā)也比較簡易，熟練掌握的要求不高。因此，將它作為本次網(wǎng)站開發(fā)的框架。

Element 是基于vue 框架下的組件庫，是由餓了么團(tuán)隊(duì)開發(fā)，組件庫中組件種類多，實(shí)用性強(qiáng)，并且參照了Bootstrap 的響應(yīng)式設(shè)計(jì)，增強(qiáng)了網(wǎng)頁的自適應(yīng)性。在此次開發(fā)設(shè)計(jì)中，網(wǎng)頁格局分布，主頁的導(dǎo)航，登錄注冊表單，不同意義的按鈕等大都是參考element 組件庫，省去了自己編寫的時(shí)間，節(jié)約了開發(fā)成本，也規(guī)范了代碼書寫。

Ajax,（異步Javasctipt 和XML）創(chuàng)建交互式網(wǎng)頁應(yīng)用，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，實(shí)現(xiàn)異步更新，完成頁面的局部刷新，來提高響應(yīng)效率，還可以改變頁面的表現(xiàn)和交互方式，為用戶提供更人性，更優(yōu)秀的服務(wù)。對(duì)提高信息傳輸和交換疏導(dǎo)等方面的速度有十分重要的作用。

2 可行性分析

2.1 技術(shù)可行性

Vue.js 綜合了React.JS 和Angular.JS 優(yōu)點(diǎn)，摒棄了他們的缺點(diǎn)。開源，維護(hù)性高，輕量，可以說是目前Web應(yīng)用程序開發(fā)的最佳框架之一，有多種腳手架可供選擇使用，適用于小型網(wǎng)站開發(fā)，更是小型網(wǎng)站開發(fā)的首選。

Element,Vue 框架下的腳手架，開源使用，布局多樣，類別涵蓋范圍廣，滿足本網(wǎng)站開發(fā)對(duì)各類組件的需求。

Ajax,適用于本網(wǎng)站交互式網(wǎng)頁的使用。

MongoDB 對(duì)海量數(shù)據(jù)處理方面有著極其優(yōu)越的性能[3]，實(shí)際操作簡單，適用于本網(wǎng)站的后臺(tái)開發(fā)。

綜上，技術(shù)可行。

2.2 經(jīng)濟(jì)可行性

針對(duì)于本次開發(fā)，普通的個(gè)人筆記本作為工具即可，使用終端測試語言，基本瀏覽器開發(fā)者工具就可以查看錯(cuò)誤以及基本測試結(jié)果。因此，經(jīng)濟(jì)上可行。

2.3 開發(fā)可行性

Vue.js 基于Javascript 語言，并且ElementUI,Ajax,MongoDB實(shí)際操作簡單，易上手。因此，只要精通Javascript 開發(fā)語言,了解Ajax 使用規(guī)則，熟悉MongoDB 各語句功能，加以實(shí)踐，熟練操作，就可以順利完成開發(fā)工作。因此，開發(fā)上也可行。

3 需求分析

基于市場用戶調(diào)查，網(wǎng)站的目標(biāo)群眾主要為當(dāng)代年輕人，他們除工作外，樂于分享生活，旅游美食，音樂電影內(nèi)容等藝術(shù)鑒賞信息，對(duì)于頁面設(shè)即傾向于頁面簡潔，可讀性高的設(shè)計(jì)，我們嚴(yán)格依據(jù)具體調(diào)查分析結(jié)果進(jìn)行設(shè)計(jì)與開發(fā)。在本次的網(wǎng)站的開發(fā)中，主要是PC 端的開發(fā)，參考了市面上同類網(wǎng)站，需求主要分為用戶注冊，用戶登錄，瀏覽全文，發(fā)布文章，轉(zhuǎn)發(fā)，點(diǎn)贊，評(píng)論，刪除，搜索，個(gè)人信息修改等。

4 模塊設(shè)計(jì)

4.1 功能模塊

本網(wǎng)站的主要分有用戶注冊，用戶登錄，發(fā)表文章，瀏覽全文，文章點(diǎn)贊，評(píng)論，收藏，個(gè)人信息的維護(hù)，文章搜索以及用戶管理幾大模塊進(jìn)行設(shè)計(jì)，意為用戶提供一個(gè)操作性強(qiáng)，實(shí)用性高的分享信息類網(wǎng)站。當(dāng)以游客身份瀏覽網(wǎng)站時(shí)，可以瀏覽全文，但并不可以對(duì)文章進(jìn)行評(píng)論等交互操作，功能模塊選擇性開放，部分操作受到限制。注冊后，通過用戶登錄身份進(jìn)入網(wǎng)站，基本功能全部開放使用，以確保用戶的使用體驗(yàn)。

4.2 功能描述

1.用戶注冊/登錄

(1）本功能面向新注冊的用戶（已注冊用戶忽略）。

(2）用戶自行在系統(tǒng)中點(diǎn)擊注冊進(jìn)行注冊（填寫內(nèi)容包括：用戶名、密碼、聯(lián)系方式等）。

(3）用戶進(jìn)行界面的注冊或登錄操作，會(huì)發(fā)送消息到后臺(tái)服務(wù)器，后臺(tái)服務(wù)器接收到消息，操作數(shù)據(jù)庫，對(duì)數(shù)據(jù)庫進(jìn)行添加、查詢操作。

2.文章管理

(1）該功能面向已登錄用戶。

(2）用戶可以瀏覽全文，發(fā)表文章，刪除文章。

(3）用戶可對(duì)其他文章進(jìn)行點(diǎn)贊，評(píng)論等交互。

(4）用戶對(duì)文章的操作，比如發(fā)表、刪除文章等，會(huì)發(fā)送消息的后臺(tái)服務(wù)器，服務(wù)器接受到消息后，再操作數(shù)據(jù)庫，返回對(duì)應(yīng)的信息給用戶瀏覽器。

3.用戶管理

(1）該功能面向已登錄用戶。

(2）內(nèi)容完全由用戶自我管理、設(shè)置。

(3）用戶可在個(gè)人頁面上傳圖像，修改個(gè)人信息，進(jìn)行文章管理等。

(4）用戶信息保存在數(shù)據(jù)庫中，用戶管理頁面的所有操作，會(huì)發(fā)送消息到后臺(tái)服務(wù)器，后臺(tái)服務(wù)對(duì)數(shù)據(jù)庫執(zhí)行對(duì)應(yīng)操作，并返回消息給用戶瀏覽器。

5 結(jié)束語

由于目前市面此類網(wǎng)站繁多，因此，本網(wǎng)站以內(nèi)容簡潔，信息明確，用戶操作性強(qiáng)的訴求進(jìn)行設(shè)計(jì)與開發(fā)，致力于信息雖對(duì)等卻有別于同類網(wǎng)站，增強(qiáng)競爭力。當(dāng)然，本網(wǎng)站還有其他需要完善的地方。例如，用戶與用戶之間進(jìn)行私信互動(dòng)，會(huì)員用戶的特權(quán)功能。在進(jìn)一步的更新優(yōu)化中，這都是需要考慮后期添加的問題，爭取做出用戶滿意使用的分享類信息網(wǎng)站。

本文給出了網(wǎng)站基于VUE 的設(shè)計(jì)與開發(fā)過程，MongDB 作為后臺(tái)數(shù)據(jù)庫實(shí)現(xiàn)網(wǎng)站的功能。用戶可以在電腦端對(duì)文章進(jìn)行瀏覽，收藏，評(píng)論等功能，同時(shí)系統(tǒng)前臺(tái)對(duì)所有表單，后臺(tái)向前臺(tái)提交的數(shù)據(jù)會(huì)自行進(jìn)行的校驗(yàn)，字?jǐn)?shù)限制以及輸入格式的校驗(yàn)等，后臺(tái)向前臺(tái)提交數(shù)據(jù)，確保系統(tǒng)運(yùn)行的穩(wěn)定性，以及用戶的舒適體驗(yàn)度。