基于node vue博客系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

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

Thissystemismainlymadeofpersonalblogconcept,understandingandanalysis,throughthepresentdemandofthenetworkage,forsystemdevelopment.Thissystemismainlyusedinbothends-awebclientandadminside,bothsidesisbasedonthefrontframevueandexpressframe,expressframeworkisbasedonthenode.Jsfordevelopment,andtheselectionofdatabaseisdirectingadata,itisanon-relationaldatabase,editorforVScode,inordertorealizethesystem.

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

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

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

View：實(shí)際上對(duì)應(yīng)著其中的activity方面，用于view視圖的繪制，以及其中與用戶的交互，其中業(yè)務(wù)邏輯依然交由presenter管理。圖3.1mvp模式雖然設(shè)計(jì)模式的想法是view與presenter實(shí)行單一相對(duì)的方式，但是最終在實(shí)現(xiàn)邏輯的時(shí)候，還是常常由view對(duì)應(yīng)多個(gè)presenterMVVM架構(gòu)：

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

View：顯示內(nèi)容

ViewModel：將前面兩者聯(lián)系在一起的對(duì)象圖3.2mvvm模式其中viewmodel是集合了對(duì)兩個(gè)方面的處理，分別是數(shù)據(jù)以及動(dòng)作邏輯代碼。將數(shù)據(jù)與view視圖實(shí)現(xiàn)交互。mvvm模式的優(yōu)點(diǎn)：（1）低耦合；（2）可重用性；（3）獨(dú)立開發(fā)；（4）可測(cè)試；因此本系統(tǒng)選擇使用mvvm設(shè)計(jì)模式。開發(fā)框架技術(shù)介紹通過上述的介紹，我們可以得知本系統(tǒng)使用的技術(shù)選型是vue.js+node.js的express+mongoDB+axios+elementui。在這些技術(shù)選型中我們?cè)僭敿?xì)介紹一下vue.js技術(shù)，以及新引出的axios和elementui框架。首先，vue.js它采用的是以漸進(jìn)式渲染的方法，以及數(shù)據(jù)為驅(qū)動(dòng)的形式，而且是一種新的mvvm模式框架。屬于一種較為輕量級(jí)的前端框架，與其他的重量級(jí)的前端框架不同，它比較重視前后端的低耦合和對(duì)于view層的數(shù)據(jù)變化。Axios是一種網(wǎng)絡(luò)請(qǐng)求庫，現(xiàn)階段主要的網(wǎng)絡(luò)請(qǐng)求庫有axios、ajax、fetch，其中ajax是最早出現(xiàn)，也是沿用最多的網(wǎng)絡(luò)請(qǐng)求庫，但是它本身是主要針對(duì)mvc模式編程的，不符合本系統(tǒng)使用的mvvm模式，而且其本身是基于xhr進(jìn)行開發(fā)和封裝的，而xhr本身的架構(gòu)并不是十分的清晰，而且已經(jīng)有了fetch進(jìn)行了代替，所以本次開發(fā)不選擇使用ajax網(wǎng)絡(luò)請(qǐng)求庫。而fetch對(duì)于400以及500的錯(cuò)誤狀態(tài)碼都會(huì)默認(rèn)它是成功的，所以本系統(tǒng)也不使用fetch網(wǎng)絡(luò)請(qǐng)求庫。而axios是基于node.js創(chuàng)建請(qǐng)求的，與我們的后端語言十分搭配，且客戶端支持防止csrf和提供了一些并發(fā)請(qǐng)求的接口，所以本系統(tǒng)選擇使用axios網(wǎng)絡(luò)請(qǐng)求庫。Elementui是一套基于vue.js進(jìn)行開發(fā)的ui框架，有著非常絢麗的組件樣式，使用這一套u(yù)i組件庫可以是我們的前端開發(fā)事件成本大大節(jié)省，而且ui組件本身的樣式也寫的十分絢麗，所以現(xiàn)階段很多公司的開發(fā)都會(huì)搭配上一部分的ui組件庫。當(dāng)然因?yàn)閑lementui的開發(fā)基礎(chǔ)也是基于vue.js，所以十分適合本系統(tǒng)的開發(fā)。最后還需要介紹的是webpack這一個(gè)前端打包工具，因?yàn)楸鞠到y(tǒng)使用了vue-cli這個(gè)手腳架去進(jìn)行開發(fā)的，所以webpack也在手腳架中包含了，但是我們有必要繼續(xù)介紹一下這個(gè)打包工具，因?yàn)檫@是項(xiàng)目開發(fā)必不可少的一部分。它可以使我們所開發(fā)出來的項(xiàng)目的大小進(jìn)行大大的壓縮，減少運(yùn)維上線的壓力。數(shù)據(jù)庫設(shè)計(jì)1、定義（數(shù)據(jù)字典）數(shù)據(jù)字典組成：數(shù)據(jù)存儲(chǔ)、數(shù)據(jù)項(xiàng)、數(shù)據(jù)結(jié)構(gòu)、處理過程以及數(shù)據(jù)流。數(shù)據(jù)字典的作用：將我們存儲(chǔ)數(shù)據(jù)的方式更加文體化；可以讓數(shù)據(jù)的管理用戶更加漸變的查詢各種需要的信息；對(duì)數(shù)據(jù)的管理存儲(chǔ)；對(duì)數(shù)據(jù)的存取進(jìn)行了管控，設(shè)置了多種權(quán)限，在某些意義上數(shù)據(jù)字典控制著數(shù)據(jù)的存儲(chǔ)；對(duì)數(shù)據(jù)庫的存儲(chǔ)設(shè)計(jì)有著很大的作用；為數(shù)據(jù)的存儲(chǔ)方式，提供了合適的標(biāo)準(zhǔn)；所以，數(shù)據(jù)庫的核心是數(shù)據(jù)字典，所以要設(shè)計(jì)數(shù)據(jù)字典就要全面考慮所有的數(shù)據(jù)，建立數(shù)據(jù)字典是數(shù)據(jù)庫設(shè)計(jì)需求分析階段必不可少的。2、數(shù)據(jù)庫設(shè)計(jì)E-R圖假如我們想以展示圖的方式將用用戶的數(shù)據(jù)展現(xiàn)出來，那么首先我們需要將一個(gè)數(shù)據(jù)庫的關(guān)系表新建出來，進(jìn)行建立的進(jìn)程我們可以通過采用面向?qū)ο蟮姆绞浇ⅰＨ缓笪以僖詷錉畹臄?shù)據(jù)存儲(chǔ)結(jié)構(gòu)將數(shù)據(jù)存儲(chǔ)起來。這樣可以更加直觀的對(duì)需求的做出反應(yīng)。這些都是通過使用er圖來描述實(shí)體數(shù)據(jù)的。是通過概念來對(duì)具體的模塊和操作的方法進(jìn)行展示的，都不會(huì)涉及其中的實(shí)現(xiàn)。其中er圖稱為數(shù)據(jù)的存儲(chǔ)模式，我將將模塊分為以下三種:。當(dāng)前系統(tǒng)所涉及的“實(shí)體”包括：用戶：用戶名、郵箱、密碼、用戶角色等文章：評(píng)論內(nèi)容、文章信息、文章發(fā)表時(shí)間、文章更新時(shí)間、文章是否置頂、文章標(biāo)題、文章購(gòu)買需求、文章作者、文章分類等等因此通過結(jié)合本系統(tǒng)的各個(gè)功能模塊與實(shí)體之間的聯(lián)系，通過分析可以得出：用戶關(guān)系表、文章關(guān)系表、博客關(guān)系表等數(shù)據(jù)庫的關(guān)系模型。以下是總體E-R圖：總體E-R圖：圖3.3總體圖主要的表結(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)表3.2文章數(shù)據(jù)表字段名類型說明_idObjectId文章的idcategoriesMixed文章的分類bodyString文章的主體內(nèi)容titleString文章的標(biāo)題summaryString文章的摘要authObjectId文章的作者createdAtDate文章的創(chuàng)建時(shí)間updatedAtDate文章的更新時(shí)間文章分類表數(shù)據(jù)結(jié)構(gòu)表3.3文章分類表字段名類型說明_idObjectId文章分類的idtitleString文章分類的標(biāo)題文章評(píng)論表的數(shù)據(jù)結(jié)構(gòu)表3.4文章評(píng)論表字段名類型說明_idObjectId文章評(píng)論的iduidObjectId文章評(píng)論的關(guān)聯(lián)用戶idaidObjectId文章評(píng)論的關(guān)聯(lián)文章idcontentString評(píng)論的內(nèi)容createdAtDate評(píng)論的創(chuàng)建時(shí)間文章訂單表的數(shù)據(jù)結(jié)構(gòu)表3.5文章訂單表字段名類型說明_idObjectId文章訂單的idaidArray文章訂單的文章關(guān)聯(lián)iduidString文章訂單的用戶關(guān)聯(lián)id系統(tǒng)詳細(xì)設(shè)計(jì)Admin端（博客后臺(tái)系統(tǒng)）博客后臺(tái)登錄模塊設(shè)計(jì)流程第一步是在系統(tǒng)的基礎(chǔ)上創(chuàng)建好賬號(hào)，用戶憑此賬號(hào)登錄，第二步是登錄成功與否的判斷，第三步登錄成功后的跳轉(zhuǎn)，第四步用戶可操作列表的加載。圖3.4登錄模塊流程圖博客后臺(tái)的用戶管理模塊 第一步是通過點(diǎn)擊用戶列表的功能，加載出用戶列表，第二步實(shí)現(xiàn)用戶的新增操作，第三步判斷用戶新增是否成功，第四步在成功后再次加載的用戶列表中，實(shí)現(xiàn)對(duì)用戶的編輯操作，第五步，對(duì)用戶進(jìn)行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進(jìn)行刪除操作。圖3.5用戶管理模塊流程圖博客后臺(tái)管理的分類模塊 第一步是通過點(diǎn)擊分類列表的功能，加載出分類列表，第二步實(shí)現(xiàn)分類的新增操作，第三步判斷分類新增是否成功，第四步在成功后再次加載的分類列表中，實(shí)現(xiàn)對(duì)分類的編輯操作，第五步，對(duì)分類進(jìn)行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進(jìn)行刪除操作。圖3.6分類模塊流程圖博客后臺(tái)管理的文章模塊 第一步是通過點(diǎn)擊文章列表的功能，加載出文章列表，第二步實(shí)現(xiàn)文章的新增操作，第三步判斷是否需要設(shè)定收費(fèi)操作，第四步在設(shè)計(jì)后確認(rèn)新增，第五步，再次加載文章列表，并且進(jìn)行編輯操作，第六步，對(duì)文章進(jìn)行刪除操作，并且彈出是否刪除的確認(rèn)框，確認(rèn)后，繼續(xù)進(jìn)行刪除操作。圖3.7文章模塊的流程圖Web端（博客展示系統(tǒng)）登陸注冊(cè)模塊的流程圖：第一步，我們需要從登錄頁面進(jìn)入到注冊(cè)頁面，在注冊(cè)頁面中進(jìn)行用戶的注冊(cè)；第二步，判斷是否注冊(cè)成功，成功就跳轉(zhuǎn)至登錄界面，并且彈出注冊(cè)成功的提示框；第三步，用戶通過輸入賬號(hào)進(jìn)行登錄；第四步，判斷用戶是否登錄成功，成功后就跳轉(zhuǎn)到展示頁面的首頁，并且彈出消息提示窗；圖3.8登錄注冊(cè)模塊流程圖文章信息模塊的流程圖第一步，點(diǎn)擊文章卡片；第二步，判斷文章是否為vip文章，若不為vip文章，則直接進(jìn)行跳轉(zhuǎn)至文章詳情頁的行為，若為vip文章，則彈出彈框詢問是否購(gòu)買文章；第三步，判斷是否確認(rèn)購(gòu)買文章，若購(gòu)買，則彈出再次確認(rèn)購(gòu)買彈框，若不購(gòu)買，則直接返回首頁；第四步判斷是否確認(rèn)購(gòu)買文章，若確認(rèn)購(gòu)買，則跳轉(zhuǎn)至支付寶支付頁面，若不購(gòu)買，則跳轉(zhuǎn)回首頁；第五步，支付寶支付成功后，先跳轉(zhuǎn)至支付寶的支付成功頁面5秒，然后跳轉(zhuǎn)至本系統(tǒng)的支付成功頁面；第六步，點(diǎn)擊支付成功頁面的返回按鈕，返回到系統(tǒng)的登錄頁，登錄后點(diǎn)擊文章，便可以進(jìn)入已購(gòu)買的文章詳情頁。圖3.9文章信息模塊流程圖文章歸檔模塊的流程圖第一步，在系統(tǒng)頁面的導(dǎo)航欄中，點(diǎn)擊歸檔導(dǎo)航，進(jìn)入歸檔頁面；第二步，進(jìn)入歸檔頁面后，頁面顯示歸檔好的文章信息；第三步，點(diǎn)擊文章信息條，進(jìn)入文章詳情頁面。圖3.10文章歸檔模塊流程圖文章標(biāo)簽?zāi)K的流程圖第一步，在系統(tǒng)頁面的導(dǎo)航欄中，點(diǎn)擊標(biāo)簽導(dǎo)航，進(jìn)入標(biāo)簽頁面；第二步，進(jìn)入標(biāo)簽頁面后，頁面顯示按標(biāo)簽歸檔好的文章信息；第三步，點(diǎn)擊文章信息條，進(jìn)入文章詳情頁面。圖3.11文章標(biāo)簽?zāi)K流程圖個(gè)人信息模塊以及登出模塊的流程圖第一步，點(diǎn)擊系統(tǒng)頁面的右上角的用戶名，彈出個(gè)人信息按鈕以及退出按鈕；第二步，點(diǎn)擊個(gè)人信息按鈕，進(jìn)入個(gè)人信息的頁面，個(gè)人信息頁面將展示用戶的個(gè)人信息；或者點(diǎn)擊登出按鈕，實(shí)現(xiàn)用戶登出，跳轉(zhuǎn)至系統(tǒng)的登錄頁面。圖3.12個(gè)人信息模塊以及登出模塊流程圖主要功能的實(shí)現(xiàn)Admin端（博客后臺(tái)系統(tǒng)）博客后臺(tái)登錄模塊前端的登錄校驗(yàn)，是elementui的寫法:圖4.1登錄模塊部分渲染代碼前端發(fā)起登錄以及跳轉(zhuǎn)到首頁的邏輯代碼：圖4.2登錄模塊部分前端邏輯代碼前端的請(qǐng)求攔截器（實(shí)現(xiàn)token的請(qǐng)求頭掛載）：圖4.3登錄模塊部分請(qǐng)求攔截器代碼前端的路由守衛(wèi)：圖4.4登錄模塊前端路由守衛(wèi)代碼后端登錄接口的部分邏輯代碼：圖4.5登錄模塊部分邏輯代碼后端中間件的token驗(yàn)證部分代碼：圖4.6登錄模塊token驗(yàn)證代碼博客后臺(tái)用戶列表模塊：頁面渲染的部分代碼：圖4.7用戶列表模塊部分渲染代碼部分用戶列表頁前端邏輯代碼：圖4.8用戶模塊前端部分邏輯代碼后端的部分接口邏輯代碼：圖4.9用戶模塊后代api入口代碼圖4.10用戶模塊部分后端邏輯代碼博客后臺(tái)的分類模塊前端分類模塊的部分渲染代碼：圖4.11分類模塊部分渲染代碼前端的部分邏輯代碼：圖4.12分類模塊部分前端邏輯代碼后端的部分api接口邏輯代碼：圖4.13分類模塊部分api入口代碼圖4.14分類模塊部分后端邏輯代碼博客后臺(tái)管理的文章模塊前端部分渲染代碼：圖4.15文章模塊部分渲染代碼前端的部分邏輯代碼：圖4.16文章模塊部分前端邏輯代碼后端的部分api邏輯代碼：圖4.17文章模塊部分后端api入口代碼圖4.18文章模塊部分后端邏輯代碼Web端（博客展示系統(tǒng)）博客展示的登錄注冊(cè)模塊前端的部分邏輯代碼：圖4.19登錄注冊(cè)模塊部分前端邏輯代碼前端的部分渲染代碼：圖4.20登錄注冊(cè)模塊部分前端渲染代碼后臺(tái)的部分api接口邏輯代碼:圖4.21登錄注冊(cè)模塊部分后端邏輯代碼博客展示的首頁渲染模塊前端的部分邏輯代碼：圖4.22首頁渲染模塊部分前端邏輯代碼前端的部分渲染代碼：圖4.23首頁渲染模塊部分前端渲染代碼后臺(tái)的部分api邏輯代碼:圖4.24首頁渲染模塊部分后端邏輯代碼圖4.25首頁渲染模塊部分后端api入口邏輯代碼博客展示的文章列表模塊前端的部分邏輯代碼：圖4.26文章模塊部分前端邏輯代碼前端的部分邏輯代碼：圖4.27文章模塊部分前端渲染代碼后端的部分api邏輯代碼：圖4.28文章模塊后端部分api邏輯代碼博客展示的歸檔模塊前端的部分渲染代碼：圖4.29歸檔模塊部分前端渲染代碼前端的部分邏輯代碼：圖4.30歸檔模塊部分前端邏輯代碼后端的部分api邏輯代碼：圖4.31歸檔模塊部分后端api邏輯代碼博客展示的標(biāo)簽?zāi)K前端的部分渲染代碼：圖4.32標(biāo)簽?zāi)K的部分前端渲染代碼前端的部分邏輯代碼：圖4.33標(biāo)簽?zāi)K的部分前端邏輯代碼后端的部分api接口代碼：圖4.34標(biāo)簽?zāi)K的部分后端api邏輯代碼博客展示的個(gè)人信息模塊前端的部分邏代碼：圖4.35個(gè)人信息模塊部分前端邏輯代碼前端的部分渲染代碼：圖4.36個(gè)人信息模塊的部分前端渲染代碼后臺(tái)的部分api接口邏輯代碼：圖4.37個(gè)人信息模塊的部分后端邏輯代碼系統(tǒng)測(cè)試測(cè)試概要現(xiàn)在無論什么新的開發(fā)程序在進(jìn)行向外推廣的時(shí)候，都會(huì)進(jìn)行對(duì)程序的測(cè)試，這也是一個(gè)非常重要的環(huán)節(jié)，因?yàn)檎l也不能保證程序不會(huì)出錯(cuò)，而且這是一個(gè)新推出的程序，所以我們要進(jìn)行程序的設(shè)定。因?yàn)槌绦驕y(cè)定的目的是為了測(cè)試程序的本身是否有需要改進(jìn)的地方或者留有嚴(yán)重的bug。測(cè)試方法此次進(jìn)行程序的測(cè)試方法是進(jìn)行線上的測(cè)試方法，測(cè)試的主要瀏覽器環(huán)境是chrome瀏覽器環(huán)境。沒有在瀏覽器處設(shè)置任何禁用。系統(tǒng)是用阿里云部署的服務(wù)器，我會(huì)在瀏覽器的url地址進(jìn)行系統(tǒng)的登錄，在此處先貼出兩個(gè)不同功能系統(tǒng)的網(wǎng)絡(luò)地址出來：web端：14:9999/admin端：14:9997/測(cè)試用例admin端（博客管理系統(tǒng)）系統(tǒng)一部分的測(cè)試用例表，如表5-1所示：測(cè)試功能預(yù)期結(jié)果實(shí)際結(jié)果在登錄界面進(jìn)行登錄進(jìn)入系統(tǒng)welcome頁面成功進(jìn)入系統(tǒng)welcome頁面展示用戶信息列表展示信息展示信息成功編輯用戶信息編輯用戶信息成功成功編輯用戶信息刪除用戶信息刪除用戶信息成功成功刪除用戶信息新增用戶信息新增用戶信息成功成功新增用戶信息新建標(biāo)簽分類新建標(biāo)簽分類成功成功新建標(biāo)簽分類發(fā)表新文章發(fā)表新文章成功成功發(fā)表新文章編輯文章編輯文章成功成功編輯文章刪除文章刪除文章成功成功刪除文章退出登錄測(cè)試退出登錄成功成功退出登錄表5.1admin端系統(tǒng)測(cè)試web端（博客展示系統(tǒng)）系統(tǒng)的一部分的測(cè)試用例表，如表5-2所示：測(cè)試功能預(yù)期結(jié)果實(shí)際結(jié)果注冊(cè)用戶注冊(cè)用戶成功成功注冊(cè)用戶用戶登錄用戶登錄成功成功登錄用戶博客首頁渲染博客首頁渲染成功成功博客首頁渲染文章購(gòu)買功能測(cè)試文章購(gòu)買成功成功購(gòu)買文章博客時(shí)間線歸檔功能博客歸檔成功成功博客歸檔博客標(biāo)簽歸檔功能博客標(biāo)簽歸檔成功成功博客標(biāo)簽歸檔博客個(gè)人信息展示博客個(gè)人信息展示成功成功展示博客個(gè)人信息用戶退出功能用戶退出成功成功退出用戶表5.2web端的系統(tǒng)測(cè)試性能測(cè)試新能測(cè)試主要是以系統(tǒng)在不同運(yùn)行環(huán)境下的運(yùn)行速度、在與服務(wù)器上部署后，進(jìn)行網(wǎng)絡(luò)請(qǐng)求后的系統(tǒng)網(wǎng)絡(luò)響應(yīng)時(shí)間、用戶的并發(fā)數(shù)增多時(shí)等等的系統(tǒng)承載性能，實(shí)現(xiàn)通過測(cè)試尋找錯(cuò)誤的bug，在下一系列的版本進(jìn)行修正，以及更好的提高系統(tǒng)的性能，提高用戶的使用體驗(yàn)。網(wǎng)絡(luò)請(qǐng)求響應(yīng)時(shí)間：本系統(tǒng)是部署在阿里云的云服務(wù)器上的，所以服務(wù)器的網(wǎng)絡(luò)安全性是有所保障的，在系統(tǒng)被入侵的方面暫時(shí)不需要擔(dān)心，而在網(wǎng)絡(luò)請(qǐng)求的響應(yīng)時(shí)間方面，將用chrome瀏覽器進(jìn)行請(qǐng)求的測(cè)試，在下圖可以看出對(duì)加載登錄頁面的總體請(qǐng)求請(qǐng)求返回時(shí)間不超過一秒。登錄進(jìn)入展示頁面的首頁的請(qǐng)求加載時(shí)間，在下圖也可以看出，也只是1秒多一點(diǎn)，所以總體來說網(wǎng)絡(luò)請(qǐng)求響應(yīng)的性能是屬于比較優(yōu)越的。圖5.1瀏覽器測(cè)試圖（1）圖5.2瀏覽器測(cè)試圖（2）系統(tǒng)不同環(huán)境的運(yùn)行速度：本系統(tǒng)將在window環(huán)境以及l(fā)inux環(huán)境進(jìn)行不同環(huán)境的系統(tǒng)運(yùn)行時(shí)間測(cè)試，在測(cè)試中，分別在本地機(jī)的window系統(tǒng)進(jìn)行系統(tǒng)的運(yùn)行，沒有發(fā)現(xiàn)什么情況出現(xiàn)，例如延遲等等；在阿里云服務(wù)器中的linux環(huán)境下也進(jìn)行了測(cè)試，系統(tǒng)的運(yùn)行也沒有什么障礙?？傮w測(cè)試來說，還是性能屬于比較優(yōu)越的。用戶節(jié)點(diǎn)數(shù)的并發(fā)支持：在本次測(cè)試中，使用了開源的Gatling進(jìn)行測(cè)試，在測(cè)試中發(fā)現(xiàn)當(dāng)用戶在同一時(shí)間增多時(shí)，會(huì)出現(xiàn)加載稍微慢一點(diǎn)的網(wǎng)絡(luò)延遲情況，延遲的時(shí)間在5秒以內(nèi)，使用用戶使用時(shí)所能接受的。系統(tǒng)應(yīng)用admin端（博客管理系統(tǒng)）1、登錄應(yīng)用圖6.1登錄測(cè)試圖6.2登錄成功顯示2、展示用戶信息應(yīng)用圖6.3用戶信息展示3、編輯用戶信息應(yīng)用圖6.4用戶信息編輯圖6.5用戶信息編輯寫入前圖6.6用戶信息編輯寫入后圖6.7用戶信息編輯的成功顯示4、刪除用戶信息應(yīng)用圖6.8刪除用戶信息的按鈕圖6.9是否確認(rèn)刪除用戶信息彈窗圖6.10刪除用戶信息顯示5、新增用戶信息應(yīng)用圖6.11添加用戶信息按鈕圖6.12添加用戶信息的輸入圖6.13添加用戶信息成功顯示6、新建標(biāo)簽分類應(yīng)用圖6.14添加新建分類測(cè)試圖6.15添加分類成功7、編輯標(biāo)簽分類應(yīng)用圖6.16編輯分類標(biāo)簽按鈕圖6.17編輯分類輸入圖6.18編輯分類成功8、發(fā)表文章應(yīng)用圖6.19發(fā)表文章測(cè)試圖6.20發(fā)表文章成功9、編輯文章應(yīng)用圖6.21編輯文章按鈕圖5.22編輯文章輸入圖6.32編輯文章成功10、刪除文章應(yīng)用圖6.33刪除文章按鈕圖6.34刪除文章確認(rèn)11、退出登錄應(yīng)用圖6.35系統(tǒng)登出按鈕web端（博客展示系統(tǒng)）1、注冊(cè)用戶應(yīng)用圖6.36用戶注冊(cè)測(cè)試2、用戶登錄應(yīng)用圖6.37用戶登錄測(cè)試圖6.38用戶登錄成功3、博客首頁渲染應(yīng)用圖6.39首頁渲染頂部展示圖6.40首頁渲染底部展示4、文章購(gòu)買功能應(yīng)用圖6.41文章購(gòu)買測(cè)試圖6.42文章購(gòu)買詢問圖6.43文章購(gòu)買確認(rèn)圖6.44文章購(gòu)買的支付寶掃碼支付圖6.45文章購(gòu)買的手機(jī)支付展示圖6.46文章購(gòu)買的支付成功顯示圖6.47文章購(gòu)買的成功跳轉(zhuǎn)5、文章詳情頁渲染應(yīng)用圖6.48文章詳情頁的渲染6、文章評(píng)論功能應(yīng)用圖6.49文章評(píng)論成功的顯示7、博客時(shí)間線歸檔應(yīng)用圖6.50博客時(shí)間線歸檔的顯示8、博客標(biāo)簽歸檔應(yīng)用圖6.51博客標(biāo)簽歸檔的顯示9、個(gè)人信息展示應(yīng)用圖6.52個(gè)人信息的按鈕圖6.53個(gè)人信息的顯示10、用戶退出登錄應(yīng)用圖6.54博客系統(tǒng)退出按鈕結(jié)論在經(jīng)歷了長(zhǎng)時(shí)間的開發(fā)終于把系統(tǒng)開發(fā)出來了，在系統(tǒng)的開發(fā)來說，項(xiàng)目的結(jié)構(gòu)總體上來說還是挺貼合當(dāng)下的真實(shí)項(xiàng)目開發(fā)模式的，采用了當(dāng)下最熱門的開發(fā)模式，將前后端分離開來，實(shí)現(xiàn)高效率的開發(fā)。設(shè)計(jì)規(guī)范十分貼合項(xiàng)目需求，也使用了實(shí)際企業(yè)上的熱門開發(fā)框架，為以后的職業(yè)生涯打下了堅(jiān)實(shí)的基礎(chǔ)。當(dāng)然在最后也發(fā)現(xiàn)了自己的很多代碼編寫上的問題，但是都通過對(duì)資料的查詢以及對(duì)開源知識(shí)更深入的學(xué)習(xí)，實(shí)現(xiàn)了系統(tǒng)的開發(fā)。此次開發(fā)也使我明白了自身的技術(shù)弱點(diǎn)，以及需要補(bǔ)充的知識(shí)面，讓我能在后續(xù)的發(fā)展道路上尋求到了新的目標(biāo)。致謝光陰似箭，日月如梭。在經(jīng)過長(zhǎng)時(shí)間的忙碌，本次的畢業(yè)設(shè)計(jì)終于要接近尾聲了，由于自己知識(shí)面的缺乏，在設(shè)計(jì)本系統(tǒng)的時(shí)候難免會(huì)有許多的功能設(shè)計(jì)的并不是特別的完善，以及有著許多的小問題考慮的并不周全。不過幸好有著指導(dǎo)老師以及同學(xué)的幫助，我才能如期地將畢業(yè)設(shè)計(jì)的成品完成了，真的十分感謝他們的支持與教導(dǎo)。特別是畢設(shè)指導(dǎo)老師在無論什么時(shí)間去咨詢他問題的時(shí)候，他都能及時(shí)地去為我進(jìn)行解答，而且回答的方向也有很多的針對(duì)性，使我在做畢業(yè)設(shè)計(jì)的道路走少了很多彎路。在畢業(yè)設(shè)計(jì)的過程中，覃老師的耐心指導(dǎo)確實(shí)發(fā)揮著很大的作用，他具備著豐富的理論知識(shí)以及實(shí)踐經(jīng)驗(yàn)在咨詢的過程中給我留下了深刻的印象。而且老師的認(rèn)真和藹的教學(xué)方式也正是我能將畢業(yè)設(shè)計(jì)完成的重要原因。他的認(rèn)真負(fù)責(zé)使我能將課本上的知識(shí)與實(shí)際開發(fā)中的問題相結(jié)合，努力的解決了各種問題。在完成畢業(yè)設(shè)計(jì)的過程中，也讓我學(xué)會(huì)了如何快速地在自己陌生的技術(shù)模塊領(lǐng)域中學(xué)習(xí)，實(shí)現(xiàn)了從0到1的過程，提高了自己在開發(fā)過程中發(fā)現(xiàn)問題，解決問題，總結(jié)問題的能了，這些能力能在我以后的職業(yè)發(fā)展道路上打下堅(jiān)實(shí)的基礎(chǔ)。在此我再次感謝老師的辛勤指導(dǎo)，感謝老師的認(rèn)真負(fù)責(zé)。回想起這一學(xué)期，真的過得既緊張又充實(shí)，在完成畢業(yè)設(shè)計(jì)的同時(shí)也要在疫情期間尋找工作，也要在工作之后的閑暇時(shí)間中完成畢業(yè)設(shè)計(jì)，但是不得不說這是一段非常充實(shí)的日子，回想起來，真的只有努力了才不會(huì)浪費(fèi)自己的人生，為此我也要感謝我自己，感謝自己在最后校園時(shí)光里重新出發(fā)，在一個(gè)新的領(lǐng)域探索未知，在這里想對(duì)自己說加油，希望在多年以后回顧起來的時(shí)候，要慶幸自己有現(xiàn)在的改變。在致謝的最后，我還要感謝學(xué)院對(duì)我的培育，感謝各個(gè)科任的老師，是你們給了我一段不一樣的精彩人生，感謝學(xué)校為我們營(yíng)造的良好學(xué)習(xí)環(huán)境。相信自己將來走出社會(huì)之后會(huì)將自己的價(jià)值體現(xiàn)出來，回報(bào)父母、回報(bào)老師、回報(bào)學(xué)校、回報(bào)社會(huì)。最后再次感謝在這次畢業(yè)設(shè)計(jì)中給予我?guī)椭拇蠹遥４蠹以谕蟮纳钪幸磺许樌? 參考文獻(xiàn)王金龍,宋斌,丁銳.Node.js:一種新的Web應(yīng)用構(gòu)建技術(shù)[J].現(xiàn)代電子技術(shù),2015,38(06):70-73.王俊琴,王佳,邱娟,王發(fā)裕,龔玲芝.淺談我國(guó)博客的現(xiàn)狀與發(fā)展[J].科協(xié)論壇(下半月),2010(01):191-192.程桂花,沈煒,何松林,張珂杰.Node.js中Express框架路由機(jī)制的研究[J].工業(yè)控制計(jì)算機(jī),2016,29(08):101-102.麥冬,陳濤,梁宗灣.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析[J].信息與電腦(理論版),2017(07):58-59.王光磊.MongoDB數(shù)據(jù)庫的應(yīng)用研究和方案優(yōu)化[J].中國(guó)科技信息,2011(20):93-94+96.馮巖.基于Node.js的輕博客系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].華中科技大學(xué),2018.馮巖.基于Node.js的輕博客系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].華中科技大學(xué),2018.危華明,陳積常,汪小威.基于HTML5+CSS3.0的響應(yīng)式網(wǎng)站前端設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦,2018,34(05):15+31.劉艷青.支付網(wǎng)關(guān)功能及安全淺析.計(jì)算機(jī)光盤軟件與應(yīng)用,2012(22):152-152.杜波依斯.MySQL技術(shù)內(nèi)幕[M].?第4版.?人民郵電出版社?,2011年07月.趙學(xué)作,趙少農(nóng).Node.js的安裝與調(diào)試[J].網(wǎng)絡(luò)安全和信息化,2019,35(03):89-90.

