分享我自己用 Koa2+Vue2 写的一个博客管理系统 Ashen Blog

[benyuwan]

先展示一下

最初想做这个 Blog，主要是看到了一位厉害的学长 Chuck Liu 的作品：

Kov-Blog

非常感谢的是 Chuck Liu 学长开源的系统，我在开发的过程中从他的代码里学到了很多知识，从架构到开发的都有，在写客户端的代码时，因为对自己的设计感实在绝望，也沿用了学长的布局，非常感谢。

另外令人开心的是，写这样一个系统也帮助学长 de 了一个小 bug，也算是 Kov-Blog 的 contributer 了吧！

先放上 demo 和截图~~~ demo

客户端界面

管理端界面

介绍

Ashen Blog 系统遵循 ES6+的代码标准，前端采用了 Vue 2.x 作为开发框架，后端采用了 Koa 2.x 作为 RESTful API 服务器开发框架，是一款前后端分离并利用 axios 进行数据通信的单页面应用。

Client 端展示博客，目前有：文章列表、文章详情、日期归档、标签归档、阅读列表和个人介绍。

Admin 端管理博客，目前支持：Markdown 编写博客、快捷按键及 Tool bars、自动保存博客、批量标签管理、阅读列表管理、撰写个人介绍。

Server 端作为 RESTful API 服务器，负责与 Client/Admin 端进行数据通信。

数据持久化方面使用 Mysql 作为数据库。

最后

详细的文档在我的 github 上：

Ashen Blog

由于水平还不怎么样，所以代码肯定存在很多问题，希望大家多提 issue 和 pr，非常感谢~~~

另外走过路过不要忘记留下 star 啊~~~

二鞠躬~~~

说说这个系统里我自己最喜欢的几点：
1.可以新建草稿，草稿在未发布之前是在客户端不可见的，这就为我记录自己有时候的想法提供了便利

2.写博客时，博客会自动保存，不必再继续频繁的 commit 了

3.批量的管理 tag，可以让我的标签归档更加轻松

4.可以轻松的使用很多快捷键编写纯粹的 markdown 语法的博客，并且可以实时预览

还有一些优点，也有很多不足吧，当然我是想通过开源把它越变越好的~

[cyio]

nodejs 现在可以完全不用 require 这种写法是不？

[benyuwan]

@cyio 可以不用，但是需要 babel-node.

[qfdk]

我来秀博客 https://t.i2.tn

[zhangxiaoshang66]

如果只是想有一个博客的话，可以考虑 hexo+gitpages 附上我的博客 xiaoshang.online

[zhaopengme]

https://zhaopeng.me 修一下

[warcraft1236]

这个头像，我服

[marknote]

居然变成了华丽的 blog 秀。
那我也来一发 http://marknoteapp.com
基于 reactjs+ redux + node + cloudkit。

[benyuwan]

@zhangxiaoshang66

你好！首先非常感谢你的建议！

但其实我之前就是一个 静态博客建站工具 + Git page 的用户

不过我使用的建站工具是 Jekyll。

附上我旧博客的地址： http://danielwan.me

我用这样的方式写博客大概有一年左右的时间，可是感觉体验并不好。

虽然有很多很酷炫的模板可供选择，但是也存在一些问题：

1. 博客撰写 /提交的体验不好，经常会为了修改一些文字错误而反复的在 github 上做 commit，非纯 markdown 的语法也加大了学习难度

2. 在本地运行调试时想要做到 Hot Reloading 还需要自己配置

3. 提交文章到 github 上之后需要一定的编译时间

4. 不管怎么说，我们的服务还是存放在 Git page 上，对我来讲，我更想有一台自己的服务器

针对这些问题（当然这是 Jekyll 上的问题，但我相信 Hexo 或多或少也存在），我才想起自己写一个博客管理系统。

说说这个系统里我自己最喜欢的几点：
1.可以新建草稿，草稿在未发布之前是在客户端不可见的，这就为我记录自己有时候的想法提供了便利

2.写博客时，博客会自动保存，不必再继续频繁的 commit 了

3.批量的管理 tag，可以让我的标签归档更加轻松

4.可以轻松的使用很多快捷键编写纯粹的 markdown 语法的博客，并且可以实时预览

还有一些优点，也有很多不足吧，当然我是想通过开源把它越变越好的~

所以还是谢谢建议！

[zhangxiaoshang66]

@benyuwan 当然，一切都是 DIY 会很有意思。不过还是想针对你的回复做几点说明
首先 Jekyll 我没用过，不太清楚，在 hexo 中

