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

馮夢雨 黃媛媛 劉雨嘉 四川大學(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ā)流程。

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

本次開發(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)等方面的速度有十分重要的作用。

2 可行性分析

2.1 技術(shù)可行性

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ù)可行。

2.2 經(jīng)濟可行性

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

2.3 開發(fā)可行性

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

3 需求分析

基于市場用戶調(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ā)，點贊，評論，刪除，搜索，個人信息修改等。

4 模塊設(shè)計

4.1 功能模塊

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

4.2 功能描述

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)操作，并返回消息給用戶瀏覽器。

5 結(jié)束語

由于目前市面此類網(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)定性，以及用戶的舒適體驗度。