電腦故障檢測(cè)卡代碼表

1、特殊代碼"00"和"ff"及其它起始碼有三種情況出現(xiàn)：

①已由一系列其它代碼之后再出現(xiàn)："00"或"ff"，則主板ok。

②如果將cmos中設(shè)置無錯(cuò)誤，則不嚴(yán)重的故障不會(huì)影響bios自檢的繼續(xù)，而最終出現(xiàn)"00"或"ff"。

③一開機(jī)就出現(xiàn)"00"或"ff"或其它起始代碼并且不變化則為主板沒有運(yùn)行起來。

2、本表是按代碼值從小到大排序，卡中出碼順序不定。

3、未定義的代碼表中未列出。

4、對(duì)于不同bios（常用ami、award、phoenix）用同一代碼代表的意義不同，因此應(yīng)弄清您所檢測(cè)的電腦是屬于哪一種類型的bios，您可查閱您的電腦使用手冊(cè)，或從主板上的bios芯片上直接查看，也可以在啟動(dòng)屏幕時(shí)直接看到。

5、有少數(shù)主板的pci槽只有一部分代碼出現(xiàn)，但isa槽有完整自檢代碼輸出。且目前已發(fā)現(xiàn)有極個(gè)別原裝機(jī)主板的isa槽無代碼輸出，而pci槽則有完整代碼輸出，故建議您在查看代碼不成功時(shí)，將本雙槽卡換到另一種插槽試一下。另外，同一塊主板的不同pci槽，有的槽有完整代碼送出，如dell810主板只有靠近c(diǎn)pu的一個(gè)pci槽有完整代碼顯示，一直變化到"00"或"ff"，而其它pci槽走到"38"后則不繼續(xù)變化。

