基于node vue博客系统的设计与实现毕业论文.docx

基于node vue博客系统的设计与实现毕业论文.docx

《基于node vue博客系统的设计与实现毕业论文.docx》由会员分享，可在线阅读，更多相关《基于node vue博客系统的设计与实现毕业论文.docx（64页珍藏版）》请在冰豆网上搜索。

基于nodevue博客系统的设计与实现毕业论文

---文档均为word文档，下载后可直接编辑使用亦可打印---

摘要

随着网络时代的发展，拥有着一个个人的空间是很多人所需要的，更何况在信息容易暴露的网络上，网络用户更是如此，可以更好的与他人交流，共享信息，互相学习，因此就出现一个概念——博客（blog）。

本系统以个人博客为主要概念，进行了解与分析，通过当下网络时代的需求，进行系统的开发。

本系统主要应用于两端——web端和admin端，两端都是基于前端框架vue和express框架，express框架是基于node.js进行开发的，而数据库的选用是mongoDB数据，它是一个非关系型数据库，编辑器为VScode,以此来实现该系统。

本论文中将先讲述该个人博客的开发背景以及设计模式，还会重点介绍当下流行的开发方式，前端vue的spa单页面开发，以及基于vue+node.js的前后端分离开发的当下流行开发理念。

系统如何以vue+noed.js实现mvvm模式控制。

最后将会将本博客系统的各个功能模块的实现进行必要的介绍，对系统各个功能的性能检测，以及对博客系统开发中，遇到的各种问题提出针对性的解决方式。

关键词：

node.jsvuemongoDB个人博客系统

Abstract

WiththedevelopmentoftheInternetage,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-endvuespasingle-pagedevelopment,andbasedonthevue+node.Jsbeforeandaftertheseparationofthedevelopmentofthepresentpopulardevelopmentphilosophy.Howthesystemtothevue+noed.JsMVVMpatterncontrol.

Finallywillthisblogsystemistherealizationofeachfunctionmoduleintroducesthenecessaryandthesystemperformancetestofthefunction,aswellastotheblogsystemdevelopment,variousproblemsputforwardthecorrespondingsolutions

Keywords：

node.jsvuemongoDBPersonalblogsystem

1.绪论

1.1.概述

博客，实际刚开始的名字是网络日记，英文名是weblog，在其后的发展中，有人刻意讲其的拼写改成了weblog。

于是就有了blog的出现，由词义我们就可以看出了博客的共享性，但是在时代发展的过程中，信息与数据的知识价值开始逐渐体现出来了，所以我们应当重视知识的价值，为此本系统通过知识的付费，来保障作者的知识产权。

1.2.研究背景

在当前时代中，随着我国科技技术的发展，以及社会生产力的进步，计算机网络在我们的日常生活中发挥着越来越重要的作用，是我们生活中最重要的辅助工具。

而在我国，网络科技的不断发展深刻地影响着我们。

我国使用计算机的人数不断的增加，而且我们的计算机水平也在不断的提升着，我们从从事互联网的从业人员人数的逐年提升就可以看出，尤其是互联网等领域的应用取得了非常不错的成绩。

因为网络应用的强大功能，使人们对此产生了十分巨大的市场需求，而且计算机也会在未来进一步的网络化发展。

而且在当今的信息化大爆炸时代。

网络技术也不断发展成熟，特别是其中的信息处理技术，它发展的也尤为迅猛。

当然其中有很多我们不能忽略的框架技术，其中的web框架技术也蜕变的很大。

因此，通过互联网的技术可以把地球村的人们联系起来。

人类从此进入了互联网时代。

而人们在互联网通信的方式也有着五花八门的呈现。

比如。

博客微博等等，在此我们可以预见。

在未来的发展中。

在网络上呈现交流的平台。

由此显得十分重要。

博客恰恰是其中一种手段帮助我们实现在互联网上的联系与交流，使我们实现信息共享，以及跨越实际空间的交流。

博客在我的认知里，它是一个拥有创造性的网络空间，世界上各种形形色色的人们可以在这里畅想自在地抒发自己的所想，以及帮助同一个圈子的人互通信息，以此来方便大家。

一直以来博客都拥有着许多的特点，如它的个性、开放、及时、有效等等。

在我国，博客的发展已经开始很久了，有着各种各样的形式，以及各种各样的圈子。

比如，知乎、CNDS等具有代代表性的博客系统，它们都做得十分成功，有专注于打造不同圈子的，也有致力于打造特殊圈子的博客。

在还没有博客之前，我们通过各种各样的渠道去与他人进行聊天，然而随着博客的面世，以及逐渐的展露头角，这种状况就慢慢开始发生改变了，人们可以通过在博客的这个个人空间里与他人相互交谈，而且这种交谈是建立在大家拥有同一种兴趣爱好上的，通过大家感兴趣的文章而相遇，大家各抒己见。

而且在生活中，有着很多的事情会激发我们的想象，只有我们将这些对生活的思考几时的记录下来，我们就会将它们深深地烙印在我们的脑海里。

当思考被转换成自己特有的观点，这不就我们写博客的追求吗。

我们可以同过写博客文章记录我们的进步发展，不单单在其中表达自己所想，更珍贵的是我们回首时的总结。

1.3.博客发展现状

如今博客的发展，博客是网络上的第四种网络交流的新方式。

表达各种思想的虚拟场所，正是网络用户所拥有的需求。

博客文章的知识范围很广泛，有着各种各样专业知识的集合，无论是个人还是集体亦是如此。

博客其实很早已经出现了，具体日期可以追溯到2000年之前。

直到2000年后的几年，是博客发展的阶段。

很多不同类型的博客网站不断出现，特别是一下偏向技术性的技术博客。

然而在我们的国家，博客于2002年被首次引入，一引入便在中国网民中掀起了涛涛浪潮，以极快的速度发展了起来。

因为其做为一种特异的网络表达方式，所以越来越受网民的青睐，至此博客的用户数量在中国，一直以较高的速度增长着。

由图中可以看出：

图1.1博客用户的发展

当然这也是因为，博客特有的特点以及优势：

1、开放共享性

2、个人性

3、交流平等性

4、发布信息门槛性

5、上传即时性和沟通延时性

经过时代的发展，博客的使用人群也在发生着天翻地覆的变化，变得更加趋向于专业化，更加深度化，不少的学者、作者以及各种领域的顶尖专家都在通过博客，让大众了解到更加多更加详细的专业性知识，这是一种新的文化传递方式。

我们通过与他人的分享交流，不断的拓展自身的知识。

籍此，我相信博客存在的合理性，我们需要它，它将是我们共享知识信息的重要途经。

1.4.系统研究的意义及目标

因为经过时代的发展，博客的使用人群更加趋向专业化，所以我想通过当前的博客系统，我从事互联网事业的从业人员，打造我们的专业博客，通过本博客系统结识更加多志同道合，兴趣相投的朋友，而且随着越来越多具有专业知识的blog的出现，也让我看到了，blog其中所蕴含的巨大信息价值，为不同专业的人群形成专业的博客，blog正以一种新的方式，在生活、学习和工作等各个方面改变着我们的传统网络以及我们的社会结构，信息的交流不再无序，变得越来越有明确的选择以及方向性，个人的思想与社群智慧的结合的成效越来越突出。

它正在改变我们的生活。

本次系统的开发目标，主要的想法是以两端进行开发，分别为web端以及admin端，它们分别有普通用户以及管理员用户进行分别操作。

而web端和admin端，前端服务器以及后端服务器的方式进行开发，而其中web端以及admin端的客户端都公用着同一个服务器端。

其中管理员用户主要对admin（后台管理系统）端进行操作，管理员用户进入admin（后台管理系统）端后，可以实现查看用户列表，对用户列表的数据进行编辑、删除功能，对用户进行新增功能；对分类列表的删除、编辑、新增的功能；对文章列表的数据进行编辑、删除功能，对文章进行新增功能，对文章是否需要置顶、以及是否需要购买进行操作。

普通用户在进入web（博客展示系统）端后，可以实现查看博客、评论博客、通过博客的评论与其他的用户进行交流，可以查看通过不同日期进行归档的博客内容，查看通过不同分类标签进行归档的博客内容，可以实现查看个人信息功能，可以实现vip文章的购买功能。

因此，博客系统中

admin（后台管理系统）端主要有以下几个功能模块：

（1）实现登录功能；

（2）实现对用户列表的增删改查功能；（3）实现对分类列表的增删改查功能；（4）实现对文章列表的增删改查功能，是否需要购买功能。

web（博客展示系统）端主要有以下几个功能模块：

（1）实现登陆注册功能；

（2）实现用户退出功能；（3）实现查看个人信息功能；（4）实现通过时间节点进行文章归档功能；（5）实现通过标签进行文章归档功能；（6）实现vip文章购买功能；（7）实现文章评论功能；

2.系统分析

2.1.系统需求分析

2.1.1.用户角度分析

在需求分析的过程中，我会以角色为主体来展开，通过示意图的例子讲其中的续期联系展开来。

这其中的几个概念：

（1）角色：

代表该事件的用户

（2）例子：

这是以角色为中心而展开的，方便我对各种需求有着更加直观的理解。

在这个博客系统的开发中，我设置了两种权限：

第一种是后台系统管理员权限，负责管理用户、分类、文章的增删改查。

第二种是前台展示系统的普通用户权限，可以查看个人信息，对文章进行评论、查看文章以及购买文章的权限。

因而，博客系统中只有着两种身份：

一是博客的管理者，而是博客的阅读者。

图2.1两种角色之间的联系

2.1.1.1.普通用户

想要进入web（博客展示系统）端，首先需要先进行博客账号的注册，通过邮箱信息、用户姓名、密码进行注册。

只有注册完成了，才能进入系web端进行操作，否则将不能进行后续操作。

当用户注册成功之后，用户可以相应的实现更加多的新功能，如下图中，就会有种相应的展示，展示其中的权限：

图2.2普通用户的权限

用户在查看文章的时候可以与其他的普通用户进行互动交流。

当用户在文章下留下评论时，其他用户进行浏览时也能查看以及交流互动，继而继续进行交流。

2.1.1.2.后台管理用户

想要进入admin（后台管理系统）端，首先需要拥有提前设置好的用户，通过该用户进行后台登录，在登录admin（后台管理系统）端后，就可以进行对用户、分类、文章的操作了，若没有相应的用户账号，则不能登admin端的后台管理系统进行相应的操作。

下图是展示博客后台的各种管理权限：

图2.3后台管理用户的权限

后台管理用户的权限比较大，可以对用户进行之际的操作，所以我们应当注意保护好个人信息以及小心操作。

2.1.2.功能模块分析

2.1.2.1.admin端（博客后台管理系统）

1、博客后台登录模块

博客后台系统的登录必须是在创建数据库的时候，先创建出一个admin账号，然后我们使用该账号才能进行博客后台的首次登录，只要首次登录后，才能在博客后台进行其他用户的新增。

而且我在服务器端写了登录验证，将登录的用户名以及密码进行了验证，最后验证账号密码成功后，会返回给前端一个token，进下接下来的页面跳转，在前端写登录的时候，必须要在往服务端发送异步请求的时候，添加一个请求拦截器，在异步请求的头部信息中加入token令牌，这样才能进行其他页面的数据的异步请求，因为我在服务器端写了一个token令牌的中间件验证，若验证失败，服务端将会给客户端发送一个状态码为401的错误。

所以当我们在用户模块新增了用户的时候，新增用户在登录的时候也会得到一个token令牌，否则用户将无法进行下一步的操作。

而且用户想在浏览器直接通过url地址的输入直接跳转到其他页面也是不行的，因为我在前端的router路由组件中写了路由守卫，对没用token令牌的用户拒绝访问，以此来实现减少权限的丢失。

次功能模块主要实现的功能是：

（1）后台博客用户的登录；

（2）博客登录后的管理；

（3）直接跳转到了博客的welcome页面；

2、博客后台管理的用户模块

当我们实现了博客后台的登录以后，我们可以对用户数据进行进一步的操作了，其中的主要功能：

（1）查看用户列表，在查看用户列表的这一个次功能模块中，我通过对服务器提供的api接口进行了axios异步请求，讲用户的数据以数组的形式进行了获取，并将数据的信息以for循环的方式渲染在了view视图中。

（2）对个别用户进行了编辑操作，在编辑操作的这一个次功能模块中，我是通过当用户点击编辑小按钮的时候，页面会出现弹窗，用户可以在弹窗中将自己想修改的数据修改掉，在我的设定中，用户名是不可以更改的，用户的其他信息都可以更改，如邮箱和角色。

当用户点解确定时候，我会将需要更改的信息提交到服务器端，对数据库进行信息的修改。

（3）对个别用户进行删除操作，在删除操作的这一个次功能模块中，是当用户点击删除小按钮的时候，会弹出一个删除用户的消息弹窗，只有当用户再次点击确认的时候，才会将要删除的用户信息删除，这主要是为了防止用户误删。

