折腾了一下 ,用 vue koa 和mongo 搭了个人博客和博客管理网站
发布于 3 个月前 作者 Ma63d 867 次浏览 来自 分享

作为一个前端菜鸡在校生,跟风玩了一波vue之后感觉很爽,又跟风玩了一波koa、co之后更是爽的不行不行的,于是决定搭一个个人博客,再跟风学了学mongo、mongoose之后就开始上手干了,搭好了之后又搭了个博客管理后台,昨天终于把博客上线了,今天搞了搞bug,觉得还可以看,就跟大家分享一下吧。

先上博客地址吧 我的博客 update 多说的微信登录又挂了,登到多说官网上看了下,连多说的官网的微信登录也是挂着的,多说讨论区也全都反映这个情况,真是垃圾…

说说技术架构吧

整体来说分为三个部分,全都是前后端完全分离的

  • server 后台 包含了所有的后台服务,为博客和博客管理提供后台接口
  • client 前端 博客的前端呈现,被vue洗脑严重,界面模仿了vue博客,评论系统用的是多说(但是多说很不稳定…而且已经很久无人维护…)
  • admin 前端 博客管理平台的前端,功能上类似于带发布博客功能的印象笔记,markdown语法,预览和编写同步进行,带有自动保存功能,书写的文章只有在发布之后才会同步当前内容到博客client页面上,也完全可以当做一个笔记类应用去用(主要是我自己对笔记类应用重度依赖,又不想把博客和笔记分开,😂)。

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。

11 回复

前排膜拜一下

fetch 提供的api太基础 感觉要自己去封装不少的东西

@yuu2lee4 是的,感觉就是个promise版的xhr

看着像印象笔记。

fetch这东西在移动端上慎用

挺好的赞一个

@luoyjx 嗯,用了polyfill的,移动端支持度基本没有什么问题

@webbought 哈哈,因为自己当美工和产品, 所以基本就是看看各家的样式来找灵感了

看起来很棒的样子 From Noder

回到顶部