6、復(fù)位信號(hào)所需時(shí)間isa與pci不一定同步，故有可能isa開始出代碼，但pci的復(fù)位燈還不熄，故pci代碼停要起始代碼上。

代碼對(duì)照表

00.已顯示系統(tǒng)的配置；即將控制INI19引導(dǎo)裝入。

01處理器測(cè)試1，處理器狀態(tài)核實(shí),如果測(cè)試失敗，循環(huán)是無限的。處理器寄存器的測(cè)試即將開始，不可屏蔽中斷即將停用。CPU寄存器測(cè)試正在進(jìn)行或者失敗。

02確定診斷的類型（正?；蛘咧圃欤Ｈ绻I盤緩沖器含有數(shù)據(jù)就會(huì)失效。停用不可屏蔽中斷；通過延遲開始。CMOS寫入／讀出正在進(jìn)行或者失靈。

03清除8042鍵盤控制器，發(fā)出TESTKBRD命令（AAH）通電延遲已完成。ROMBIOS檢查部件正在進(jìn)行或失靈。

04使8042鍵盤控制器復(fù)位，核實(shí)TESTKBRD。鍵盤控制器軟復(fù)位／通電測(cè)試?？删幊涕g隔計(jì)時(shí)器的測(cè)試正在進(jìn)行或失靈。

