基于Vue 的Share 網站設計與實現

馮夢雨 黃媛媛 劉雨嘉 四川大學錦城學院 計算機與軟件學院

引言

由于現代互聯網科技的發展，如今人們的生活娛樂信息大都來自于網絡信息傳遞，因此，本網站在一定程度上使得當代熱愛生活的年輕人可以及時的了解當下娛樂信息走向，全面的旅游攻略，各類美食，多元化的電影評論等。同時，也可分享和記錄自己的喜聞樂見。本文即通過關鍵技術選型介紹，可行性分析，需求分析，功能模塊的設計，大概介紹本網站的開發流程。

1 關鍵技術選型介紹

本次開發采用前后端分離的方法建設網站，關鍵技術選型如下：

Vue.js 是一套漸進式的JavaScript 框架，它只關注圖層，采用自底向上的增量開發設計，目標是通過盡可能簡單的API 實現響應數據綁定和組合的視圖組件，采用MVVM 模式，開發也比較簡易，熟練掌握的要求不高。因此，將它作為本次網站開發的框架。

Element 是基于vue 框架下的組件庫，是由餓了么團隊開發，組件庫中組件種類多，實用性強，并且參照了Bootstrap 的響應式設計，增強了網頁的自適應性。在此次開發設計中，網頁格局分布，主頁的導航，登錄注冊表單，不同意義的按鈕等大都是參考element 組件庫，省去了自己編寫的時間，節約了開發成本，也規范了代碼書寫。

Ajax,（異步Javasctipt 和XML）創建交互式網頁應用，通過在后臺與服務器進行少量數據交換，實現異步更新，完成頁面的局部刷新，來提高響應效率，還可以改變頁面的表現和交互方式，為用戶提供更人性，更優秀的服務。對提高信息傳輸和交換疏導等方面的速度有十分重要的作用。

2 可行性分析

2.1 技術可行性

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

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

Ajax,適用于本網站交互式網頁的使用。

MongoDB 對海量數據處理方面有著極其優越的性能[3]，實際操作簡單，適用于本網站的后臺開發。

綜上，技術可行。

2.2 經濟可行性

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

2.3 開發可行性

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

3 需求分析

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

4 模塊設計

4.1 功能模塊

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

4.2 功能描述

1.用戶注冊/登錄

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

(2）用戶自行在系統中點擊注冊進行注冊（填寫內容包括：用戶名、密碼、聯系方式等）。

(3）用戶進行界面的注冊或登錄操作，會發送消息到后臺服務器，后臺服務器接收到消息，操作數據庫，對數據庫進行添加、查詢操作。

2.文章管理

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

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

(3）用戶可對其他文章進行點贊，評論等交互。

(4）用戶對文章的操作，比如發表、刪除文章等，會發送消息的后臺服務器，服務器接受到消息后，再操作數據庫，返回對應的信息給用戶瀏覽器。

3.用戶管理

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

(2）內容完全由用戶自我管理、設置。

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

(4）用戶信息保存在數據庫中，用戶管理頁面的所有操作，會發送消息到后臺服務器，后臺服務對數據庫執行對應操作，并返回消息給用戶瀏覽器。

5 結束語

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

本文給出了網站基于VUE 的設計與開發過程，MongDB 作為后臺數據庫實現網站的功能。用戶可以在電腦端對文章進行瀏覽，收藏，評論等功能，同時系統前臺對所有表單，后臺向前臺提交的數據會自行進行的校驗，字數限制以及輸入格式的校驗等，后臺向前臺提交數據，確保系統運行的穩定性，以及用戶的舒適體驗度。