前言
为了方便记录、查找文章,鉴于有道云使用的时候,感觉不是很方便,故写了改博客进行自定义管理、记录一些平时的成长。和大家一起学习共享
博客介绍
- 前后台分离式开发(包含博客的后台管理系统),笔者司职主要还是前端。
- 具备了代码高亮、权限管理、第三方
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
项目地址
表结构
总结
该博客断断续续写了一段时间,参考了网上各位大神的杰作,本着学习代码的同时,构建起自己的专属博客,记录自己的学习过程。其中还有很多细节的地方没做到位,但总体已经满足使用,欢迎大家指导。感谢郭大大的博客,主要功能参考他的技术方案,在他的基础上,增加了自己喜欢的东西,如文章的结构目录,方便直观分类。