05如果不斷重復(fù)制造測(cè)試1至5，可獲得8042控制狀態(tài)。已確定軟復(fù)位／通電；即將啟動(dòng)ROM。DMA初如準(zhǔn)備正在進(jìn)行或者失靈。

06使電路片作初始準(zhǔn)備，停用視頻、奇偶性、DMA電路片，以及清除DMA電路片，所有頁面寄存器和CMOS停機(jī)字節(jié)。已啟動(dòng)ROM計(jì)算ROMBIOS檢查總和，以及檢查鍵盤緩沖器是否清除。DMA初始頁面寄存器讀／寫測(cè)試正在進(jìn)行或失靈。

07處理器測(cè)試2，核實(shí)CPU寄存器的工作。ROMBIOS檢查總和正常，鍵盤緩沖器已清除，向鍵盤發(fā)出BAT（基本保證測(cè)試）命令。.

08使CMOS計(jì)時(shí)器作初始準(zhǔn)備，正常的更新計(jì)時(shí)器的循環(huán)。已向鍵盤發(fā)出BAT命令，即將寫入BAT命令。RAM更新檢驗(yàn)正在進(jìn)行或失靈。

09EPROM檢查總和且必須等于零才通過。核實(shí)鍵盤的基本保證測(cè)試，接著核實(shí)鍵盤命令字節(jié)。第一個(gè)64KRAM測(cè)試正在進(jìn)行。

