vue的个人博客设计与实现(源码)【字数：8656】
个人博客相对于现实生存空间更具有随意性，也逐步成为人们感情宣泄，人们交际的重要工具；在这个生活节奏越来越快，个人隐私越来越透明的社会中，拥有一个完全属于自己并能畅所欲言的博客实在是一种奢侈；因此个人博客就应运而生，随着互联网技术的告诉发展和网站安全性的提高，个人博客的保密性也在提升，人们可以在自己的博客里面发表日志，撰写博客，上传相片，分享生活等。这篇论文主要讲述了个人博客的设计与实现，在前端设计中，利用Vue来布局前端框架页面，Css来装饰界面。后端主要用到Node.js+ MySql等技术。本文对博客系统进行了明确的分析，功能分为管理员和用户两大模块并进行了详细的功能介绍，在数据库设计模块，简要说明数据库的架构和完整性，最后对系统进行评价并对进一步改进提出的意见。
目录
一、引言 1
（一）课题背景 1
（二）课题意义 1
（三）设计目标 1
二、工具介绍 1
（一）Vue框架技术 1
（二）Node技术 2
（三）MySql 2
三、个人博客系统的需求分析 3
（一） 可行性分析 3
（二）系统功能模块图 3
1.系统功能框图 3
2.系统流程图 4
（三）系统功能需求分析 6
1.管理员 6
2.普通用户 6
（四）用例图来分析 6
四、个人博客系统设计 7
（一）系统总体设计 7
（二）数据库设计 8
五、个人博客系统的实现 9
（一）系统开发环境和运行环境 9
（二）前端功能的实现 10
1．首页设计 10
2．登录设计 15
3．注册功能 16
4．文章详情页评论功能 17
5．留言功能 19
6．验证码功能 22
7．搜索功能 23
（三）系统后端功能 24
1．文章发布功能 24
2．文章管理 26
3．每日一句发表 28
4．用户管理 29
*好棒文|www.hbsrm.com +Q: @351916072@
5．后台评论排名管理 31
6．后台留言管理 32
六、总结 34
致谢 35
参考文献 36
一、引言
（一）课题背景
21世纪的到来把Internet技术推向了一个高潮，人们对Internet技术知识也变得相当渴望，大数据，人工智能的发展也离不开Internet的促进，业界各种技术层次不穷，更新也非常之快，小白们没有一个好的环境或者好的平台学习起来也非常吃力，所以我选这个课题是为了让学习技术的初学者能够有一个好的平台进行学术交流能够，我提供技术文章，用户可以浏览评价我发表的文章，也可以给我留言发表自己的意见，跟其他用户进行讨论，更调动了个人学习的积极性。
实现博客技术方面本文运用了前端三剑客加Jquery，Axios，Vue以及后端Node写服务连接MySql完成了整个项目。
（二）课题意义
博客是一种表达个人思想的自媒体平台，它有利于好思想的传播，有利于社会的进步，在这个飞速发展的网络时代中是不可缺少的一部分，它的功能和互动性满足了广大群众的需求。
本网站需要登录即可浏览，可以让更多的解决燃眉之急，使学习技术不在枯燥乏味，可以加深自己对技术的理解，记录自己学习的点滴成长，可以获得很多志同道合的朋友，在自己进步的同时也帮助了他人。
自2016年以来，互联网发展越来越激烈，一个好的个人博客可以等于在无形中提升了自己在同行的竞争力 ，后期的维护也是对自己技术的查漏补缺对自己能力的一种挑战。
（三）设计目标
系统能够正常运行，前后端能够正常交互，用户可以登录，注册，浏览文章，发表评论，留言，查看足迹等，管理员可以进入后台对文章和每日一句进行更新及管理。
二、工具介绍
本章主要介绍本博客开发过程中使用的相关技术支持，主要包括Vue框架技术，Node技术以及MySql数据技术等。
（一）Vue框架技术
Vue是如今比较火爆的前端框架之一，当然还有React和Angular，那我为什么选择了Vue呢，原因如下：
1.性能更好
首先性能好在哪里呢？我们得知道什么影响Web应用的性能？那就是DOM操作，操作DOM是十分昂贵的，JS和 DOM是两种东西，每次连接都需要消耗性能，操作DOM也会导致重排和重绘，但Vue的核心是虚拟Dom，使用虚拟Dom可以减少Dom的操作，从而提升应用的性能，所谓虚拟Dom，即为伪Dom，假的Dom，他不是一个真实的Dom，而是由JS来模拟出来的具有真实Dom结构的一个树形结构，所以Vue性能更好。
2.视图数据分离
Vue视图，数据相分离，只用关心数据的变化，处理数据就是处理数据，显示视图就是显示视图，分层来做，这样更符合思考的逻辑。并且采用MVVM模式来管理，即M：Model（数据）V：View （视图）VM：ViewModel，关系图如下21：
图21 vue视图数据分离图
3.维护成本低
Vue代码量更少，并且逻辑更清晰，使用全家桶模式Vuex+Router+Axios+Elementui,让代码简洁明了。
（二）Node技术
Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它是运行在一个函数当中，它让JavaScript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
Node.js语法完全是Js语法，所以对于前端通知来说是一个很好入门的后端语言，并且它打破了过去JavaScript只能在浏览器中运行的局面。前后端编程环境统一，可以大大降低开发成本。
Node.js实现高性能服务器，并采用单线程的方式，这正好符合JavaScript的语言特点，Node保持了JavaScript在浏览器中单线程的特点。而且在Node中，JavaScript与其余线程是无法共享任何状态的。单线程的最大好处是不用像多线程编程那样处处在意状态的同步问题，这里没有死锁的存在，也没有线程上下文交换所带来的性能上的开销，所以Node非常适合在分布式设备上运行数据密集型的实时应用。
目录
一、引言 1
（一）课题背景 1
（二）课题意义 1
（三）设计目标 1
二、工具介绍 1
（一）Vue框架技术 1
（二）Node技术 2
（三）MySql 2
三、个人博客系统的需求分析 3
（一） 可行性分析 3
（二）系统功能模块图 3
1.系统功能框图 3
2.系统流程图 4
（三）系统功能需求分析 6
1.管理员 6
2.普通用户 6
（四）用例图来分析 6
四、个人博客系统设计 7
（一）系统总体设计 7
（二）数据库设计 8
五、个人博客系统的实现 9
（一）系统开发环境和运行环境 9
（二）前端功能的实现 10
1．首页设计 10
2．登录设计 15
3．注册功能 16
4．文章详情页评论功能 17
5．留言功能 19
6．验证码功能 22
7．搜索功能 23
（三）系统后端功能 24
1．文章发布功能 24
2．文章管理 26
3．每日一句发表 28
4．用户管理 29
*好棒文|www.hbsrm.com +Q: @351916072@
5．后台评论排名管理 31
6．后台留言管理 32
六、总结 34
致谢 35
参考文献 36
一、引言
（一）课题背景
21世纪的到来把Internet技术推向了一个高潮，人们对Internet技术知识也变得相当渴望，大数据，人工智能的发展也离不开Internet的促进，业界各种技术层次不穷，更新也非常之快，小白们没有一个好的环境或者好的平台学习起来也非常吃力，所以我选这个课题是为了让学习技术的初学者能够有一个好的平台进行学术交流能够，我提供技术文章，用户可以浏览评价我发表的文章，也可以给我留言发表自己的意见，跟其他用户进行讨论，更调动了个人学习的积极性。
实现博客技术方面本文运用了前端三剑客加Jquery，Axios，Vue以及后端Node写服务连接MySql完成了整个项目。
（二）课题意义
博客是一种表达个人思想的自媒体平台，它有利于好思想的传播，有利于社会的进步，在这个飞速发展的网络时代中是不可缺少的一部分，它的功能和互动性满足了广大群众的需求。
本网站需要登录即可浏览，可以让更多的解决燃眉之急，使学习技术不在枯燥乏味，可以加深自己对技术的理解，记录自己学习的点滴成长，可以获得很多志同道合的朋友，在自己进步的同时也帮助了他人。
自2016年以来，互联网发展越来越激烈，一个好的个人博客可以等于在无形中提升了自己在同行的竞争力 ，后期的维护也是对自己技术的查漏补缺对自己能力的一种挑战。
（三）设计目标
系统能够正常运行，前后端能够正常交互，用户可以登录，注册，浏览文章，发表评论，留言，查看足迹等，管理员可以进入后台对文章和每日一句进行更新及管理。
二、工具介绍
本章主要介绍本博客开发过程中使用的相关技术支持，主要包括Vue框架技术，Node技术以及MySql数据技术等。
（一）Vue框架技术
Vue是如今比较火爆的前端框架之一，当然还有React和Angular，那我为什么选择了Vue呢，原因如下：
1.性能更好
首先性能好在哪里呢？我们得知道什么影响Web应用的性能？那就是DOM操作，操作DOM是十分昂贵的，JS和 DOM是两种东西，每次连接都需要消耗性能，操作DOM也会导致重排和重绘，但Vue的核心是虚拟Dom，使用虚拟Dom可以减少Dom的操作，从而提升应用的性能，所谓虚拟Dom，即为伪Dom，假的Dom，他不是一个真实的Dom，而是由JS来模拟出来的具有真实Dom结构的一个树形结构，所以Vue性能更好。
2.视图数据分离
Vue视图，数据相分离，只用关心数据的变化，处理数据就是处理数据，显示视图就是显示视图，分层来做，这样更符合思考的逻辑。并且采用MVVM模式来管理，即M：Model（数据）V：View （视图）VM：ViewModel，关系图如下21：
图21 vue视图数据分离图
3.维护成本低
Vue代码量更少，并且逻辑更清晰，使用全家桶模式Vuex+Router+Axios+Elementui,让代码简洁明了。
（二）Node技术
Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它是运行在一个函数当中，它让JavaScript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
Node.js语法完全是Js语法，所以对于前端通知来说是一个很好入门的后端语言，并且它打破了过去JavaScript只能在浏览器中运行的局面。前后端编程环境统一，可以大大降低开发成本。
Node.js实现高性能服务器，并采用单线程的方式，这正好符合JavaScript的语言特点，Node保持了JavaScript在浏览器中单线程的特点。而且在Node中，JavaScript与其余线程是无法共享任何状态的。单线程的最大好处是不用像多线程编程那样处处在意状态的同步问题，这里没有死锁的存在，也没有线程上下文交换所带来的性能上的开销，所以Node非常适合在分布式设备上运行数据密集型的实时应用。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/685.html
