基于 Vue.js 和 Node.js 支持服务端渲染的开源博客系统

阅读 2431
收藏 257
2017-07-17
原文链接:github.com

感悟

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

开发环境和技术栈

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

特色功能

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

目录结构

    ┌─ build                          // 配置文件
    ├─ example                        // 演示
    ├─ public                         // 公共资源
    ├─ server                         // 服务端
    │      ├─ db.js                   // 数据库dao层封装
    │      ├─ md5.js                  // 密码加密
    │      ├─ router.js               // 服务端路由
    │      └─ settings.js             // 数据库初始化配置
    ├─src                             // 前端
    │   ├─ api                        // 所有的api请求
    │   ├─ assets                     // 前端模板
    │   ├─ components                 // vue组件
    │   │          ├─ admin           // 后台可复用组件
    │   │          └─ global          // 前端可复用组件
    │   ├─ router                     // 前端路由
    │   ├─ store                      // vuex文件
    │   ├─ util                       // 公共函数库
    │   │    ├─ filters.js            // 过滤器函数
    │   │    └─ title.js              // 标题函数
    │   ├─ views                      // 公共函数库
    │   │    ├─ admin                 // 后台组件
    │   │    ├─ Article.vue           // 文章详情页
    │   │    ├─ CreateListView.js     // 预渲染
    │   │    ├─ List.Vue              // 文章列表
    │   │    └─ Login.Vue             // 登陆
    │   ├─ app.js                     // 项目入口文件
    │   ├─ App.vue                    // 全局组件
    │   ├─ entry-client.js            // 客户端渲染
    │   ├─ entry-server.js            // 服务端渲染
    │   └─ index.template.html        // 模板
    ├─ static                         // 静态文件
    ├─ .babelrc                       // babel配置
    ├─ .gitignore                     // git上传忽略
    ├─ ecosystem.json                 // pm2配置
    ├─ manifest.json                  // PWA配置
    ├─ LICENSE                        // 开源协议
    ├─ package.json                   // npm包管理
    ├─ README.md                      // 项目说明
    ├─ server.js                      // 项目启动文件
    └─ yarn.lock                      // yarn配置

pc端效果图

首页效果图

image

代码高亮效果图

image

后台发布页面

image

后台文章列表

image

修改个人信息

image

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

添加到主屏

image

启动效果

image

首页效果

image

文章页效果

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

本地运行项目

项目地址:github.com/wmui/vueblo…

  1. 安装mongod并启动
  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,如果有需要后面会更新相关教程。此项目长期更新,希望能和大家一起学习,共同进步

评论
说说你的看法