0A使視頻接口作初始準(zhǔn)備。發(fā)出鍵盤命令字節(jié)代碼，即將寫入命令字節(jié)數(shù)據(jù)。第一個(gè)64KRAM芯片或數(shù)據(jù)線失靈，移位。

0B測(cè)試8254通道0。寫入鍵盤控制器命令字節(jié)，即將發(fā)出引腳23和24的封鎖／解鎖命令。第一個(gè)64KRAM奇／偶邏輯失靈。

0C測(cè)試8254通道1。鍵盤控制器引腳23、24已封鎖／解鎖；已發(fā)出NOP命令。第一個(gè)64KRAN的地址線故障。

0D1、檢查CPU速度是否與系統(tǒng)時(shí)鐘相匹配。2、檢查控制芯片已編程值是否符合初設(shè)置。3、視頻通道測(cè)試，如果失敗，則鳴喇叭。已處理NOP命令；接著測(cè)試CMOS停開寄存器。第一個(gè)64KRAM的奇偶性失靈

0E測(cè)試CMOS停機(jī)字節(jié)。CMOS停開寄存器讀／寫測(cè)試；將計(jì)算CMOS檢查總和。初始化輸入／輸出端口地址。

0F測(cè)試擴(kuò)展的CMOS。已計(jì)算CMOS檢查總和寫入診斷字節(jié)；CMOS開始初始準(zhǔn)備。.

