基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文

基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第1頁。文檔均為word文檔，下載后可直接編輯使用亦可打印基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第1頁。摘要隨著網(wǎng)絡(luò)時代的發(fā)展，擁有著一個個人的空間是很多人所需要的，更何況在信息容易暴露的網(wǎng)絡(luò)上，網(wǎng)絡(luò)用戶更是如此，可以更好的與他人交流，共享信息，互相學(xué)習(xí)，因此就出現(xiàn)一個概念——博客(blog)。本系統(tǒng)以個人博客為主要概念，進行了解與分析，通過當(dāng)下網(wǎng)絡(luò)時代的需求，進行系統(tǒng)的開發(fā)。本系統(tǒng)主要應(yīng)用于兩端——web端和admin端，兩端都是基于前端框架vue和express框架，express框架是基于node.js進行開發(fā)的，而數(shù)據(jù)庫的選用是mongoDB數(shù)據(jù)，它是一個非關(guān)系型數(shù)據(jù)庫，編輯器為VScode,以此來實現(xiàn)該系統(tǒng)。本論文中將先講述該個人博客的開發(fā)背景以及設(shè)計模式，還會重點介紹當(dāng)下流行的開發(fā)方式，前端vue的spa單頁面開發(fā)，以及基于vue+node.js的前后端分離開發(fā)的當(dāng)下流行開發(fā)理念。系統(tǒng)如何以vue+noed.js實現(xiàn)mvvm模式控制。最后將會將本博客系統(tǒng)的各個功能模塊的實現(xiàn)進行必要的介紹，對系統(tǒng)各個功能的性能檢測，以及對博客系統(tǒng)開發(fā)中，遇到的各種問題提出針對性的解決方式。關(guān)鍵詞：node.js vuemongoDB 個人博客系統(tǒng) AbstractWiththedevelopmentoftheInternetage,hasapersonalspaceisalotofpeopleneed,what'smore,oninformationexposuretonetwork,networkusers,canbettercommunicatewithothers,shareinformation,learnfromeachother,sothereisaconcept-blog(blog).

Thissystemismainlymadeofpersonalblogconcept,understandingandanalysis,throughthepresentdemandofthenetworkage,forsystemdevelopment.Thissystemismainlyusedinbothends-awebclientandadminside,bothsidesisbasedonthefrontframevueandexpressframe,expressframeworkisbasedonthenode.Jsfordevelopment,andthe基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第2頁。selectionofdatabaseisdirectingadata,itisanon-relationaldatabase,editorforVScode,inordertorealizethesystem.

Thispaperfirstdescribedthedevelopmentbackgroundofthepersonalbloganddesignpatterns,willfocusonthepresentpopularmodeofdevelopment,thefront-endvuespasingledevelopment,andbasedonthevue+node.Jsbeforeandaftertheseparationofthedevelopmentofthepresentpopulardevelopmentphilosophy.Howthesystemtothevue+noed.JsMVVMpatterncontrol.

