vue+node+mongodb 支持服务端渲染的博客系统

2017-07-20 18:18:14 +08:00
 wmui

感悟

历时两个多月,终于利用工作之余完成了这个项目的 1.0 版本,为什么要写这个项目?其实基于 vuejs+nodejs 构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前后端分离,对于博客类系统 seo 肯定很重要,索性就自己动手写了这个项目,其中也遇到了不少问题, 因为基于服务端渲染的项目不多,自己能力也有限,所以用了好长时间。本项目基于vue-hackernews-2.0开发,支持 PWA(需升级为 https) 演示地址: https://vueblog.86886.wang,项目地址: https://github.com/wmui/vueblog

开发环境和技术栈

操作系统:windows 10 64 位 开发工具 :webstrom sublime 前端:vue.js + vue-router + vuex 后端:node.js + mongodb (采用 express 框架)

特色功能

支持服务端渲染 支持标题动态切换 支持 PWA 支持 markdown 语法,样式采用 github 风格,代码高亮 支持文章保存为草稿 支持标签和归档功能

pc 端效果图

首页效果图

代码高亮效果图

后台发布页面

后台文章列表

修改个人信息

手机端效果图,以 chrome 浏览器演示

添加到主屏

启动效果

首页效果

文章页效果

更多效果大家可通过线上演示地址查看

本地运行项目

  1. 安装 mongodb 并启动
  2. 安装 git 工具
  3. 克隆项目到你的本地
  4. 修改配置项信息,/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
}
  1. 打开本地终端,执行npm run dev,访问 http://localhost:8080

结语

关于如何部署到线上和部署 https,教程已经更新,由于我也是初入职场不久前端,所以代码写的不完美还请大家见谅,大神们请默默飘过。此项目长期更新,希望能和大家一起学习,共同进步,首次在 V2EX 发表文章,若有不当之处,见谅见谅

1740 次点击
所在节点    分享发现
5 条回复
xqin
2017-07-21 00:28:18 +08:00
友情测试, 请楼主忽怪...
Trim21
2017-07-21 01:41:53 +08:00
图片全挂了..
wmui
2017-07-21 13:06:56 +08:00
@xqin V2EX 厉害的朋友过真多
wmui
2017-07-29 16:10:19 +08:00
@xqin 朋友你好,方便告诉我下应该如何修复这个问题吗
xqin
2017-07-31 16:06:22 +08:00
@wmui 正确验证用户的登陆状态.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/376780

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX