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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2521 天前的主题，其中的信息可能已经有所发展或是发生改变。

先展示一下

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

Kov-Blog

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

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

先放上 demo 和截图~~~ demo

client 客户端界面

admin 管理端界面

介绍

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 条附言 · 2018-01-05 12:57:17 +08:00

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

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

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

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

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

blog

学长

ashen

Client

34 条回复 • 2018-01-18 13:01:24 +08:00

cyio

2018-01-04 20:31:18 +08:00

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

benyuwan

2018-01-04 20:43:52 +08:00

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

qfdk

2018-01-05 01:42:47 +08:00 via iPhone

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

zhangxiaoshang66

2018-01-05 08:34:27 +08:00

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

zhaopengme

2018-01-05 09:33:46 +08:00

https://zhaopeng.me 修一下

warcraft1236

2018-01-05 10:31:12 +08:00

这个头像，我服

marknote

2018-01-05 10:50:36 +08:00

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

benyuwan

2018-01-05 11:07:57 +08:00

@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

2018-01-05 16:20:51 +08:00

@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

2018-01-05 16:21:30 +08:00

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

xqin

2018-01-05 20:49:05 +08:00

@benyuwan 友情测试.

benyuwan

2018-01-06 12:34:12 +08:00

@xqin 请问你是咋进去的啊

xqin

2018-01-06 15:32:47 +08:00

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

wjm2038

2018-01-06 22:49:14 +08:00 via Android

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

benyuwan

2018-01-06 23:37:25 +08:00 via iPhone

@wjm2038
好像是随便找的

benyuwan

2018-01-06 23:38:47 +08:00 via iPhone

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

benyuwan

2018-01-14 16:27:14 +08:00

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

Macolor21

2018-01-14 19:01:58 +08:00 via Android

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

benyuwan

2018-01-14 20:17:05 +08:00

@Macolor21

你好。

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

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

Macolor21

2018-01-14 20:46:00 +08:00

@benyuwan 谢谢回答。

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

benyuwan

2018-01-14 21:11:36 +08:00

@Macolor21

simplemarkdown，README 里面有写哈