Finallywillthisblogsystemistherealizationofeachfunctionmoduleintroducesthenecessaryandthesystemperformancetestofthefunction,aswellastotheblogsystemdevelopment,variousproblemsputforwardthecorrespondingsolutions基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第2頁。Keywords：node.js vuemongoDBPersonalblogsystem基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第3頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第3頁。目錄緒論概述博客，實際剛開始的名字是網(wǎng)絡(luò)日記，英文名是weblog，在其后的發(fā)展中，有人刻意講其的拼寫改成了weblog。于是就有了blog的出現(xiàn)，由詞義我們就可以看出了博客的共享性，但是在時代發(fā)展的過程中，信息與數(shù)據(jù)的知識價值開始逐漸體現(xiàn)出來了，所以我們應(yīng)當(dāng)重視知識的價值，為此本系統(tǒng)通過知識的付費，來保障作者的知識產(chǎn)權(quán)。研究背景在當(dāng)前時代中，隨著我國科技技術(shù)的發(fā)展，以及社會生產(chǎn)力的進步，計算機網(wǎng)絡(luò)在我們的日常生活中發(fā)揮著越來越重要的作用，是我們生活中最重要的輔助工具。而在我國，網(wǎng)絡(luò)科技的不斷發(fā)展深刻地影響著我們。我國使用計算機的人數(shù)不斷的增加，而且我們的計算機水平也在不斷的提升著，我們從從事互聯(lián)網(wǎng)的從業(yè)人員人數(shù)的逐年提升就可以看出，尤其是互聯(lián)網(wǎng)等領(lǐng)域的應(yīng)用取得了非常不錯的成績。因為網(wǎng)絡(luò)應(yīng)用的強大功能，使人們對此產(chǎn)生了十分巨大的市場需求，而且計算機也會在未來進一步的網(wǎng)絡(luò)化發(fā)展。而且在當(dāng)今的信息化大爆炸時代。網(wǎng)絡(luò)技術(shù)也不斷發(fā)展成熟，特別是其中的信息處理技術(shù)，它發(fā)展的也尤為迅猛。當(dāng)然其中有很多我們不能忽略的框架技術(shù)，其中的web框架技術(shù)也蛻變的很大。因此，通過互聯(lián)網(wǎng)的技術(shù)可以把地球村的人們聯(lián)系起來。人類從此進入了互聯(lián)網(wǎng)時代。而人們在互聯(lián)網(wǎng)通信的方式也有著五花八門的呈現(xiàn)。比如。博客微博等等，在此我們可以預(yù)見。在未來的發(fā)展中。在網(wǎng)絡(luò)上呈現(xiàn)交流的平臺。由此顯得十分重要。博客恰恰是其中一種基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第4頁。手段幫助我們實現(xiàn)在互聯(lián)網(wǎng)上的聯(lián)系與交流，使我們實現(xiàn)信息共享，以及跨越實際空間的交流?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第4頁。博客在我的認(rèn)知里，它是一個擁有創(chuàng)造性的網(wǎng)絡(luò)空間，世界上各種形形色色的人們可以在這里暢想自在地抒發(fā)自己的所想，以及幫助同一個圈子的人互通信息，以此來方便大家。一直以來博客都擁有著許多的特點，如它的個性、開放、及時、有效等等。在我國，博客的發(fā)展已經(jīng)開始很久了，有著各種各樣的形式，以及各種各樣的圈子。比如，知乎、CNDS等具有代代表性的博客系統(tǒng)，它們都做得十分成功，有專注于打造不同圈子的，也有致力于打造特殊圈子的博客。在還沒有博客之前，我們通過各種各樣的渠道去與他人進行聊天，然而隨著博客的面世，以及逐漸的展露頭角，這種狀況就慢慢開始發(fā)生改變了，人們可以通過在博客的這個個人空間里與他人相互交談，而且這種交談是建立在大家擁有同一種興趣愛好上的，通過大家感興趣的文章而相遇，大家各抒己見。而且在生活中，有著很多的事情會激發(fā)我們的想象，只有我們將這些對生活的思考幾時的記錄下來，我們就會將它們深深地烙印在我們的腦海里。當(dāng)思考被轉(zhuǎn)換成自己特有的觀點，這不就我們寫博客的追求嗎。我們可以同過寫博客文章記錄我們的進步發(fā)展，不單單在其中表達自己所想，更珍貴的是我們回首時的總結(jié)。博客發(fā)展現(xiàn)狀如今博客的發(fā)展，博客是網(wǎng)絡(luò)上的第四種網(wǎng)絡(luò)交流的新方式。表達各種思想的虛擬場所，正是網(wǎng)絡(luò)用戶所擁有的需求。博客文章的知識范圍很廣泛，有著各種各樣專業(yè)知識的集合，無論是個人還是集體亦是如此。博客其實很早已經(jīng)出現(xiàn)了，具體日期可以追溯到2000年之前。直到2000年后的幾年，是博客發(fā)展的階段。很多不同類型的博客網(wǎng)站不斷出現(xiàn)，特別是一下偏向技術(shù)性的技術(shù)博客。然而在我們的國家，博客于2002年被首次引入，一引入便在中國網(wǎng)民中掀起了濤濤浪潮，以極快的速度發(fā)展了起來。因為其做為一種特異的網(wǎng)絡(luò)表達方式，所以越來越受網(wǎng)民的青睞，至此博客的用戶數(shù)量在中國，一直以較高的速度增長著。由圖中可以看出：圖1.1博客用戶的發(fā)展基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第5頁。當(dāng)然這也是因為，博客特有的特點以及優(yōu)勢：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第5頁。開放共享性個人性交流平等性發(fā)布信息門檻性上傳即時性和溝通延時性經(jīng)過時代的發(fā)展，博客的使用人群也在發(fā)生著天翻地覆的變化，變得更加趨向于專業(yè)化，更加深度化，不少的學(xué)者、作者以及各種領(lǐng)域的頂尖專家都在通過博客，讓大眾了解到更加多更加詳細(xì)的專業(yè)性知識，這是一種新的文化傳遞方式。我們通過與他人的分享交流，不斷的拓展自身的知識。籍此，我相信博客存在的合理性，我們需要它，它將是我們共享知識信息的重要途經(jīng)。系統(tǒng)研究的意義及目標(biāo)因為經(jīng)過時代的發(fā)展，博客的使用人群更加趨向?qū)I(yè)化，所以我想通過當(dāng)前的博客系統(tǒng)，我從事互聯(lián)網(wǎng)事業(yè)的從業(yè)人員，打造我們的專業(yè)博客，通過本博客系統(tǒng)結(jié)識更加多志同道合，興趣相投的朋友，而且隨著越來越多具有專業(yè)知識的blog的出現(xiàn)，也讓我看到了，blog其中所蘊含的巨大信息價值，為不同專業(yè)的人群形成專業(yè)的博客，blog正以一種新的方式，在生活、學(xué)習(xí)和工作等各個方面改變著我們的傳統(tǒng)網(wǎng)絡(luò)以及我們的社會結(jié)構(gòu)，信息的交流不再無序，變得越來越有明確的選擇以及方向性，個人的思想與社群智慧的結(jié)合的成效越來越突出。它正在改變我們的生活。本次系統(tǒng)的開發(fā)目標(biāo)，主要的想法是以兩端進行開發(fā)，分別為web端以及admin端，它們分別有普通用戶以及管理員用戶進行分別操作。而web端和admin端，前端服務(wù)器以及后端服務(wù)器的方式進行開發(fā)，而其中web端以及admin端的客戶端都公用著同一個服務(wù)器端。其中管理員用戶主要對admin(后臺管理系統(tǒng))端進行操作，管理員用戶進入admin(后臺管理系統(tǒng))端后，可以實現(xiàn)查看用戶列表，對用戶列表的數(shù)據(jù)進行編輯、刪除功能，對用戶進行新增功能；對分類列表的刪除、編輯、新增的功能；對文章列表的數(shù)據(jù)進行編輯、刪除功能，對文章進行新增功能，對文章是否需要置頂、以及是否需要購買進行操作。普通用戶在進入web(博客展示系統(tǒng))端后，可以實現(xiàn)查看博客、評論博客、通過博客的評論與其他的用戶進行交流，可以查看通過不同日期進行歸檔的博客內(nèi)容，查看通過不同分類標(biāo)簽進行歸檔的博客內(nèi)容，可以實現(xiàn)查看個人信息功能，可以實基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第6頁?，F(xiàn)vip文章的購買功能?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第6頁。因此，博客系統(tǒng)中admin(后臺管理系統(tǒng))端主要有以下幾個功能模塊：實現(xiàn)登錄功能；（2）實現(xiàn)對用戶列表的增刪改查功能；（3）實現(xiàn)對分類列表的增刪改查功能；（4）實現(xiàn)對文章列表的增刪改查功能，是否需要購買功能。web(博客展示系統(tǒng))端主要有以下幾個功能模塊：（1）實現(xiàn)登陸注冊功能；（2）實現(xiàn)用戶退出功能；（3）實現(xiàn)查看個人信息功能；（4）實現(xiàn)通過時間節(jié)點進行文章歸檔功能；（5）實現(xiàn)通過標(biāo)簽進行文章歸檔功能；（6）實現(xiàn)vip文章購買功能；（7）實現(xiàn)文章評論功能；系統(tǒng)分析系統(tǒng)需求分析用戶角度分析在需求分析的過程中，我會以角色為主體來展開，通過示意圖的例子講其中的續(xù)期聯(lián)系展開來。這其中的幾個概念：角色：代表該事件的用戶例子：這是以角色為中心而展開的，方便我對各種需求有著更加直觀的理解。在這個博客系統(tǒng)的開發(fā)中，我設(shè)置了兩種權(quán)限：第一種是后臺系統(tǒng)管理員權(quán)限，負(fù)責(zé)管理用戶、分類、文章的增刪改查。第二種是前臺展示系統(tǒng)的普通用戶權(quán)限，可以查看個人信息，對文章進行評論、查看文章以及購買文章的權(quán)限。因而，博客系統(tǒng)中只有著兩種身份：一是博客的管理者，而是博客的閱讀者?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第7頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第7頁。圖2.1兩種角色之間的聯(lián)系普通用戶想要進入web(博客展示系統(tǒng))端，首先需要先進行博客賬號的注冊，通過郵箱信息、用戶姓名、密碼進行注冊。只有注冊完成了，才能進入系web端進行操作，否則將不能進行后續(xù)操作。當(dāng)用戶注冊成功之后，用戶可以相應(yīng)的實現(xiàn)更加多的新功能，如下圖中，就會有種相應(yīng)的展示，展示其中的權(quán)限：圖2.2普通用戶的權(quán)限用戶在查看文章的時候可以與其他的普通用戶進行互動交流。當(dāng)用戶在文章下留下評論時，其他用戶進行瀏覽時也能查看以及交流互動，繼而繼續(xù)進行交流。后臺管理用戶想要進入admin(后臺管理系統(tǒng))端，首先需要擁有提前設(shè)置好的用戶，通過該用戶進行后臺登錄，在登錄admin(后臺管理系統(tǒng))端后，就可以進行對用戶、分類、文章的操作了，若沒有相應(yīng)的用戶賬號，則不能登admin端的后臺管理系統(tǒng)進行相應(yīng)的操作。下圖是展示博客后臺的各種管理權(quán)限：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第8頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第8頁。圖2.3后臺管理用戶的權(quán)限后臺管理用戶的權(quán)限比較大，可以對用戶進行之際的操作，所以我們應(yīng)當(dāng)注意保護好個人信息以及小心操作。功能模塊分析admin端（博客后臺管理系統(tǒng)）博客后臺登錄模塊博客后臺系統(tǒng)的登錄必須是在創(chuàng)建數(shù)據(jù)庫的時候，先創(chuàng)建出一個admin賬號，然后我們使用該賬號才能進行博客后臺的首次登錄，只要首次登錄后，才能在博客后臺進行其他用戶的新增。而且我在服務(wù)器端寫了登錄驗證，將登錄的用戶名以及密碼進行了驗證，最后驗證賬號密碼成功后，會返回給前端一個token，進下接下來的頁面跳轉(zhuǎn)，在前端寫登錄的時候，必須要在往服務(wù)端發(fā)送異步請求的時候，添加一個請求攔截器，在異步請求的頭部信息中加入token令牌，這樣才能進行其他頁面的數(shù)據(jù)的異步請求，因為我在服務(wù)器端寫了一個token令牌的中間件驗證，若驗證失敗，服務(wù)端將會給客戶端發(fā)送一個狀態(tài)碼為401的錯誤。所以當(dāng)我們在用戶模塊新增了用戶的時候，新增用戶在登錄的時候也會得到一個token令牌，否則用戶將無法進行下一步的操作。而且用戶想在瀏覽器直接通過url地址的輸入直接跳轉(zhuǎn)到其他頁面也是不行的，因為我在前端的router路由組件中寫了路由守衛(wèi)，對沒用token令牌的用戶拒絕訪問，以此來實現(xiàn)減少權(quán)限的丟失。次功能模塊主要實現(xiàn)的功能是：后臺博客用戶的登錄；博客登錄后的管理；直接跳轉(zhuǎn)到了博客的welcome頁面；博客后臺管理的用戶模塊當(dāng)我們實現(xiàn)了博客后臺的登錄以后，我們可以對用戶數(shù)據(jù)進行進一步的操作了，基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第9頁。其中的主要功能：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第9頁。查看用戶列表，在查看用戶列表的這一個次功能模塊中，我通過對服務(wù)器提供的api接口進行了axios異步請求，講用戶的數(shù)據(jù)以數(shù)組的形式進行了獲取，并將數(shù)據(jù)的信息以for循環(huán)的方式渲染在了view視圖中。對個別用戶進行了編輯操作，在編輯操作的這一個次功能模塊中，我是通過當(dāng)用戶點擊編輯小按鈕的時候，頁面會出現(xiàn)彈窗，用戶可以在彈窗中將自己想修改的數(shù)據(jù)修改掉，在我的設(shè)定中，用戶名是不可以更改的，用戶的其他信息都可以更改，如郵箱和角色。當(dāng)用戶點解確定時候，我會將需要更改的信息提交到服務(wù)器端，對數(shù)據(jù)庫進行信息的修改。對個別用戶進行刪除操作，在刪除操作的這一個次功能模塊中，是當(dāng)用戶點擊刪除小按鈕的時候，會彈出一個刪除用戶的消息彈窗，只有當(dāng)用戶再次點擊確認(rèn)的時候，才會將要刪除的用戶信息刪除，這主要是為了防止用戶誤刪。新增用戶，在新增用戶的這一個次功能操作中，是當(dāng)用戶點擊添加用戶的按鈕時，會彈出一個彈窗，用戶依照彈窗中的表格填寫新用戶的信息就可以進行用戶的新增了。當(dāng)然需要說明的是，在所有需要輸入的操作中，在前端都寫一個輸入格式規(guī)則，以及提醒輸入規(guī)則，所以在用戶輸入的時候，會進行一次前端的驗證。其他模塊亦是如此。博客后臺管理的分類模塊當(dāng)前模塊也需要我們在實現(xiàn)登錄功能后，才能進行對此模塊的操作，此模塊主要是為了對文章的分類而建立的，為的是能對文章進行分類處理，使博客的操作更加的人性化。它其中的主要功能有：新建分類次功能模塊，此模塊主要功能為新建分類。分類列表次功能模塊，此模塊主要實現(xiàn)分類數(shù)據(jù)的渲染展示，也有著其他與用戶之間的交互功能，如點擊編輯小按鈕實現(xiàn)對分類信息的編輯，值得一提的是，點擊跳轉(zhuǎn)的時候，其實是跳轉(zhuǎn)到了新進分類的組件中，不過在組件中作了判斷，以此來實現(xiàn)區(qū)分。其中該次功能模塊還有刪除功能小按鈕以及添加分類小按鈕。博客后臺管理的文章模塊此功能模塊與分類模塊的寫法相似，都是用于數(shù)據(jù)的展示渲染以及對信息的增刪改的功能操作，所以就不過多進行闡述了。web端（博客展示系統(tǒng)）博客展示的登錄注冊模塊在我們想進入博客展示系統(tǒng)的時候，我們必須先注冊一個賬號，然后才能進行基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第10頁。登錄進入博客展示系統(tǒng)，至于為什么一開始就要進行注冊，是因為本系統(tǒng)有著文章購買功能，所以在所掌握的技術(shù)中，唯有通過用戶的token令牌的身份驗證，我們才能確定用戶的準(zhǔn)確身份，用來區(qū)分用不同的用戶，在我們進行了注冊登錄之后，我們就能進如入主頁面了?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第10頁。次功能模塊的主要功能實現(xiàn)是：用戶的注冊與登錄；跳轉(zhuǎn)到展示首頁；當(dāng)然在注冊登錄的時候，都會有文本格式的校驗。博客展示的首頁渲染模塊首頁渲染模塊，有著許多的小渲染展示以及功能的模塊，我將由上往下逐個說明，在首頁渲染模塊中，頂部是一個頂部導(dǎo)航欄，在頂部導(dǎo)航欄中有著首頁（當(dāng)前頁面）模塊的跳轉(zhuǎn)、歸檔模塊跳轉(zhuǎn)、標(biāo)簽?zāi)K跳轉(zhuǎn)、關(guān)于模塊跳轉(zhuǎn)以及顯示當(dāng)前用戶名，其中顯示用戶名中是一個可以點擊的下拉列表，在列表中有著兩個小功能模塊，分別是個人信息展示的跳轉(zhuǎn)以及退出登錄模塊。往下是主體渲染的部分，在這里可以通過vue的router-view實現(xiàn)單頁面的跳轉(zhuǎn)，在這里我使用了hash跳轉(zhuǎn)，主要是在router.js中實現(xiàn)子組件的跳轉(zhuǎn)展示?，F(xiàn)在展示的是文章信息列表。再往下是網(wǎng)站信息的底部展示，在這里有計算文章總數(shù)的功能、展示置頂文章的功能以及展示最新文章的功能。博客展示的文章列模塊當(dāng)前模塊主要是對首頁中的文章列表渲染進行詳細(xì)的解釋，在實現(xiàn)的文章列渲染中，需要介紹到的是：在每一個文章卡片上都會有在發(fā)表文章時已經(jīng)寫好的文章標(biāo)簽渲染在文章卡片上，當(dāng)我們鼠標(biāo)接觸文章卡片的主要顯示的空白處時，當(dāng)時發(fā)表文章時的文章摘要就會顯示在文章卡片的空白處。是在文章卡片上，有個別文章卡片會顯示有vip字樣，當(dāng)文章卡片上顯示有該字樣的時候，說明該文章卡片需要我們購買后，才能進行文章詳情展示頁面進行查看文章，而其中的邏輯原理是，當(dāng)我們點擊需要購買的文章卡片是，會先進行判斷，判斷當(dāng)前用戶是否有購買該文章，當(dāng)用戶的購買記錄中有購買該文章的時候，便直接跳轉(zhuǎn)進入文章詳情頁面，而當(dāng)用戶沒有購買記錄的時候，會彈出彈窗詢問用戶是否進行購買，當(dāng)用戶點擊確定的時候，會往后臺發(fā)送一個購買請求，后臺收到信息后，會返回200字段，當(dāng)客戶端收到該字段后，會再一次詢問用戶是否進行購買，當(dāng)用戶再次確定購買時，會再一次向后端發(fā)送請求數(shù)據(jù)，后端會返回一個支付寶的支付頁面讓用戶進行支付購買，該購買功能是基于支付寶的沙箱版的，并不是真實的支付，最后支付成功后，用戶將會跳轉(zhuǎn)到文章詳情頁面，進行文章的閱讀。博客展示的歸檔模塊基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第11頁。當(dāng)前模塊是通過以年為單位的時間軸，對文章信息進行展示，以時間軸進行排序。當(dāng)然內(nèi)部會也會以時間發(fā)表的先后順序進行信息的排序?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第11頁。博客展示的標(biāo)簽?zāi)K當(dāng)前模塊是以標(biāo)簽進行文章信息的分類排序。博客展示的個人信息模塊該模塊將展示用戶的個人信息，以及用戶購買了的文章的id信息。系統(tǒng)技術(shù)分析在進行項目開發(fā)之前，我們都會有一個繞不開的話題——技術(shù)選型，現(xiàn)階段對于開發(fā)一個系統(tǒng)有著很多技術(shù)可以挑選，有新進冒出的，也有經(jīng)過前人一段時間的沉淀有著良好的開發(fā)生態(tài)圈的。在系統(tǒng)設(shè)計的開端，咱們需要對系統(tǒng)進行刨析，依據(jù)系統(tǒng)的實踐狀況對現(xiàn)有系統(tǒng)的需要進行分析，抉擇出適宜系統(tǒng)的技術(shù)框架體系。在前端框架方面，現(xiàn)階段比較流行的框架有Vue.js和angular.js，以及react.js庫，它們都是以js為基礎(chǔ)沿伸出來的前端框架以及js庫，在現(xiàn)階段最流行的這三個前端框架以及js庫中，都有著各自的特色，以及良好的開發(fā)生態(tài)圈。而我將拔取vue.js做為本系統(tǒng)的前端框架，主要是因為vue.js的以下特點：（1）插件化；（2）漸進式框架；（3）指令化；（4）雙向數(shù)據(jù)綁定。因為vue.js有著雙向數(shù)據(jù)綁定，以及由數(shù)據(jù)進行驅(qū)動的特性，所以vue的技術(shù)框架也比較的適用，而且我個人也是對vue.js比較熟悉，所以前端框架方面就選擇了vue.js。而在服務(wù)端框架構(gòu)建的服務(wù)器的技術(shù)選型中，也有著很多成熟的技術(shù)框架可以挑選，比如現(xiàn)在主流的技術(shù)框架有Java、PHP、Node.js等，從自身角度出發(fā)的話，因為一直以前端方面的工作為學(xué)習(xí)驅(qū)動，所以對javascript這門語言的了解相較愈加深入，所以我選擇了node.js做為后端框架，主要是其中的express框架。而且node.js也有著它的優(yōu)點：（1）事件驅(qū)動；（2）適用于實時的數(shù)據(jù)交互應(yīng)用；（3）以js代碼為運行環(huán)境；（4）單進程、單線程；（5）而且也依賴于谷歌的v8引擎；（6）非阻塞i/o。所以服務(wù)端的框架，我選擇了node.js的express框架。我選擇了mongoDB作為開發(fā)用的數(shù)據(jù)庫，因為它是所有非關(guān)系型數(shù)據(jù)庫中最接近關(guān)系型數(shù)據(jù)庫，它有著以下的特點：（1）數(shù)據(jù)的最終一致性；（2）特殊的存儲結(jié)構(gòu)。（3）性能優(yōu)越，可以快速獲取數(shù)據(jù)；（4）有著豐富的第三方支持；（5）有著大容量的存儲；（6）保證用戶能快速地訪問查詢。所以在數(shù)據(jù)庫方面我抉擇了mongoDB數(shù)據(jù)庫。基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第12頁。Node.js簡介基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第12頁。在初期，作為為服務(wù)端腳本語言的PHP備受web運用的程序開發(fā)者喜愛，而javasript事先始終被開發(fā)者們以為只是前端的一種腳本開發(fā)語言，但是直到node.js的出現(xiàn)，javascript這一門語言越來越備受關(guān)注。其中node.js基于chrome的javascipt運轉(zhuǎn)機制的平臺上的，它可以用于構(gòu)建出可擴大的、疾速的、網(wǎng)絡(luò)方面的應(yīng)用程序。Node.js是使用著一種事件驅(qū)動、非阻塞的I/O模型，這將跨分布式設(shè)施的數(shù)據(jù)密集型實時應(yīng)用愈加的高效、完善和輕量。而且從原理上講，node.js其實是對chrome的瀏覽器引擎的二次封裝，它可以實現(xiàn)類服務(wù)器的環(huán)境，也可以用來實現(xiàn)可擴展的應(yīng)用。而且在瀏覽器的運行環(huán)境中，javasrcipt的代碼就是由瀏覽器引擎進行解析的，而node.js就是提供了這樣的一種類似javascrip的引擎解析器，以此來完成與瀏覽器相同的性能。與此同時，它也是一種非常特殊的運轉(zhuǎn)環(huán)境。它為前端javascrip代碼提供了各種的服務(wù)接口，而且也令前端的開發(fā)者可以更容易上手后端的開發(fā)思維了。Node.js中的express框架Express是一個node.js作為后臺服務(wù)器的一個開源的框架，所以一直受到很多開發(fā)者的歡迎。只要我們使用這個框架中所特有的一些特性，我們就可以快速地開發(fā)一些比較全面的web應(yīng)用程序了，和絕大多數(shù)的web應(yīng)用開發(fā)框架一樣，express框架幫我們封裝好了很多的方法，將許多復(fù)雜繁瑣的代碼簡化了，讓我們對代碼的編程更加的輕松，但是express框架最突出的地方，是它的路由機制。那么什么是路由機制呢？是指我們?nèi)绾瓮ㄟ^url地址實現(xiàn)客戶端的數(shù)據(jù)請求響應(yīng)，其中的http請求有著多種的方式，分別是get、delete、post、put等。它的具體結(jié)構(gòu)是：app.method(path,[callback...],callback)。在這個結(jié)構(gòu)中，app是express的實例對象，method是HTTP中的請求數(shù)據(jù)方式（POST、GET、DELETE、PUT）,path是服務(wù)器上的url請求路徑，而callback是當(dāng)請求路徑匹配時就會執(zhí)行的函數(shù)。由于express路由機制的出現(xiàn)，所以對于凸顯express的可用性很多幫助。Vue.js的介紹在vue.js等各種框架出現(xiàn)之前，我們想對DOM元素進行操作的時候，必須要經(jīng)過繁雜的選擇器去進行操作，而且還要通過逐級的操作去還原出服務(wù)器需要的JSON基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第13頁。數(shù)據(jù)格式，這種操作不但繁瑣而且極其容易出現(xiàn)錯誤。然而我們可以通過vue.js特有的特性響應(yīng)式雙向綁定數(shù)據(jù)，以此來實現(xiàn)實時地反映數(shù)據(jù)的變化，而且將這種變化映射到數(shù)據(jù)源上，避免對DOM元素的選擇器的復(fù)雜操作，大大簡化我們開發(fā)人員對于web應(yīng)用的開發(fā)難度，提高了前端工程師的開發(fā)效率，降低了開發(fā)成本以及時間周期。REF_Ref7549\r\h[4]而且當(dāng)vue.js與vue-router路由相結(jié)合，配合上webpack前端打包工具，將大大簡化我們的開發(fā)難度。基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第13頁。而且它的優(yōu)點也有很多：vue.js的數(shù)據(jù)驅(qū)動和數(shù)據(jù)響應(yīng)原理DOM是數(shù)據(jù)的一種自然映射：圖2.4DOM數(shù)據(jù)的映射原理在這之中，如果沒有viewmodel，我們就要手動修改DOM，以此來實現(xiàn)vue.js的數(shù)據(jù)驅(qū)動。Vue.js的數(shù)據(jù)響應(yīng)原理，數(shù)據(jù)驅(qū)動視圖的更新：圖2.5vue.js數(shù)據(jù)響應(yīng)原理組件化Vue.js可以將一個獨立的功能模塊進行組件化，實際就是將同一功能的代碼進基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第14頁。行封裝，使其可以重新復(fù)用；而且每一個vue.js的組件代碼片段，都著一個工程性的目錄，使我們能快速定位所需的組件，以及它所需要的資源；頁面不過是組件的容器，組件可以嵌套自由組合形成完整的頁面?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第14頁。當(dāng)然還有很多特點，這里就不一一列舉了。MongoDB數(shù)據(jù)庫簡介當(dāng)今社會的發(fā)展，對網(wǎng)絡(luò)惡的依賴越來越突出，而構(gòu)建網(wǎng)絡(luò)的基礎(chǔ)實際上是各種各樣的數(shù)據(jù)，因此數(shù)據(jù)的存儲顯得尤為重要，而現(xiàn)今大規(guī)模的信息數(shù)據(jù)對數(shù)據(jù)庫的要求越來越高了。然而在這一方面，傳統(tǒng)的數(shù)據(jù)顯得越來越吃力了。而mongoDB的最主要特點是：數(shù)據(jù)存儲方便、易使用、易部署高新能、開源設(shè)計以及它面向集合的存儲、支持完全索引、支持動態(tài)的查詢、自由的模式等優(yōu)勢，正受著越來越多公司的歡迎以及開發(fā)人員個人的喜愛。mongoDB有著一個非常靈敏、可擴充和強大的數(shù)據(jù)存儲區(qū)，它匯合了關(guān)系數(shù)據(jù)庫的許多最有用的功能與能力的擴充，例如：排序和次索引范疇查詢。MongoDB也有著強大的分片性能，例如：空間的索引和支持處置樣式匯集的內(nèi)裝。并且mongoDB是一種介乎于非關(guān)系數(shù)據(jù)庫和關(guān)系數(shù)據(jù)庫之間的產(chǎn)品，是一切非關(guān)系數(shù)據(jù)庫當(dāng)中最想關(guān)系數(shù)據(jù)庫，功能最全面豐富的。而且mongoDB對應(yīng)數(shù)據(jù)的存儲方式并沒有太大的要求，現(xiàn)在主流的json數(shù)據(jù)格式的存儲方式也是十分適合mongoDB進行存儲的，MongoDB的查詢性能也非常的強大以及豐碩，它簡直能夠支持任何類型的查詢，完成類似于面向?qū)ο蟮牟樵兡Ｊ健ｉ_發(fā)工具選擇現(xiàn)在當(dāng)下的開發(fā)工具的選擇有著很多的種類，本系統(tǒng)選擇使用VScode作為開發(fā)工具。因為VScode是一種開源的開發(fā)工具，它具有豐富的第三方插件，安裝插件的方式十分方便，插件的安裝有著十分詳細(xì)的介紹，占用內(nèi)存很低，項目啟動的速度和打開速度都相對來說比較快捷，全平臺，內(nèi)置了對各種語言的強大支持，所以在此次開發(fā)中，我選擇了VScode作為開發(fā)工具?？尚行苑治鼋?jīng)濟可行性分析本系統(tǒng)的建設(shè)投資成本主要包括以下內(nèi)容：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第15頁。項目的前期準(zhǔn)備工作?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第15頁。項目的系統(tǒng)選型所需投資It硬件的投資項目系統(tǒng)測試的投資項目系統(tǒng)管理的投資項目系統(tǒng)的管理投資當(dāng)前項目所需的現(xiàn)行條件并不多，無論是軟硬件設(shè)施的要求都并不大，域名加上服務(wù)器的支出，一年也是300左右，所以項目的開發(fā)是可行的。技術(shù)可行性本系統(tǒng)使用了vue+express+mongoDB+elementui+axios等技術(shù)做為技術(shù)棧。這些技術(shù)都是開源的技術(shù)框架，而且技術(shù)棧的生態(tài)圈也發(fā)展的比較良好，在npm第三方包工具中，也有著很多的包插件，有著許多封裝好的工具插件，所以系統(tǒng)開發(fā)起來較為簡單，也很容易實現(xiàn)，而且現(xiàn)在所選著的技術(shù)，也是一些比較新興的技術(shù)棧，可以很好的保證系統(tǒng)以后的迭代更新，確保系統(tǒng)的開發(fā)技術(shù)的可復(fù)用性。操作可行性本系統(tǒng)基于vue.js作為前端技術(shù)框架，視圖層采用了elementui作為渲染ui，其中elementui這個渲染框架是一個很出色的ui框架，而且它是基于vue.js開發(fā)的，所以可以很好的和vue.js技術(shù)框架配合，能很好的實現(xiàn)系統(tǒng)的功能，而且基于elementui框架的組件ui的功能也設(shè)計的很好，使用起來十分的方便，對用戶的體驗度也十分完好。法律可行性本系統(tǒng)所有的技術(shù)棧都是基于開源的，無論是前后端的框架還是技術(shù)棧，所以我們無需為技術(shù)的知識產(chǎn)權(quán)問題擔(dān)心，而且博客系統(tǒng)的開發(fā)概念也沒有造成侵權(quán)，在其他硬件設(shè)施方面亦是如此。基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第16頁。系統(tǒng)設(shè)計基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第16頁。系統(tǒng)整體設(shè)計系統(tǒng)分析本系統(tǒng)此次的開發(fā)主要是采用mvvm的系統(tǒng)模式結(jié)構(gòu)，當(dāng)前結(jié)構(gòu)的主要組成部分是由以下幾個部分構(gòu)成：前端的框架：主要是由vue.js負(fù)責(zé)前端視圖層的渲染，以及其中用戶與客戶端交互的業(yè)務(wù)邏輯代碼。后端的框架：是由node.js中的express框架來負(fù)責(zé)服務(wù)器的開發(fā)，主要是進行數(shù)據(jù)的業(yè)務(wù)邏輯處理，和與數(shù)據(jù)庫的數(shù)據(jù)對接，以及為前端的頁面交互提供返回數(shù)據(jù)的api接口。數(shù)據(jù)庫服務(wù)層：將使用mongoDB作為數(shù)據(jù)存儲的重要工具，因為它能應(yīng)對中各種各樣的存儲方式。現(xiàn)在流行的設(shè)計框架也有很多，其中常見的是mvc、mvp和mvvm設(shè)計模式，而本系統(tǒng)選擇的是mvvm設(shè)計模式，mvvm是model--view-viewmodel的簡寫。因為微軟的wpf帶來了新的技術(shù)體驗。所以說mvvm是由mvp模式和wpf結(jié)合的應(yīng)用方式發(fā)展演變過來的一種新型的框架。MVVM和MVP的關(guān)系：

