用vue搭建的个人博客介绍 - mapblog小站

注意📢📢📢 最新版本已经重构完成了，详情请查看 Marco's Blog

---

这篇文章搁置了很长时间，最终决定还是把它写出来，给刚开始学习vue并且想用vue写个人博客的同学一个参考。因为当初我也是参考了其他人分享的知识，从一个vue小白变成了一个入门级选手，并最终完成了这个个人博客的搭建工作，代码已托管在Github-justJokee。线上访问请戳mapblog小站，所以现在有必要分享一下这个博客所用到的相关技术及实现的功能，希望能帮助有需要的同学^_^。
博客前台采用vue-ssr进行服务端渲染（解决vue前端渲染的seo问题），后台管理采用vue进行传统前端渲染。服务端渲染可参考博客前台代码front，前台渲染可参考博客的后台管理代码admin。后端主要使用nodejs的框架express，数据库采用mongodb。后台管理登录采用jsonwebtoken与后端进行登陆状态的确认。空间买的腾讯云，1M网速，学生套餐虽然便宜点，龟速也是够伤的。整站主要采用的技术栈如下所示：
前端：

• vue、vue-ssr
• vue-router
• vuex
• vue-meta
• axios
• webpack

后端：

• nodejs
• express
• mongodb
• mongoose
• jsonwebtoken
• pm2
• webpack

项目的主目录：

│  .gitignore
│  README.md
│
├─admin  后台管理（前台渲染）
└─front  前台页面（vue-ssr服务端渲染）

主目录说明：

• front 下所起的express服务是整个站点的服务器，负责前后台的数据交互、前台页面直出等。当然它也负责前台的开发模式热更新，通过NODE_ENV控制
• admin 下所起的服务仅供开发时的热更新和http请求转发,数据交互依靠上面所说的的front下所起的express服务器

博客前台主要实现功能：

• 全局响应式

• 文章

  • 按标签分类展示（大于10篇分页）
  • 按时间归档（大于10篇分页）
  • 第三方分享
  • 评论
  • 站内搜索（大于10篇分页）
• 留言（大于10条分页）
• 所有标签展示
• 推荐阅读浏览量前五的文章
• 支持QQ、Github第三方登录

博客的后台管理主要实现功能：

• 全局响应式

• 站内文章搜索

  • 关键字搜索
  • 时间范围搜索

• 已发表文章管理

  • 显示所有文章
  • 按标签分类展示
  • 实现删除、修改、预览功能

• 草稿箱

  • 实现删除、修改、预览功能

• 留言管理

  • 实现预览、删除留言功能
  • 管理员回复

• 评论管理

  • 实现预览、删除评论功能
  • 管理员回复

• 新消息

  • 对访客的评论、留言、赞的文章以及访问的哪一篇文章进行收集分类展示

• 文本编辑器 ---Ueditor

  • 文章发表、修改

• 账户设置

  • 密码修改
  • 数据库备份及下载备份文件到本地
• 退出管理系统
• 文章、评论、留言的数量大于10时分页显示

后台管理界面相关截图：

登录界面

文章管理

留言管理（与评论管理基本类似）

新消息

编辑器

账户设置

相关参考：

1. vue-ssr官方文档
2. 基于vue-ssr服务端渲染入门详解
3. Vue2 SSR 的优化之旅
4. emoji
5. nodejs-ueditor插件
   ...
   特此向以上作者们的无私分享精神致谢。

本文首发于mapblog小站，这是一个积累和分享web知识的个人博客