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

Ashin 发布于2019-06-26 17:40 / 2731人阅读

摘要：后端主要使用的框架，数据库采用。后台管理登录采用与后端进行登陆状态的确认。本文首发于小站，这是一个积累和分享知识的个人博客

这篇文章搁置了很长时间，最终决定还是把它写出来，给刚开始学习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时分页显示

后台管理界面相关截图：

登录界面

文章管理

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

新消息

编辑器

账户设置

相关参考：

vue-ssr官方文档

基于vue-ssr服务端渲染入门详解

Vue2 SSR 的优化之旅

emoji

nodejs-ueditor插件
...

特此向以上作者们的无私分享精神致谢。

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

GPU云服务器云服务器搭建个人博客个人博客搭建个人博客用什么域名个人博客用什么域名好

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19264.html

圣杯布局中对left盒子设置负内边距-100%的一点解释

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。圣杯布局算是一个古老的话题了，关于其来源网上资料众多，在此不多做表述。但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left:...

JellyBool 2019-08-29 15:08 评论0 收藏0
圣杯布局中对left盒子设置负内边距-100%的一点解释

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。圣杯布局算是一个古老的话题了，关于其来源网上资料众多，在此不多做表述。但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left:...

LdhAndroid 2019-08-02 10:15 评论0 收藏0
个人博客全新UI：我心中你最美

摘要：那个月就是对着和的文档写出来了网站的前后端，也是第一次买服务器备案网站做反向代理读文档学做，怀念那些时光，让现在的网站有了基础。因此，管理系统听歌台被抽离成了单独的应用，后台利用做反向代理，用二级域名记性访问。不知道你是否也有想过完全用自己的代码实现自己的个人博客？定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下属于自己的东西。我也曾经历了同样的纠结，最终下定决心做了自己的...

oliverhuang 2019-08-23 11:52 评论0 收藏0
Django后台 + Wordpress主题快速搭建个人博客

摘要：既然学习了怎么能没有自己的一个小站呢没有自己精心打造的一个小站怎么敢说自己学习过呢说的再多不如直接干，我的个人网站也已经部署上线。既然学习了Python Web怎么能没有自己的一个小站呢？没有自己精心打造的一个小站怎么敢说自己学习过 Python Web呢？说的再多不如直接干，我的个人网站也已经部署上线。Django后台 + Wordpress主题，只要自己看上的主题都可以让它变成自...

linkFly 2019-07-31 10:15 评论0 收藏0