10測(cè)試DMA通道0。CMOS已作初始準(zhǔn)備，CMOS狀態(tài)寄存器即將為日期和時(shí)間作初始準(zhǔn)備。第一個(gè)64KRAM第0位故障。

11測(cè)試DMA通道1。CMOS狀態(tài)寄存器已作初始準(zhǔn)備，即將停用DMA和中斷控制器。第一個(gè)64DKRAM第1位故障。

12測(cè)試DMA頁面寄存器。停用DMA控制器1以及中斷控制器1和2；即將視頻顯示器并使端口B作初始準(zhǔn)備。第一個(gè)64DKRAM第2位故障。

13測(cè)試8741鍵盤控制器接口。視頻顯示器已停用，端口B已作初始準(zhǔn)備；即將開始電路片初始化／存儲(chǔ)器自動(dòng)檢測(cè)。第一個(gè)64DKRAM第3位故障。

14測(cè)試存儲(chǔ)器更新觸發(fā)電路。電路片初始化／存儲(chǔ)器處自動(dòng)檢測(cè)結(jié)束；8254計(jì)時(shí)器測(cè)試即將開始。第一個(gè)64DKRAM第4位故障。

15測(cè)試開頭64K的系統(tǒng)存儲(chǔ)器。第2通道計(jì)時(shí)器測(cè)試了一半；8254第2通道計(jì)時(shí)器即將完成測(cè)試。第一個(gè)64DKRAM第5位故障。

16建立8259所用的中斷矢量表。第2通道計(jì)時(shí)器測(cè)試結(jié)束；8254第1通道計(jì)時(shí)器即將完成測(cè)試。第一個(gè)64DKRAM第6位故障。