1.如果博客是放在 git 上的 只用在发布文章的会有一次 commit, 如果是放在自己的服务器，只需要编译一次就好了，甚至不需要 git,就更不会有 commit

2. 编辑博客时如果想预览，可以运行 hexo server，不要额外设置就能实现热加载

3. 文章提交后貌似没有编译延迟，因为文章是在本地编译好的，部署只是做了 git push 操作

4. 在第 1 点也提到了， 博客放在自己的服务器上也是允许的

关于博主喜欢的几点，hexo 上貌似也能大部分实现

1. 有草稿的概念，hexo new draft <title> 新建草稿，这个没怎么用过

2. 写博客就是编辑.md, 不过只有发布后才能在线访问

3. tag 的话，这个不知道说什么. . .

4. hexo 写博客就是写.md ，当然也允许写 html. . .

抱歉，可能扫兴了，不过还是希望博主能将自己的博客做好，也给大家多一种选择. .

Koa 没用过，如果是 Express，肯定要下下来跑一跑了. . .

[wmui]

我也分享一下我用[Nuxt.js 构建的博客系统]( https://github.com/wmui/vueblog)

[xqin]

@benyuwan 友情测试.

[benyuwan]

@xqin 请问你是咋进去的啊

[xqin]

@benyuwan 仔细看看你的认证方式,以及你的使用方式.

[wjm2038]

头像不错，貌似是下限少女？

[benyuwan]

@wjm2038
好像是随便找的

[benyuwan]

@xqin
谢谢！我过两天去看一下！
如果没看懂能来请教吗...?(・・?)

[benyuwan]

@xqin 谢谢，我看明白了😂😂我要么不应该暴露密钥，要么就应该再多加一些验证的 payload

[Macolor21]

你这个博客和我想要完成的博客功能十分相似，但有几个问题想请教一下。我是用 servlet+MySQL+jsp 的，基本上看不懂你的代码。
1，如何只显示文章摘要呢？我用的是百度的 ue，直接 post 的是 html 代码。用 editor.md 的话，我是想要改写样式，像你那样的后端管理系统。
2，如果用 editor.md ，又如何改写样式，像你的页面那样呢？(我想用数据库存储 md 代码，在前端渲染。
我的博客实现思路是，只有一个数据库表，存储 ID，时间，标签，标题，内容。
1.servlet 查询出所有文章，然后显示标题，时间，标签和摘要。
2.详情页面中，查询具体 id 的文章内容，再显示。
3，归档，标签，分别用 servlet 做逻辑查询。
我的主要是 servlet 和数据库的逻辑，页面只是显示。

[benyuwan]

@Macolor21

你好。

关于第一个问题，我想你可以在 md 或者 html 里面直接插入一个 HTML 注释。
我的实现里使用的是<!-- more -->
显示的时候用正则截取摘要就 OK 了。

关于第二个问题，我渲染 markdown 使用的是 marked.js 和 highlight.js ，JSP 的社区里应该有类似的实现。

[Macolor21]

@benyuwan 谢谢回答。

请问您后端集成的是哪个 MarkDown 编辑器呢?我用 editor 无法更改样式(不太了解前端);

[benyuwan]

@Macolor21

simplemarkdown，README 里面有写哈

[ResidualSoils]

传不了，这火我传不了！

[benyuwan]

@ResidualSoils
May the flame guide thy way!

[as9567585]

被头像骗进来的

[cc55555]

头像美腿~~~

[sobigfish]

@as9567585 #23 而且他这个头像直接改 query 参数 可以看到大图

[benyuwan]

@sobigfish 绝了哈哈哈哈哈

[as9567585]

@sobigfish 牛 b，求参数

[sobigfish]

@as9567585 #27 呃，你看他头像 uri 一眼就发现啊（就 2 个 query s=48&d=retro ） 不清楚 lz 最高传的多大的，但感觉调高很多? s=的数值还是很清楚-。-

[dmelody]

看了樓上的我改了 URL，剛好後面工位的 MM 設計師走過來，尷尬

[enlau0912]

@sobigfish 1024 試試

[zouyun5152]

@dmelody #30 笑出眼泪

[dmelody]

@zouyun5152 关键是我还还把后面加上了 N 个 0，基本是最大分辨率&配合我的超大显示屏，那效果真的吃鸡

[damonzhaofei]

很 fashion, 很 amazing 的感觉，学到很多 feature