用 vue koa 和mongo 撸了个人博客和博客管理网站

Posted 2021-04-29 SegmentFault

作为一个前端菜鸡在校生，跟风玩了一波 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的源码，也还是学到了一些东西的。

还是有很多要改的地方

这才只是刚刚完成，还要很多要改进的地方