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

还是有很多要改的地方

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

项目地址在这,欢迎star,提issue,pr。

你可能感兴趣的文章

24 条评论
ma63d 作者 · 2016年09月26日

嗯,是的,略有点麻烦的.因为以前用wordpress写博客的时候,有时候没保存,突然关了页面或者浏览器,写了大半天的博客就特么的没了,所以写这个的时候专门考虑了一下这个问题,前前后后在这一块上设计和思考了很久,所以后来搞成了现在这种 笔记+博客发布的后台管理。这个系统因为是个人博客系统,所以只有鉴权登录啦,没有做用户管理。

+2 回复

mecode · 2016年09月25日

亲,你这样式自己写的么?

回复

ma63d 作者 · 2016年09月26日

不是啊,这样式一看就知道是vue官网的样式的,文中说了的,觉得官网的样式很好看所以直接用了cn.vuejs.org的样式,而且vue官网也是个开源的用hexo管理的项目,就直接找源码看了看样式,具体链接上面的文章里都有

回复

mecode · 2016年09月26日

以为是你手动扒的,嘿嘿! 最近刚学vuejs 也在做个人博客!刚好可以借你们的作为参考!

回复

半年的半年 · 2016年09月26日

文章管理自己去实现还是比较麻烦的,用户管理、图片上传、文章标签、封面图、摘要等功能,博主蛮厉害的

回复

ma63d 作者 · 2016年09月26日

哈哈,其实博客呈现那部分的样式并不多,手工写起来也很快的,因为其实页面很少很少

回复

半年的半年 · 2016年09月26日

我目前使用的方式是用hexo管理文章,nodejs读取hexo生成的数据库文件,hexo的文章管理方式挺好的

回复

ma63d 作者 · 2016年09月26日

嗯,是的,我之前的博客就是hexo弄的,加个github.io呈现出来特别简单,域名、阿里云什么的也不需要,但是作为一个前端还是觉得应该折腾一下,毕竟也是一个个人展示吧,以后放在简历里也还看得过去,而且这个自己搭的博客后台加了点实时预览、自动保存、笔记发布为博客之类的功能,写起博客来还是比较爽的,有了想法之后可以直接写,但是不发布到博客上,等到觉得写得差不多了就可以发布了,发布了之后还可以继续当做笔记继续去编辑,反正不会同步到博客那边,感觉又写好了的时候,就可以又发布一下,把新版同步到博客上面去。而且ui上优化了一下,可以直接看到哪些笔记是已经发布的,哪些是发布了之后又编辑了的,哪些是仅仅作为笔记都还没有发布过的。

回复

mecode · 2016年09月26日

我讲simplemde引入到vue里面的时候报错 Module not found: Error: Cannot resolve module 'fs' ==》 simplemdenode_modulescodemirror-spell-checkernode_modulestypo-js 请问你知道原因吗?

回复

半年的半年 · 2016年09月26日

不错?

回复

ma63d 作者 · 2016年09月27日

fs是node的自带模块呀,不应该出现在simpleMDE里呀,哥们要不你google查一下?

回复

kraaas · 2016年09月29日

赞一个,我正想撸一个。

回复

ma63d 作者 · 2016年09月29日

值得一试的,koa、vue什么的都很好上手

回复

assassin_cike · 2016年10月02日

后台主页的样式是自己写的吗?

回复

ma63d 作者 · 2016年11月05日

是啊 后台的样式写起来估计一小时都不到吧

回复

许文博 · 2016年12月02日

博主 你用的markdown 编辑器可以推荐下么

回复

ma63d 作者 · 2016年12月02日

你好,文章里面写了的 ,用的SimpleMDE

回复

HenryYong · 1月18日

马克先。。正在用相同的技术栈重新撸博客。。之前用的express,新版想用下koa,感觉ES6基础不行的话理解koa的写法有困难啊。。

回复

轻键快码 · 1月30日

博客样式很赞啊,移动端适配也很好,666

回复

0

哈哈,多谢支持~

ma63d 作者 · 2月26日
HenryYong · 2月26日

想请问下楼主,实时预览中的样式是你写的样式去覆盖的么?

回复

0

是的~

ma63d 作者 · 2月26日
载入中...
ma63d ma63d

322 声望

发布于专栏

chuckliu的前端学习笔记

记录一下自己的前端学习过程

6 人关注