（4）新增用户，在新增用户的这一个次功能操作中，是当用户点击添加用户的按钮时，会弹出一个弹窗，用户依照弹窗中的表格填写新用户的信息就可以进行用户的新增了。

当然需要说明的是，在所有需要输入的操作中，在前端都写一个输入格式规则，以及提醒输入规则，所以在用户输入的时候，会进行一次前端的验证。

其他模块亦是如此。

3、博客后台管理的分类模块

当前模块也需要我们在实现登录功能后，才能进行对此模块的操作，此模块主要是为了对文章的分类而建立的，为的是能对文章进行分类处理，使博客的操作更加的人性化。

它其中的主要功能有：

（1）新建分类次功能模块，此模块主要功能为新建分类。

（2）分类列表次功能模块，此模块主要实现分类数据的渲染展示，也有着其他与用户之间的交互功能，如点击编辑小按钮实现对分类信息的编辑，值得一提的是，点击跳转的时候，其实是跳转到了新进分类的组件中，不过在组件中作了判断，以此来实现区分。

其中该次功能模块还有删除功能小按钮以及添加分类小按钮。

4、博客后台管理的文章模块

此功能模块与分类模块的写法相似，都是用于数据的展示渲染以及对信息的增删改的功能操作，所以就不过多进行阐述了。

2.1.2.2.web端（博客展示系统）

1、博客展示的登录注册模块

在我们想进入博客展示系统的时候，我们必须先注册一个账号，然后才能进行登录进入博客展示系统，至于为什么一开始就要进行注册，是因为本系统有着文章购买功能，所以在所掌握的技术中，唯有通过用户的token令牌的身份验证，我们才能确定用户的准确身份，用来区分用不同的用户，在我们进行了注册登录之后，我们就能进如入主页面了。

次功能模块的主要功能实现是：

（1）用户的注册与登录；

（2）跳转到展示首页；

当然在注册登录的时候，都会有文本格式的校验。

2、博客展示的首页渲染模块

首页渲染模块，有着许多的小渲染展示以及功能的模块，我将由上往下逐个说明，在首页渲染模块中，顶部是一个顶部导航栏，在顶部导航栏中有着首页（当前页面）模块的跳转、归档模块跳转、标签模块跳转、关于模块跳转以及显示当前用户名，其中显示用户名中是一个可以点击的下拉列表，在列表中有着两个小功能模块，分别是个人信息展示的跳转以及退出登录模块。

往下是主体渲染的部分，在这里可以通过vue的router-view实现单页面的跳转，在这里我使用了hash跳转，主要是在router.js中实现子组件的跳转展示。

现在展示的是文章信息列表。

再往下是网站信息的底部展示，在这里有计算文章总数的功能、展示置顶文章的功能以及展示最新文章的功能。

3、博客展示的文章列模块

当前模块主要是对首页中的文章列表渲染进行详细的解释，在实现的文章列渲染中，需要介绍到的是：

（1）在每一个文章卡片上都会有在发表文章时已经写好的文章标签渲染在文章卡片上，当我们鼠标接触文章卡片的主要显示的空白处时，当时发表文章时的文章摘要就会显示在文章卡片的空白处。

（2）是在文章卡片上，有个别文章卡片会显示有vip字样，当文章卡片上显示有该字样的时候，说明该文章卡片需要我们购买后，才能进行文章详情展示页面进行查看文章，而其中的逻辑原理是，当我们点击需要购买的文章卡片是，会先进行判断，判断当前用户是否有购买该文章，当用户的购买记录中有购买该文章的时候，便直接跳转进入文章详情页面，而当用户没有购买记录的时候，会弹出弹窗询问用户是否进行购买，当用户点击确定的时候，会往后台发送一个购买请求，后台收到信息后，会返回200字段，当客户端收到该字段后，会再一次询问用户是否进行购买，当用户再次确定购买时，会再一次向后端发送请求数据，后端会返回一个支付宝的支付页面让用户进行支付购买，该购买功能是基于支付宝的沙箱版的，并不是真实的支付，最后支付成功后，用户将会跳转到文章详情页面，进行文章的阅读。

4、博客展示的归档模块

当前模块是通过以年为单位的时间轴，对文章信息进行展示，以时间轴进行排序。

当然内部会也会以时间发表的先后顺序进行信息的排序。

5、博客展示的标签模块

