用 vue koa 和mongo 撸了我的博客和博客管理网站

做为一个前端菜鸡在校生，跟风玩了一波vue以后感受很爽，又跟风玩了一波koa、co以后更是爽的不行不行的，因而决定搭一个我的博客，再跟风学了学mongo、mongoose以后就开始上手干了，搭好了以后又搭了个博客管理后台，昨天终于把博客上线了，今天搞了搞bug，以为还能够看，就跟你们分享一下吧。

先上博客地址吧 个人博客

说说技术架构吧

总体来讲分为三个部分，全都是先后端彻底分离的

• server 后台 包含了全部的后台服务，为博客和博客管理提供后台接口

• client 前端 博客的前端呈现，被vue洗脑严重，界面模仿了vue博客，评论系统用的是多说(可是多说很不稳定...并且已经好久无人维护..)

• admin 前端 博客管理平台的前端，功能上相似于带发布博客功能的印象笔记，markdown语法，预览和编写同步进行，带有自动保存功能，书写的文章只有在发布以后才会同步当前内容到博客client页面上，也彻底能够当作一个笔记类应用去用,这样作的目的是出于有的时候在写文章a的时候,以为某一部分的内容过于复杂,能够另外开一篇文章b来仔细讲解下,可是等我写完a就忘了.并且这样作了以后博客也好用多了,我常常在码代码的时候遇到一些问题,这样能够直接打开博客后台,开一篇文章记录一下遇到的问题,可是不发布出去,提醒本身须要整理一篇相关内容的文章.之后一登这个管理系统就能够看到了这篇没有没有发布过的文章,就能够整理这篇文章,等到写完以后发布出去就能够了。

client，就是博客页面啦

博客呈现页面，基于vue(1.0)，先后端通讯用的fetch，评论系统用的是多说，界面模仿了vue博客，大量使用了其样式效果，还有不少要完善的地方。
因为[多说]()是基于dom的插件，使用的方式也是老掉牙的方式，大部分的使用者应该是wordpress、hexo之类搭建的同步网页而非单页应用，连源码也没有，想vue化一下都不行，因此，client端不少的坑基本都在[多说]()上了，因此，也遇到了之前不少没有遇到的状况，好比$nextTick也不能保证dom已经更新之类的，尝试了不少方案，可是结局都不是太好，甚至一度绝望的上了setTimeout(initDuoshuo,300)这种玄学代码去加载多说，不够好在今天差很少算终于解决掉多说的bug了。

技术栈

1. Vue && vue-router

2. fetch

3. stylus

4. marked && highlight

admin，也就是我写博客的页面了

列表页:

边写边预览，实时保存：

博客管理系统，也是先后端彻底分离的。功能上相似于印象笔记，能够实时保存文章，以为写好了以后能够发布文章，每次发布都会把文章同步更新到博客上，这样在client端就能看到。采用markdown语法，编辑器采用的是SimpleMDE，支持大量快捷键。

技术栈

1. Vue && vuex && vue-router

2. fetch

3. stylus

4. SimpleMDE && marked && highlight

server

基于restful，nodejs的话采用koa(koa 1)，数据库用了mongo。登陆这块的话用了jwt.

其实之前从没用过mongo，可是以为仍是要来玩一玩，毕竟这么火对吧。
既然用了koa，仍是说两句，虽然用的是koa1，主要仍是以为koa1比较geek（啥？这也能成为理由？黑人微笑），写起来感受屌屌的，虽然代码易读性可能没有koa2那么好，可是写的过程当中加深了对于generator promise 函数式等等的理解，中间也反复看了koa的源码，也仍是学到了一些东西的。

仍是有不少要改的地方

这才只是刚刚完成，还要不少要改进的地方

项目地址在这，欢迎star，提issue，pr。