基于Vue+Node.js+MySQL搭建的简约清新个人博客

前言

断断续续经历了半个月，人生中的第一个博客诞生了。因为技术有限，所有还有很多功能、样式还未实现，不过通过之后知识的学习和经验的积累，这个博客会变得越来越好的。

1.网站模块

1. 博文归档
2. 书籍分享
3. 用户登录
4. 留言评论

以上只做了这几个模块，没有单独做主页展示，考虑到我的文章数量并不多，所以直接将博文归档放在主页，同时也起到一个重点突出博文的作用。归档左边部分和上边部分可以通过文章分类标签和文章标题进行对文章检索。

2.技术栈

技术栈的话因为我才对vue进行一个入门的学习，正好选用vue也可以对之前的学习做一个实践性的巩固。而后端呢，因为还未深入的学习，所以后端主要是通过其他博客的源码进行配置。 主要技术有

前端：Vue-Cil Element ui VueX Vue router Less axios

后端：Nodejs Express MySQL

3.主要功能

1. 文章浏览 对于文章的布局和排版，直接使用的是==markdown==语法来编辑文章，再将文本内容保存到数据库中，浏览文章的时候使用==mavon-editor==插件来解析数据库中的文本内容。

2. 文章评论 因为是个人博客，并没有很大的流量和稳定的用户访问，所以只保留了用户评论，放弃了回复功能。

3. 文章点赞 文章详细页左侧有一个点赞按钮，根据用户登录后存储的==cookie==判断是否可以点赞，点赞成功后刷新仍可继续点赞。

4. 用户登录、修改头像 用户输入昵称、用户名、密码进行登录注册，登录成功后可回到登录页面查看个人信息，点击头像位置可更换头像。

4.后台管理

目前是对文章和书单进行管理，主要操作包括查看详细内容、修改更新、删除的操作，永远离不开的增删改查。 ps:一次偶然中发现删除文章时没有将数据库中标签一并删除，考虑到相同标签的数量原因，之后会增加文章标签的管理，对一些不需要的标签进行手动删除。

5.效果图

总结

虽然大部分功能已经完成，但是很多地方仍需要继续完善，例如文章详情页的目录导航还未实现，等待数据加载的优化,没有对移动端进行适配等等。制作个人博客看似简单，操作起来却是遇到许多困难，在整个过程了学习到了大佬们的优秀网页设计，从中受到启发。

最后已将博客前端源码上传到github

GitHub博客源码 各位兄弟们，有用的话帮忙star一点。

网站地址