当前模块是以标签进行文章信息的分类排序。

6、博客展示的个人信息模块

该模块将展示用户的个人信息，以及用户购买了的文章的id信息。

2.2.系统技术分析

在进行项目开发之前，我们都会有一个绕不开的话题——技术选型，现阶段对于开发一个系统有着很多技术可以挑选，有新进冒出的，也有经过前人一段时间的沉淀有着良好的开发生态圈的。

在系统设计的开端，咱们需要对系统进行刨析，依据系统的实践状况对现有系统的需要进行分析，抉择出适宜系统的技术框架体系。

在前端框架方面，现阶段比较流行的框架有Vue.js和angular.js，以及react.js库，它们都是以js为基础沿伸出来的前端框架以及js库，在现阶段最流行的这三个前端框架以及js库中，都有着各自的特色，以及良好的开发生态圈。

而我将拔取vue.js做为本系统的前端框架，主要是因为vue.js的以下特点：

（1）插件化；

（2）渐进式框架；（3）指令化；（4）双向数据绑定。

因为vue.js有着双向数据绑定，以及由数据进行驱动的特性，所以vue的技术框架也比较的适用，而且我个人也是对vue.js比较熟悉，所以前端框架方面就选择了vue.js。

而在服务端框架构建的服务器的技术选型中，也有着很多成熟的技术框架可以挑选，比如现在主流的技术框架有Java、PHP、Node.js等，从自身角度出发的话，因为一直以前端方面的工作为学习驱动，所以对javascript这门语言的了解相较愈加深入，所以我选择了node.js做为后端框架，主要是其中的express框架。

而且node.js也有着它的优点：

（1）事件驱动；

（2）适用于实时的数据交互应用；（3）以js代码为运行环境；（4）单进程、单线程；（5）而且也依赖于谷歌的v8引擎；（6）非阻塞i/o。

所以服务端的框架，我选择了node.js的express框架。

我选择了mongoDB作为开发用的数据库，因为它是所有非关系型数据库中最接近关系型数据库，它有着以下的特点：

（1）数据的最终一致性；

（2）特殊的存储结构。

（3）性能优越，可以快速获取数据；（4）有着丰富的第三方支持；（5）有着大容量的存储；（6）保证用户能快速地访问查询。

所以在数据库方面我抉择了mongoDB数据库。

2.2.1.Node.js简介

在初期，作为为服务端脚本语言的PHP备受web运用的程序开发者喜爱，而javasript事先始终被开发者们以为只是前端的一种脚本开发语言，但是直到node.js的出现，javascript这一门语言越来越备受关注。

其中node.js基于chrome的javascipt运转机制的平台上的，它可以用于构建出可扩大的、疾速的、网络方面的应用程序。

Node.js是使用着一种事件驱动、非阻塞的I/O模型，这将跨分布式设施的数据密集型实时应用愈加的高效、完善和轻量。

而且从原理上讲，node.js其实是对chrome的浏览器引擎的二次封装，它可以实现类服务器的环境，也可以用来实现可扩展的应用。

而且在浏览器的运行环境中，javasrcipt的代码就是由浏览器引擎进行解析的，而node.js就是提供了这样的一种类似javascrip的引擎解析器，以此来完成与浏览器相同的性能。

与此同时，它也是一种非常特殊的运转环境。

它为前端javascrip代码提供了各种的服务接口，而且也令前端的开发者可以更容易上手后端的开发思维了。

2.2.2.Node.js中的express框架

Express是一个node.js作为后台服务器的一个开源的框架，所以一直受到很多开发者的欢迎。

只要我们使用这个框架中所特有的一些特性，我们就可以快速地开发一些比较全面的web应用程序了，和绝大多数的web应用开发框架一样，express框架帮我们封装好了很多的方法，将许多复杂繁琐的代码简化了，让我们对代码的编程更加的轻松，但是express框架最突出的地方，是它的路由机制。

那么什么是路由机制呢？

是指我们如何通过url地址实现客户端的数据请求响应，其中的http请求有着多种的方式，分别是get、delete、post、put等。

它的具体结构是：

app.method（path,[callback...],callback）。

在这个结构中，app是express的实例对象，method是HTTP中的请求数据方式（POST、GET、DELETE、PUT）,path是服务器上的url请求路径，而callback是当请求路径匹配时就会执行的函数。

由于express路由机制的出现，所以对于凸显ex