koa2 + vue3 博客系统
本项目是由Naccl大佬的项目改造而成的,vue3+ts对当时的我来说,是比较陌生的,很多都是一边做一边学,所以不足之处请多指教。
koa2也是自己参照大佬的Java项目做的,其中很多Java的包都没有找到好的替代,所以可能有很多隐藏bug。
后台管理系统删减了很多功能,后续有精力的话会继续完善。
预览地址:
- 核心框架:koa2
- 数据库操作:mysql2
- MarkDown转HTML:markdown-it、markdown-it-anchor、markdown-it-attrs、markdown-it-container、markdown-it-emoji
- NoSQL缓存:Redis
核心框架: vue3+vue-router4+vuex4
JS 依赖及参考的 css:axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、echarts、tocbot、iCSS
后台基于 vue-admin-template开发,UI框架为Element UI
Semantic UI:主要使用,页面布局样式,个人感觉挺好看的 UI 框架,比较适合前台界面的开发,语义化的 css,前一版博客系统使用过,可惜该框架 Vue 版的开发完成度不高,见 Semantic UI Vue
文章排版:基于 typo.css 修改
- 创建 MySQL 数据库
mblog
,并执行/blog-api/mblog.sql
初始化表数据 - 安装 Redis 并启动
- 启动后端服务
- 分别在
blog-backed
和blog-view
目录下执行npm install
安装依赖 - 分别在
blog-backed
和blog-view
目录下执行npm run serve
启动前后台页面(yarn/npm)
- MySQL 确保数据库字符集为
utf8mb4
(”站点设置“及”文章详情“等许多表字段需要utf8mb4
格式字符集来支持 emoji 表情,否则在导入 sql 文件时,即使成功导入,也会有部分字段内容不完整,导致前端页面渲染数据时报错) - 如需部署,注意将
/blog-view/src/utils/request.ts
和/blog-backed/src/util/request.js
中的baseUrl
修改为你的后端 API 地址 blog-api
配置文件在根目录下的.env
,根据自己数据库来配置就好