V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
benyuwan
V2EX  ›  分享创造

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

  •  
  •   benyuwan · 2018-01-04 19:50:24 +08:00 · 6313 次点击
    这是一个创建于 2513 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先展示一下

    最初想做这个 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 语法的博客,并且可以实时预览

    还有一些优点,也有很多不足吧,当然我是想通过开源把它越变越好的~
    34 条回复    2018-01-18 13:01:24 +08:00
    cyio
        1
    cyio  
       2018-01-04 20:31:18 +08:00
    nodejs 现在可以完全不用 require 这种写法是不?
    benyuwan
        2
    benyuwan  
    OP
       2018-01-04 20:43:52 +08:00
    @cyio 可以不用,但是需要 babel-node.
    qfdk
        3
    qfdk  
       2018-01-05 01:42:47 +08:00 via iPhone
    我来秀博客 https://t.i2.tn
    zhangxiaoshang66
        4
    zhangxiaoshang66  
       2018-01-05 08:34:27 +08:00
    如果只是想有一个博客的话,可以考虑 hexo+gitpages 附上我的博客 xiaoshang.online
    zhaopengme
        5
    zhaopengme  
       2018-01-05 09:33:46 +08:00
    warcraft1236
        6
    warcraft1236  
       2018-01-05 10:31:12 +08:00
    这个头像,我服
    marknote
        7
    marknote  
       2018-01-05 10:50:36 +08:00
    居然变成了华丽的 blog 秀。
    那我也来一发 http://marknoteapp.com
    基于 reactjs+ redux + node + cloudkit。
    benyuwan
        8
    benyuwan  
    OP
       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
        9
    zhangxiaoshang66  
       2018-01-05 16:20:51 +08:00   ❤️ 1
    @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
        10
    wmui  
       2018-01-05 16:21:30 +08:00
    我也分享一下我用[Nuxt.js 构建的博客系统]( https://github.com/wmui/vueblog)
    xqin
        11
    xqin  
       2018-01-05 20:49:05 +08:00   ❤️ 1
    @benyuwan 友情测试.
    benyuwan
        12
    benyuwan  
    OP
       2018-01-06 12:34:12 +08:00
    @xqin 请问你是咋进去的啊
    xqin
        13
    xqin  
       2018-01-06 15:32:47 +08:00   ❤️ 1
    @benyuwan 仔细看看你的认证方式,以及你的使用方式.
    wjm2038
        14
    wjm2038  
       2018-01-06 22:49:14 +08:00 via Android
    头像不错,貌似是下限少女?
    benyuwan
        15
    benyuwan  
    OP
       2018-01-06 23:37:25 +08:00 via iPhone
    @wjm2038
    好像是随便找的
    benyuwan
        16
    benyuwan  
    OP
       2018-01-06 23:38:47 +08:00 via iPhone
    @xqin
    谢谢!我过两天去看一下!
    如果没看懂能来请教吗...?(・・?)
    benyuwan
        17
    benyuwan  
    OP
       2018-01-14 16:27:14 +08:00
    @xqin 谢谢,我看明白了😂😂我要么不应该暴露密钥,要么就应该再多加一些验证的 payload
    Macolor21
        18
    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
        19
    benyuwan  
    OP
       2018-01-14 20:17:05 +08:00
    @Macolor21

    你好。

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

    关于第二个问题,我渲染 markdown 使用的是 marked.js 和 highlight.js ,JSP 的社区里应该有类似的实现。
    Macolor21
        20
    Macolor21  
       2018-01-14 20:46:00 +08:00
    @benyuwan 谢谢回答。

    请问您后端集成的是哪个 MarkDown 编辑器呢?我用 editor 无法更改样式(不太了解前端);
    benyuwan
        21
    benyuwan  
    OP
       2018-01-14 21:11:36 +08:00
    @Macolor21

    simplemarkdown,README 里面有写哈
    ResidualSoils
        22
    ResidualSoils  
       2018-01-15 09:53:59 +08:00
    传不了,这火我传不了!
    benyuwan
        23
    benyuwan  
    OP
       2018-01-15 10:43:24 +08:00
    @ResidualSoils
    May the flame guide thy way!
    as9567585
        24
    as9567585  
       2018-01-15 18:18:59 +08:00   ❤️ 1
    被头像骗进来的
    cc55555
        25
    cc55555  
       2018-01-16 08:26:08 +08:00
    头像美腿~~~
    sobigfish
        26
    sobigfish  
       2018-01-16 13:19:41 +08:00
    @as9567585 #23 而且他这个头像直接改 query 参数 可以看到大图
    benyuwan
        27
    benyuwan  
    OP
       2018-01-16 13:26:41 +08:00
    @sobigfish 绝了哈哈哈哈哈
    as9567585
        28
    as9567585  
       2018-01-16 16:07:51 +08:00 via iPhone
    @sobigfish 牛 b,求参数
    sobigfish
        29
    sobigfish  
       2018-01-16 16:16:57 +08:00
    @as9567585 #27 呃,你看他头像 uri 一眼就发现啊(就 2 个 query s=48&d=retro ) 不清楚 lz 最高传的多大的,但感觉调高很多? s=的数值还是很清楚-。-
    dmelody
        30
    dmelody  
       2018-01-16 17:18:47 +08:00
    看了樓上的我改了 URL,剛好後面工位的 MM 設計師走過來,尷尬
    enlau0912
        31
    enlau0912  
       2018-01-17 03:53:52 +08:00
    @sobigfish 1024 試試
    zouyun5152
        32
    zouyun5152  
       2018-01-17 18:43:40 +08:00
    @dmelody #30 笑出眼泪
    dmelody
        33
    dmelody  
       2018-01-18 09:37:42 +08:00
    @zouyun5152 关键是我还还把后面加上了 N 个 0,基本是最大分辨率&配合我的超大显示屏,那效果真的吃鸡
    damonzhaofei
        34
    damonzhaofei  
       2018-01-18 13:01:24 +08:00
    很 fashion, 很 amazing 的感觉,学到很多 feature
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3583 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 04:20 · PVG 12:20 · LAX 20:20 · JFK 23:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.