17調(diào)準(zhǔn)視頻輸入／輸出工作，若裝有視頻BIOS則啟用。第1通道計(jì)時(shí)器測(cè)試結(jié)束；8254第0通道計(jì)時(shí)器即將完成測(cè)試。第一個(gè)64DKRAM第7位故障。

18測(cè)試視頻存儲(chǔ)器，如果安裝選用的視頻BIOS通過，由可繞過。第0通道計(jì)時(shí)器測(cè)試結(jié)束；即將開始更新存儲(chǔ)器。第一個(gè)64DKRAM第8位故障。

19測(cè)試第1通道的中斷控制器（8259）屏蔽位。已開始更新存儲(chǔ)器，接著將完成存儲(chǔ)器的更新。第一個(gè)64DKRAM第9位故障。

1A測(cè)試第2通道的中斷控制器（8259）屏蔽位。正在觸發(fā)存儲(chǔ)器更新線路，即將檢查15微秒通／斷時(shí)間。第一個(gè)64DKRAM第10位故障。

1B測(cè)試CMOS電池電平。完成存儲(chǔ)器更新時(shí)間30微秒測(cè)試；即將開始基本的64K存儲(chǔ)器測(cè)試。第一個(gè)64DKRAM第11位故障。

1C測(cè)試CMOS檢查總和。.第一個(gè)64DKRAM第12位故障。

1D調(diào)定CMOS配置。.第一個(gè)64DKRAM第13位故障。

1E測(cè)定系統(tǒng)存儲(chǔ)器的大小，并且把它和CMOS值比較。.第一個(gè)64DKRAM第14位故障。

1F測(cè)試64K存儲(chǔ)器至最高640K。.第一個(gè)64DKRAM第15位故障。

20測(cè)量固定的8259中斷位。開始基本的64K存儲(chǔ)器測(cè)試；即將測(cè)試地址線。從屬DMA寄存器測(cè)試正在進(jìn)行或失靈。

21維持不可屏蔽中斷（NMI）位（奇偶性或輸入／輸出通道的檢查）。通過地址線測(cè)試；即將觸發(fā)奇偶性。主DMA寄存器測(cè)試正在進(jìn)行或失靈。

22測(cè)試8259的中斷功能。結(jié)束觸發(fā)奇偶性；將開始串行數(shù)據(jù)讀／寫測(cè)試。主中斷屏蔽寄存器測(cè)試正在進(jìn)行或失靈。

23測(cè)試保護(hù)方式8086虛擬方式和8086頁面方式?；镜?4K串行數(shù)據(jù)讀／寫測(cè)試正常；即將開始中斷矢量初始化之前的任何調(diào)節(jié)。從屬中斷屏蔽存器測(cè)試正在進(jìn)行或失靈。

24測(cè)定1MB以上的擴(kuò)展存儲(chǔ)器。矢量初始化之前的任何調(diào)節(jié)完成，即將開始中斷矢量的初始準(zhǔn)備。設(shè)置ES段地址寄存器注冊(cè)表到內(nèi)存高端。

25測(cè)試除頭一個(gè)64K之后的所有存儲(chǔ)器。完成中斷矢量初始準(zhǔn)備；將為旋轉(zhuǎn)式斷續(xù)開始讀出8042的輸入／輸出端口。裝入中斷矢量正在進(jìn)行或失靈。

26測(cè)試保護(hù)方式的例外情況。讀出8042的輸入／輸出端口；即將為旋轉(zhuǎn)式斷續(xù)開始使全局?jǐn)?shù)據(jù)作初始準(zhǔn)備。開啟A20地址線；使之參入尋址。

27確定超高速緩沖存儲(chǔ)器的控制或屏蔽RAM。全1數(shù)據(jù)初始準(zhǔn)備結(jié)束；接著將進(jìn)行中斷矢量之后的任何初始準(zhǔn)備。鍵盤控制器測(cè)試正在進(jìn)行或失靈。

28確定超高速緩沖存儲(chǔ)器的控制或者特別的8042鍵盤控制器。完成中斷矢量之后的初始準(zhǔn)備；即將調(diào)定單色方式。CMOS電源故障／檢查總和計(jì)算正在進(jìn)行。

29.已調(diào)定單色方式，即將調(diào)定彩色方式。CMOS配置有效性的檢查正在進(jìn)行。

2A使鍵盤控制器作初始準(zhǔn)備。已調(diào)定彩色方式，即將進(jìn)行ROM測(cè)試前的觸發(fā)奇偶性。置空64K基本內(nèi)存。

2B使磁碟驅(qū)動(dòng)器和控制器作初始準(zhǔn)備。觸發(fā)奇偶性結(jié)束；即將控制任選的視頻ROM檢查前所需的任何調(diào)節(jié)。屏幕存儲(chǔ)器測(cè)試正在進(jìn)行或失靈。

2C檢查串行端口，并使之作初始準(zhǔn)備。完成視頻ROM控制之前的處理；即將查看任選的視頻ROM并加以控制。屏幕初始準(zhǔn)備正在進(jìn)行或失靈。

2D檢測(cè)并行端口，并使之作初始準(zhǔn)備。已完成任選的視頻ROM控制，即將進(jìn)行視頻ROM回復(fù)控制之后任何其他處理的控制。屏幕回掃測(cè)試正在進(jìn)行或失靈。

2E使硬磁盤驅(qū)動(dòng)器和控制器作初始準(zhǔn)備。從視頻ROM控制之后的處理復(fù)原；如果沒有發(fā)現(xiàn)EGA／VGA就要進(jìn)行顯示器存儲(chǔ)器讀／寫測(cè)試。檢測(cè)視頻ROM正在進(jìn)行。

2F檢測(cè)數(shù)學(xué)協(xié)處理器，并使之作初始準(zhǔn)備。沒發(fā)現(xiàn)EGA／VGA；即將開始顯示器存儲(chǔ)器讀／寫測(cè)試。.

30建立基本內(nèi)存和擴(kuò)展內(nèi)存。通過顯示器存儲(chǔ)器讀／寫測(cè)試；即將進(jìn)行掃描檢查。認(rèn)為屏幕是可以工作的。

31檢測(cè)從C800：0至EFFF：0的選用ROM，并使之作初始準(zhǔn)備。顯示器存儲(chǔ)器讀／寫測(cè)試或掃描檢查失敗，即將進(jìn)行另一種顯示器存儲(chǔ)器讀／寫測(cè)試。單色監(jiān)視器是可以工作的。

32對(duì)主板上COM／LTP／FDD／聲音設(shè)備等I／O芯片編程使之適合設(shè)置值。通過另一種顯示器存儲(chǔ)器讀／寫測(cè)試；卻將進(jìn)行另一種顯示器掃描檢查。彩色監(jiān)視器（40列）是可以工作的。

33.視頻顯示器檢查結(jié)束；將開始利用調(diào)節(jié)開關(guān)和實(shí)際插卡檢驗(yàn)顯示器的關(guān)型。彩色監(jiān)視器（80列）是可以工作的。

