vueblog 前后端分离博客系统开源项目

我要开发同款
匿名用户2017年07月16日
58阅读
开发技术JavaScriptHTML/CSS
所属分类开源博客系统、建站系统
授权协议GPL

作品详情

采用vue.js加node.js开发的前后端分离博客系统,支持服务端渲染,标题动态切换,支持PWA添加到主屏幕,支持markdown语法及代码高亮,支持标签和归档功能。

开发环境和技术栈

操作系统:windows1064位

开发工具:webstromsublime

前端: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端效果图首页效果图

代码高亮效果图

后台发布页面

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论