感悟
用时两个多月,终究应用事情之余完成了这个项目标1.0版本,为何要写这个项目?实在基于vuejs+nodejs构建的开源博客体系有许多,然则大多数不支撑服务端衬着,也不支撑动态题目,只是做到了前后端星散,关于博客类体系seo一定很主要,干脆就本身着手写了这个项目,个中也碰到了不少题目, 由于基于服务端衬着的项目不多,本身才能也有限,所以用了好长时间。这里特别感谢@lincenying,供应了登录功用的处理思绪,也是我在开辟过程当中碰到最难处理的题目,本项目基于vue-hackernews-2.0开辟,支撑PWA(需晋级为https),演示地点:https://www.86886.wang,项目地点:https://github.com/wmui/essay
开辟环境和手艺栈
操作体系:windows 10 64位
开辟东西 :webstrom sublime
前端:vue.js + vue-router + vuex
后端:node.js + mongodb (采纳express框架)
特征功用
支撑服务端衬着
支撑题目动态切换
支撑PWA
支撑markdown语法,款式采纳github作风,代码高亮
支撑文章保存为草稿
支撑标签和归档功用
pc端结果图
首页结果图
代码高亮结果图
背景发布页面
背景文章列表
修正个人信息
手机端结果图,以chrome浏览器演示
添加到主屏
启动结果
首页结果
文章页结果
更多结果人人可通过线上演示地点检察
当地运转项目
- 装置mongodb并启动
- 装置git东西
- 克隆项目到你的当地
- 修正设置项信息,/server/settings.js,你也能够默许不修正,默许用户名:q,默许暗码:q
let user = 'q';
let pass = md5('q');
let avatar = 'avatar.jpg';//头像
let intro ='Never too old to learn';
let nickname = 'vueblog';
module.exports = {
dbUrl:'mongodb://localhost:27017/vueblog',
user:user,
pass:pass,
avatar:avatar,
intro:intro,
nickname:nickname
}
- 翻开当地终端,实行
npm run dev
,接见http://localhost:8080
结语
关于怎样布置到线上和布置https,后面会更新相干教程。此项目我会历久更新,希望能和人人一同进修,共同进步
更新: 本项目标2.0版本基于Nuxt.js开辟,后端用Koa + Mongoose进行了重写。
GitHub: https://github.com/wmui/essay