开源element + koa2 + mysql 设计的个人博客

前言

为了方便记录、查找文章，鉴于有道云使用的时候，感觉不是很方便，故写了改博客进行自定义管理、记录一些平时的成长。和大家一起学习共享

博客介绍

前后台分离式开发（包含博客的后台管理系统），笔者司职主要还是前端。
具备了代码高亮、权限管理、第三方 github 登录、评论与通知、以及邮件通知功能的个人博客...
具备文件导入导出功能，假如你之前用 hexo 博客, 那么你可以直接通过导入 md 文件迁移你的文章。

预览地址: 江品一派的博客
如未能正常访问，请联系我 QQ:2869659022

实现功能

前台：主页 + 列表页 + 搜索页 + 分类页 + 标签页 + 目录结构树
后台：文章管理 + 用户管理 + 文章树结构管理
文章锚点导航、回到顶部、markdown 代码高亮
用户：站内用户、github 第三方授权登录的用户（由于没有固定IP，第三方未验证）
用户可以评论与回复、以及邮件通知回复的状态
md 文件导入导出功能！可以直接上传 md 文件生成文章

技术栈

前端
- Element
- Vue + Vuex
- axios
- marked + higlight.js
后端
- koa2
- sequelize + mysql
- jwt + bcrypt
- nodemailer
- koa-send

项目结构

目录结构

.
│
├─config                // 构建配置
├─public                // html 入口
├─scripts               // 项目自动构建脚本
└─server                // 后端
    ├─config            // 项目配置 github、email、database、token-secret 等等
    ├─controllers       // 业务控制层
    ├─middlewares       // 中间件
    ├─models            // 数据库模型
    ├─output            // 导出文件包位置
    ├─router            // 路由
    ├─utils             // 工具包
    ├─app.js            // 后端主入口文件
    ├─initData.js       // 初始化基础数据脚本
    └─...
│
└─src                   // 前端项目源码
   ├─assets             // 静态文件
   ├─components         // 公用组件
   ├─layout             // 页面布局组件
   ├─plugins            // 插件库
   ├─router             // 路由
   ├─store              // vuex
   ├─utils              // 工具包
   ├─views              // 视图层
   ├─  App.vue          // 挂载主页面
   ├─  main.js          // 入口文件
   └─...

数据库模型

使用这个项目

git clone https://github.com/weiriver/vue-blog.git

## 安装依赖以及开启开发模式
cd vue-blog
cnpm i 
npm run serve

## 安装依赖以及开启开发模式 注意必须先配置好数据库、个人github账户登录名，配置文件在 server/config/index.js

## 数据库字符集为 utf8mb4 排序规则 utf8mb4_general_ci
cd server
cnpm i
npm runn dev

## 打包前端
cd vue-blog
npm run build

## 后端笔者则是采用pm2
cd server
pm2 start app.js

项目地址

github源码地址

表结构

总结

该博客断断续续写了一段时间，参考了网上各位大神的杰作，本着学习代码的同时，构建起自己的专属博客，记录自己的学习过程。其中还有很多细节的地方没做到位，但总体已经满足使用，欢迎大家指导。感谢郭大大的博客，主要功能参考他的技术方案，在他的基础上，增加了自己喜欢的东西，如文章的结构目录，方便直观分类。