其實mvvm模式與mvp模式基本相似。其中的差別是mvvm是有數(shù)據(jù)驅(qū)動的，它將改變直接展示view視圖中。那我們就可以不用特地的去處理數(shù)據(jù)了，它將自動在view視圖中展現(xiàn)。MVP架構(gòu)：

View：實際上對應(yīng)著其中的activity方面，用于view視圖的繪制，以及其中與用戶的交互，其中業(yè)務(wù)邏輯依然交由presenter管理。圖3.1mvp模式雖然設(shè)計模式的想法是view與presenter實行單一相對的方式，但是最終在實現(xiàn)邏輯的時候，還是常常由view對應(yīng)多個presenter基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第17頁。MVVM架構(gòu)：

Model：代表你的基本業(yè)務(wù)邏輯

View：顯示內(nèi)容

ViewModel：將前面兩者聯(lián)系在一起的對象基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第17頁。圖3.2mvvm模式其中viewmodel是集合了對兩個方面的處理，分別是數(shù)據(jù)以及動作邏輯代碼。將數(shù)據(jù)與view視圖實現(xiàn)交互。mvvm模式的優(yōu)點：（1）低耦合；（2）可重用性；（3）獨立開發(fā)；（4）可測試；因此本系統(tǒng)選擇使用mvvm設(shè)計模式。開發(fā)框架技術(shù)介紹通過上述的介紹，我們可以得知本系統(tǒng)使用的技術(shù)選型是vue.js+node.js的express+mongoDB+axios+elementui。在這些技術(shù)選型中我們再詳細(xì)介紹一下vue.js技術(shù)，以及新引出的axios和elementui框架。首先，vue.js它采用的是以漸進式渲染的方法，以及數(shù)據(jù)為驅(qū)動的形式，而且是一種新的mvvm模式框架。屬于一種較為輕量級的前端框架，與其他的重量級的前端框架不同，它比較重視前后端的低耦合和對于view層的數(shù)據(jù)變化。Axios是一種網(wǎng)絡(luò)請求庫，現(xiàn)階段主要的網(wǎng)絡(luò)請求庫有axios、ajax、fetch，其中ajax是最早出現(xiàn)，也是沿用最多的網(wǎng)絡(luò)請求庫，但是它本身是主要針對mvc模式編程的，不符合本系統(tǒng)使用的mvvm模式，而且其本身是基于xhr進行開發(fā)和封裝的，而xhr本身的架構(gòu)并不是十分的清晰，而且已經(jīng)有了fetch進行了代替，所以本次開發(fā)不選擇使用ajax網(wǎng)絡(luò)請求庫。而fetch對于400以及500的錯誤狀態(tài)碼都會默認(rèn)它是成功的，所以本系統(tǒng)也不使用fetch網(wǎng)絡(luò)請求庫。而axios是基于node.js創(chuàng)建請求的，與我們的后端語言十分搭配，且客戶端支持防止csrf和提供了一些并發(fā)請求的接口，所以本系統(tǒng)選擇使用axios網(wǎng)絡(luò)請求庫。Elementui是一套基于vue.js進行開發(fā)的ui框架，有著非常絢麗的組件樣式，使用這一套ui組件庫可以是我們的前端開發(fā)事件成本大大節(jié)省，而且ui組件本身的樣式也寫的十分絢麗，所以現(xiàn)階段很多公司的開發(fā)都會搭配上一部分的ui組件基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第18頁。庫。當(dāng)然因為elementui的開發(fā)基礎(chǔ)也是基于vue.js，所以十分適合本系統(tǒng)的開發(fā)?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第18頁。最后還需要介紹的是webpack這一個前端打包工具，因為本系統(tǒng)使用了vue-cli這個手腳架去進行開發(fā)的，所以webpack也在手腳架中包含了，但是我們有必要繼續(xù)介紹一下這個打包工具，因為這是項目開發(fā)必不可少的一部分。它可以使我們所開發(fā)出來的項目的大小進行大大的壓縮，減少運維上線的壓力。數(shù)據(jù)庫設(shè)計1、定義（數(shù)據(jù)字典）數(shù)據(jù)字典組成：數(shù)據(jù)存儲、數(shù)據(jù)項、數(shù)據(jù)結(jié)構(gòu)、處理過程以及數(shù)據(jù)流。數(shù)據(jù)字典的作用：將我們存儲數(shù)據(jù)的方式更加文體化；可以讓數(shù)據(jù)的管理用戶更加漸變的查詢各種需要的信息；對數(shù)據(jù)的管理存儲；對數(shù)據(jù)的存取進行了管控，設(shè)置了多種權(quán)限，在某些意義上數(shù)據(jù)字典控制著數(shù)據(jù)的存儲；對數(shù)據(jù)庫的存儲設(shè)計有著很大的作用；為數(shù)據(jù)的存儲方式，提供了合適的標(biāo)準(zhǔn)；所以，數(shù)據(jù)庫的核心是數(shù)據(jù)字典，所以要設(shè)計數(shù)據(jù)字典就要全面考慮所有的數(shù)據(jù)，建立數(shù)據(jù)字典是數(shù)據(jù)庫設(shè)計需求分析階段必不可少的。2、數(shù)據(jù)庫設(shè)計E-R圖假如我們想以展示圖的方式將用用戶的數(shù)據(jù)展現(xiàn)出來，那么首先我們需要將一個數(shù)據(jù)庫的關(guān)系表新建出來，進行建立的進程我們可以通過采用面向?qū)ο蟮姆绞浇?。然后我再以樹狀的?shù)據(jù)存儲結(jié)構(gòu)將數(shù)據(jù)存儲起來。這樣可以更加直觀的對需求的做出反應(yīng)。這些都是通過使用er圖來描述實體數(shù)據(jù)的。是通過概念來對具體的模塊和操作的方法進行展示的，都不會涉及其中的實現(xiàn)。其中er圖稱為數(shù)據(jù)的存儲模式，我將將模塊分為以下三種:。當(dāng)前系統(tǒng)所涉及的“實體”包括：用戶：用戶名、郵箱、密碼、用戶角色等文章：評論內(nèi)容、文章信息、文章發(fā)表時間、文章更新時間、文章是否置頂、文章標(biāo)題、文章購買需求、文章作者、文章分類等等基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第19頁。因此通過結(jié)合本系統(tǒng)的各個功能模塊與實體之間的聯(lián)系，通過分析可以得出：用戶關(guān)系表、文章關(guān)系表、博客關(guān)系表等數(shù)據(jù)庫的關(guān)系模型。基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第19頁。以下是總體E-R圖：總體E-R圖：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第20頁。圖3.3總體圖基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第20頁。主要的表結(jié)構(gòu)用戶表數(shù)據(jù)結(jié)構(gòu)表3.1用戶數(shù)據(jù)表字段名類型說明_idObjectId用戶的idstateBoolean用戶的使用狀態(tài)usernameString用戶名emailString用戶的郵箱passwordString用戶的密碼roleString用戶角色文章表數(shù)據(jù)結(jié)構(gòu)基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第21頁。表3.2文章數(shù)據(jù)表基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第21頁。字段名類型說明_idObjectId文章的idcategoriesMixed文章的分類bodyString文章的主體內(nèi)容titleString文章的標(biāo)題summaryString文章的摘要authObjectId文章的作者createdAtDate文章的創(chuàng)建時間updatedAtDate文章的更新時間文章分類表數(shù)據(jù)結(jié)構(gòu)表3.3文章分類表字段名類型說明_idObjectId文章分類的idtitleString文章分類的標(biāo)題文章評論表的數(shù)據(jù)結(jié)構(gòu)表3.4文章評論表字段名類型說明_idObjectId文章評論的iduidObjectId文章評論的關(guān)聯(lián)用戶idaidObjectId文章評論的關(guān)聯(lián)文章idcontentString評論的內(nèi)容createdAtDate評論的創(chuàng)建時間文章訂單表的數(shù)據(jù)結(jié)構(gòu)表3.5文章訂單表字段名類型說明_idObjectId文章訂單的idaidArray文章訂單的文章關(guān)聯(lián)iduidString文章訂單的用戶關(guān)聯(lián)id系統(tǒng)詳細(xì)設(shè)計Admin端（博客后臺系統(tǒng)）博客后臺登錄模塊設(shè)計流程第一步是在系統(tǒng)的基礎(chǔ)上創(chuàng)建好賬號，用戶憑此賬號登錄，第二步是登錄成功與否的判斷，第三步登錄成功后的跳轉(zhuǎn)，第四步用戶可操作列表的加載?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第22頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第22頁。圖3.4登錄模塊流程圖博客后臺的用戶管理模塊 第一步是通過點擊用戶列表的功能，加載出用戶列表，第二步實現(xiàn)用戶的新增操作，第三步判斷用戶新增是否成功，第四步在成功后再次加載的用戶列表中，實現(xiàn)對用戶的編輯操作，第五步，對用戶進行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進行刪除操作。圖3.5用戶管理模塊流程圖博客后臺管理的分類模塊 第一步是通過點擊分類列表的功能，加載出分類列表，第二步實現(xiàn)分類的新增操作，第三步判斷分類新增是否成功，第四步在成功后再次加載的分類列表中，實現(xiàn)對分類的編輯操作，第五步，對分類進行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進行刪除操作。基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第23頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第23頁。圖3.6分類模塊流程圖博客后臺管理的文章模塊 第一步是通過點擊文章列表的功能，加載出文章列表，第二步實現(xiàn)文章的新增操作，第三步判斷是否需要設(shè)定收費操作，第四步在設(shè)計后確認(rèn)新增，第五步，再次加載文章列表，并且進行編輯操作，第六步，對文章進行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進行刪除操作。圖3.7文章模塊的流程圖Web端（博客展示系統(tǒng)）登陸注冊模塊的流程圖：第一步，我們需要從登錄頁面進入到注冊頁面，在注冊頁面中進行用戶的注冊；第二步，判斷是否注冊成功，成功就跳轉(zhuǎn)至登錄界面，并且彈出注冊成功的提示框；第三步，用戶通過輸入賬號進行登錄；第四步，判斷用戶是否登錄成功，成功后就跳轉(zhuǎn)到展示頁面的首頁，并且彈出消息提示窗；基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第24頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第24頁。圖3.8登錄注冊模塊流程圖文章信息模塊的流程圖第一步，點擊文章卡片；第二步，判斷文章是否為vip文章，若不為vip文章，則直接進行跳轉(zhuǎn)至文章詳情頁的行為，若為vip文章，則彈出彈框詢問是否購買文章；第三步，判斷是否確認(rèn)購買文章，若購買，則彈出再次確認(rèn)購買彈框，若不購買，則直接返回首頁；第四步判斷是否確認(rèn)購買文章，若確認(rèn)購買，則跳轉(zhuǎn)至支付寶支付頁面，若不購買，則跳轉(zhuǎn)回首頁；第五步，支付寶支付成功后，先跳轉(zhuǎn)至支付寶的支付成功頁面5秒，然后跳轉(zhuǎn)至本系統(tǒng)的支付成功頁面；第六步，點擊支付成功頁面的返回按鈕，返回到系統(tǒng)的登錄頁，登錄后點擊文章，便可以進入已購買的文章詳情頁。圖3.9文章信息模塊流程圖文章歸檔模塊的流程圖第一步，在系統(tǒng)頁面的導(dǎo)航欄中，點擊歸檔導(dǎo)航，進入歸檔頁面；第二步，進入歸檔頁面后，頁面顯示歸檔好的文章信息；第三步，點擊文章信息條，進入文章詳情頁面?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第25頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第25頁。圖3.10文章歸檔模塊流程圖文章標(biāo)簽?zāi)K的流程圖第一步，在系統(tǒng)頁面的導(dǎo)航欄中，點擊標(biāo)簽導(dǎo)航，進入標(biāo)簽頁面；第二步，進入標(biāo)簽頁面后，頁面顯示按標(biāo)簽歸檔好的文章信息；第三步，點擊文章信息條，進入文章詳情頁面。圖3.11文章標(biāo)簽?zāi)K流程圖個人信息模塊以及登出模塊的流程圖第一步，點擊系統(tǒng)頁面的右上角的用戶名，彈出個人信息按鈕以及退出按鈕；第二步，點擊個人信息按鈕，進入個人信息的頁面，個人信息頁面將展示用戶的個人信息；或者點擊登出按鈕，實現(xiàn)用戶登出，跳轉(zhuǎn)至系統(tǒng)的登錄頁面。圖3.12個人信息模塊以及登出模塊流程圖基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第26頁。主要功能的實現(xiàn)基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第26頁。Admin端（博客后臺系統(tǒng)）博客后臺登錄模塊前端的登錄校驗，是elementui的寫法:圖4.1登錄模塊部分渲染代碼前端發(fā)起登錄以及跳轉(zhuǎn)到首頁的邏輯代碼：圖4.2登錄模塊部分前端邏輯代碼前端的請求攔截器（實現(xiàn)token的請求頭掛載）：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第27頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第27頁。圖4.3登錄模塊部分請求攔截器代碼前端的路由守衛(wèi)：圖4.4登錄模塊前端路由守衛(wèi)代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第28頁。后端登錄接口的部分邏輯代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第28頁。圖4.5登錄模塊部分邏輯代碼后端中間件的token驗證部分代碼：圖4.6登錄模塊token驗證代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第29頁。博客后臺用戶列表模塊：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第29頁。頁面渲染的部分代碼：圖4.7用戶列表模塊部分渲染代碼部分用戶列表頁前端邏輯代碼：圖4.8用戶模塊前端部分邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第30頁。后端的部分接口邏輯代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第30頁。圖4.9用戶模塊后代api入口代碼圖4.10用戶模塊部分后端邏輯代碼博客后臺的分類模塊前端分類模塊的部分渲染代碼：圖4.11分類模塊部分渲染代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第31頁。前端的部分邏輯代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第31頁。圖4.12分類模塊部分前端邏輯代碼后端的部分api接口邏輯代碼：圖4.13分類模塊部分api入口代碼圖4.14分類模塊部分后端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第32頁。博客后臺管理的文章模塊基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第32頁。前端部分渲染代碼：圖4.15文章模塊部分渲染代碼前端的部分邏輯代碼：圖4.16文章模塊部分前端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第33頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第33頁。后端的部分api邏輯代碼：圖4.17文章模塊部分后端api入口代碼圖4.18文章模塊部分后端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第34頁。Web端（博客展示系統(tǒng)）基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第34頁。博客展示的登錄注冊模塊前端的部分邏輯代碼：圖4.19登錄注冊模塊部分前端邏輯代碼前端的部分渲染代碼：圖4.20登錄注冊模塊部分前端渲染代碼后臺的部分api接口邏輯代碼:圖4.21登錄注冊模塊部分后端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第35頁。博客展示的首頁渲染模塊基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第35頁。前端的部分邏輯代碼：圖4.22首頁渲染模塊部分前端邏輯代碼前端的部分渲染代碼：圖4.23首頁渲染模塊部分前端渲染代碼后臺的部分api邏輯代碼:圖4.24首頁渲染模塊部分后端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第36頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第36頁。圖4.25首頁渲染模塊部分后端api入口邏輯代碼博客展示的文章列表模塊前端的部分邏輯代碼：圖4.26文章模塊部分前端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第37頁。前端的部分邏輯代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第37頁。圖4.27文章模塊部分前端渲染代碼后端的部分api邏輯代碼：圖4.28文章模塊后端部分api邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第38頁。博客展示的歸檔模塊基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第38頁。前端的部分渲染代碼：圖4.29歸檔模塊部分前端渲染代碼前端的部分邏輯代碼：圖4.30歸檔模塊部分前端邏輯代碼后端的部分api邏輯代碼：圖4.31歸檔模塊部分后端api邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第39頁。博客展示的標(biāo)簽?zāi)K基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第39頁。前端的部分渲染代碼：圖4.32標(biāo)簽?zāi)K的部分前端渲染代碼前端的部分邏輯代碼：圖4.33標(biāo)簽?zāi)K的部分前端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第40頁。后端的部分api接口代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第40頁。圖4.34標(biāo)簽?zāi)K的部分后端api邏輯代碼博客展示的個人信息模塊前端的部分邏代碼：圖4.35個人信息模塊部分前端邏輯代碼基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第41頁。前端的部分渲染代碼：基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第41頁。圖4.36個人信息模塊的部分前端渲染代碼后臺的部分api接口邏輯代碼：圖4.37個人信息模塊的部分后端邏輯代碼系統(tǒng)測試測試概要現(xiàn)在無論什么新的開發(fā)程序在進行向外推廣的時候，都會進行對程序的測試，基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第42頁。這也是一個非常重要的環(huán)節(jié)，因為誰也不能保證程序不會出錯，而且這是一個新推出的程序，所以我們要進行程序的設(shè)定。因為程序測定的目的是為了測試程序的本身是否有需要改進的地方或者留有嚴(yán)重的bug?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第42頁。測試方法此次進行程序的測試方法是進行線上的測試方法，測試的主要瀏覽器環(huán)境是chrome瀏覽器環(huán)境。沒有在瀏覽器處設(shè)置任何禁用。系統(tǒng)是用阿里云部署的服務(wù)器，我會在瀏覽器的url地址進行系統(tǒng)的登錄，在此處先貼出兩個不同功能系統(tǒng)的網(wǎng)絡(luò)地址出來：web端：14:9999/admin端：14:9997/測試用例admin端（博客管理系統(tǒng)）系統(tǒng)一部分的測試用例表，如表5-1所示：測試功能預(yù)期結(jié)果實際結(jié)果在登錄界面進行登錄進入系統(tǒng)welcome頁面成功進入系統(tǒng)welcome頁面展示用戶信息列表展示信息展示信息成功編輯用戶信息編輯用戶信息成功成功編輯用戶信息刪除用戶信息刪除用戶信息成功成功刪除用戶信息新增用戶信息新增用戶信息成功成功新增用戶信息新建標(biāo)簽分類新建標(biāo)簽分類成功成功新建標(biāo)簽分類發(fā)表新文章發(fā)表新文章成功成功發(fā)表新文章編輯文章編輯文章成功成功編輯文章刪除文章刪除文章成功成功刪除文章退出登錄測試退出登錄成功成功退出登錄表5.1admin端系統(tǒng)測試web端（博客展示系統(tǒng)）系統(tǒng)的一部分的測試用例表，如表5-2所示：測試功能預(yù)期結(jié)果實際結(jié)果注冊用戶注冊用戶成功成功注冊用戶用戶登錄用戶登錄成功成功登錄用戶博客首頁渲染博客首頁渲染成功成功博客首頁渲染文章購買功能測試文章購買成功成功購買文章博客時間線歸檔功能博客歸檔成功成功博客歸檔博客標(biāo)簽歸檔功能博客標(biāo)簽歸檔成功成功博客標(biāo)簽歸檔博客個人信息展示博客個人信息展示成功成功展示博客個人信息用戶退出功能用戶退出成功成功退出用戶表5.2web端的系統(tǒng)測試基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第43頁。性能測試基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第43頁。新能測試主要是以系統(tǒng)在不同運行環(huán)境下的運行速度、在與服務(wù)器上部署后，進行網(wǎng)絡(luò)請求后的系統(tǒng)網(wǎng)絡(luò)響應(yīng)時間、用戶的并發(fā)數(shù)增多時等等的系統(tǒng)承載性能，實現(xiàn)通過測試尋找錯誤的bug，在下一系列的版本進行修正，以及更好的提高系統(tǒng)的性能，提高用戶的使用體驗。網(wǎng)絡(luò)請求響應(yīng)時間：本系統(tǒng)是部署在阿里云的云服務(wù)器上的，所以服務(wù)器的網(wǎng)絡(luò)安全性是有所保障的，在系統(tǒng)被入侵的方面暫時不需要擔(dān)心，而在網(wǎng)絡(luò)請求的響應(yīng)時間方面，將用chrome瀏覽器進行請求的測試，在下圖可以看出對加載登錄頁面的總體請求請求返回時間不超過一秒。登錄進入展示頁面的首頁的請求加載時間，在下圖也可以看出，也只是1秒多一點，所以總體來說網(wǎng)絡(luò)請求響應(yīng)的性能是屬于比較優(yōu)越的。圖5.1瀏覽器測試圖（1）圖5.2瀏覽器測試圖（2）系統(tǒng)不同環(huán)境的運行速度：本系統(tǒng)將在window環(huán)境以及l(fā)inux環(huán)境進行不同環(huán)境的系統(tǒng)運行時間測試，在測試中，分別在本地機的window系統(tǒng)進行系統(tǒng)的運行，沒有發(fā)現(xiàn)什么情況出現(xiàn)，例如延遲等等；在阿里云服務(wù)器中的linux環(huán)境下也進行了測試，系統(tǒng)的運行也沒有什么障礙。總體測試來說，還是性能屬于比較優(yōu)越的。用戶節(jié)點數(shù)的并發(fā)支持：在本次測試中，使用了開源的Gatling進行測試，在測試中發(fā)現(xiàn)當(dāng)用戶在同一時間增多時，會出現(xiàn)加載稍微慢一點的網(wǎng)絡(luò)延遲情況，延遲的時間在5秒以內(nèi)，使用用戶使用時所能接受的?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第44頁。系統(tǒng)應(yīng)用基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第44頁。admin端（博客管理系統(tǒng)）1、登錄應(yīng)用圖6.1登錄測試圖6.2登錄成功顯示2、展示用戶信息應(yīng)用圖6.3用戶信息展示基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第45頁。3、編輯用戶信息應(yīng)用基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第45頁。圖6.4用戶信息編輯圖6.5用戶信息編輯寫入前圖6.6用戶信息編輯寫入后圖6.7用戶信息編輯的成功顯示基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第46頁。4、刪除用戶信息應(yīng)用基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第46頁。圖6.8刪除用戶信息的按鈕圖6.9是否確認(rèn)刪除用戶信息彈窗圖6.10刪除用戶信息顯示5、新增用戶信息應(yīng)用圖6.11添加用戶信息按鈕基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第47頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第47頁。圖6.12添加用戶信息的輸入圖6.13添加用戶信息成功顯示6、新建標(biāo)簽分類應(yīng)用圖6.14添加新建分類測試圖6.15添加分類成功基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第48頁。7、編輯標(biāo)簽分類應(yīng)用基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第48頁。圖6.16編輯分類標(biāo)簽按鈕圖6.17編輯分類輸入圖6.18編輯分類成功8、發(fā)表文章應(yīng)用圖6.19發(fā)表文章測試圖6.20發(fā)表文章成功基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第49頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第49頁。9、編輯文章應(yīng)用圖6.21編輯文章按鈕圖5.22編輯文章輸入圖6.32編輯文章成功10、刪除文章應(yīng)用圖6.33刪除文章按鈕基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第50頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第50頁。圖6.34刪除文章確認(rèn)11、退出登錄應(yīng)用圖6.35系統(tǒng)登出按鈕web端（博客展示系統(tǒng)）1、注冊用戶應(yīng)用圖6.36用戶注冊測試2、用戶登錄應(yīng)用圖6.37用戶登錄測試基于node-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第51頁?；趎ode-vue博客系統(tǒng)的設(shè)計與實現(xiàn)-畢業(yè)論文全文共58頁，當(dāng)前為第51頁。