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

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

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

后端&＃xff1a;

nodejs
express
mongodb
mongoose
jsonwebtoken
pm2
webpack

项目的主目录&＃xff1a;

│ .gitignore │ README.md │ ├─admin 后台管理&＃xff08;前台渲染&＃xff09; └─front 前台页面&＃xff08;vue-ssr服务端渲染&＃xff09;

主目录说明&＃xff1a;

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

博客前台主要实现功能&＃xff1a;

全局响应式
文章
- 按标签分类展示&＃xff08;大于10篇分页&＃xff09;
- 按时间归档&＃xff08;大于10篇分页&＃xff09;
- 第三方分享
- 评论
- 站内搜索&＃xff08;大于10篇分页&＃xff09;
留言&＃xff08;大于10条分页&＃xff09;
所有标签展示
推荐阅读浏览量前五的文章
支持QQ、Github第三方登录

博客的后台管理主要实现功能&＃xff1a;