34.已檢驗(yàn)顯示器適配器；接著將調(diào)定顯示方式。計(jì)時(shí)器滴答聲中斷測(cè)試正在進(jìn)行或失靈。35.完成調(diào)定顯示方式；即將檢查BIOSROM的數(shù)據(jù)區(qū)。停機(jī)測(cè)試正在進(jìn)行或失靈。

36.已檢查BIOSROM數(shù)據(jù)區(qū)；即將調(diào)定通電信息的游標(biāo)。門電路中A－20失靈。

37.識(shí)別通電信息的游標(biāo)調(diào)定已完成；即將顯示通電信息。保護(hù)方式中的意外中斷。

38.完成顯示通電信息；即將讀出新的游標(biāo)位置。RAM測(cè)試正在進(jìn)行或者地址故障＞FFFFH。

39.已讀出保存游標(biāo)位置，即將顯示引用信息串。.

3A.引用信息串顯示結(jié)束；即將顯示發(fā)現(xiàn)信息。間隔計(jì)時(shí)器通道2測(cè)試或失靈。

3B用OPTI電路片（只是486）使輔助超高速緩沖存儲(chǔ)器作初始準(zhǔn)備。已顯示發(fā)現(xiàn)＜ESC＞信息；虛擬方式，存儲(chǔ)器測(cè)試即將開始。按日計(jì)算的日歷時(shí)鐘測(cè)試正在進(jìn)行或失靈。

3C建立允許進(jìn)入CMOS設(shè)置的標(biāo)志。.串行端口測(cè)試正在進(jìn)行或失靈。

3D初始化鍵盤／PS2鼠標(biāo)／PNP設(shè)備及總內(nèi)存節(jié)點(diǎn)。.并行端口測(cè)試正在進(jìn)行或失靈。

3E嘗試打開L2高速緩存。.數(shù)學(xué)協(xié)處理器測(cè)試正在進(jìn)行或失靈。

40.已開始準(zhǔn)備虛擬方式的測(cè)試；即將從視頻存儲(chǔ)器來檢驗(yàn)。調(diào)整CPU速度，使之與外圍時(shí)鐘精確匹配。

41中斷已打開，將初始化數(shù)據(jù)以便于0：0檢測(cè)內(nèi)存變換（中斷控制器或內(nèi)存不良）從視頻存儲(chǔ)器檢驗(yàn)之后復(fù)原；即將準(zhǔn)備描述符表。系統(tǒng)插件板選擇失靈。

42顯示窗口進(jìn)入SETUP。描述符表已準(zhǔn)備好；即將進(jìn)行虛擬方式作存儲(chǔ)器測(cè)試。擴(kuò)展CMOSRAM故障。

43若是即插即用BIOS，則串口、并口初始化。進(jìn)入虛擬方式；即將為診斷方式實(shí)現(xiàn)中斷。.44.已實(shí)現(xiàn)中斷（如已接通診斷開關(guān)；即將使數(shù)據(jù)作初始準(zhǔn)備以檢查存儲(chǔ)器在0：0返轉(zhuǎn)。）BIOS中斷進(jìn)行初始化。

45初始化數(shù)學(xué)協(xié)處理器。數(shù)據(jù)已作初始準(zhǔn)備；即將檢查存儲(chǔ)器在0：0返轉(zhuǎn)以及找出系統(tǒng)存儲(chǔ)器的規(guī)模。.

46.測(cè)試存儲(chǔ)器已返回；存儲(chǔ)器大小計(jì)算完畢，即將寫入頁面來測(cè)試存儲(chǔ)器。檢查只讀存儲(chǔ)器ROM版本。

47.即將在擴(kuò)展的存儲(chǔ)器試寫頁面；即將基本640K存儲(chǔ)器寫入頁面。

48.已將基本存儲(chǔ)器寫入頁面；即將確定1MB以上的存儲(chǔ)器。視頻檢查，CMOS重新配置。

49.找出1BM以下的存儲(chǔ)器并檢驗(yàn)；即將確定1MB以上的存儲(chǔ)器。.

4A.找出1MB以上的存儲(chǔ)器并檢驗(yàn)；即將檢查BIOSROM數(shù)據(jù)區(qū)。進(jìn)行視頻的初始化。

4B.BIOSROM數(shù)據(jù)區(qū)的檢驗(yàn)結(jié)束，即將檢查＜ESC＞和為軟復(fù)位清除1MB以上的存儲(chǔ)器。.4C.清除1MB以上的存儲(chǔ)器(軟復(fù)位)即將清除1MB以上的存儲(chǔ)器.屏蔽視頻BIOSROM。.4D。已清除1MB以上的存儲(chǔ)器（軟復(fù)位）；將保存存儲(chǔ)器的大小。.

4E若檢測(cè)到有錯(cuò)誤；在顯示器上顯示錯(cuò)誤信息，并等待客戶按＜F1＞鍵繼續(xù)。開始存儲(chǔ)器的測(cè)試：（無軟復(fù)位）；即將顯示第一個(gè)64K存儲(chǔ)器的測(cè)試。顯示版權(quán)信息。

4F讀寫軟、硬盤數(shù)據(jù)，進(jìn)行DOS引導(dǎo)。開始顯示存儲(chǔ)器的大小，正在測(cè)試存儲(chǔ)器將使之更新；將進(jìn)行串行和隨機(jī)的存儲(chǔ)器測(cè)試。.

50將當(dāng)前BIOS監(jiān)時(shí)區(qū)內(nèi)的CMOS值存到CMOS中。完成1MB以下的存儲(chǔ)器測(cè)試；即將高速存儲(chǔ)器的大小以便再定位和掩蔽。將CPU類型和速度送到屏幕。

51.測(cè)試1MB以上的存儲(chǔ)器。.

52所有ISA只讀存儲(chǔ)器ROM進(jìn)行初始化，最終給PCI分配IRQ號(hào)等初始化工作。已完成1MB以上的存儲(chǔ)器測(cè)試；即將準(zhǔn)備回到實(shí)址方式。進(jìn)入鍵盤檢測(cè)。

53如果不是即插即用BIOS，則初始化串口、并口和設(shè)置時(shí)種值。保存CPU寄存器和存儲(chǔ)器的大小，將進(jìn)入實(shí)址方式。.

54.成功地開啟實(shí)址方式；即將復(fù)原準(zhǔn)備停機(jī)時(shí)保存的寄存器。掃描“打擊鍵”

55.寄存器已復(fù)原，將停用門電路A－20的地址線。.

56.成功地停用A－20的地址線；即將檢查BIOSROM數(shù)據(jù)區(qū)。鍵盤測(cè)試結(jié)束。

57.BIOSROM數(shù)據(jù)區(qū)檢查了一半；繼續(xù)進(jìn)行。.

58.BIOSROM的數(shù)據(jù)區(qū)檢查結(jié)束；將清除發(fā)現(xiàn)＜