代码拉取完成，页面将自动刷新
一直想拥有一个属于自己的博客网站，用来总结自己的学习心得，因为发现自己记性不好，知识学完就忘，并且学到的知识不成体系，东一块西一块，这样就导致了，当每次间隔一段时间不用某个技术时，都需要重学一遍（其实学习就是个重复的过程，这种现象也很正常）。
那么既然有了想法，就开始行动起来...
项目调研
当在github和gitee搜索使用express或者koa开发的博客项目时，发现都只是很简单的一些demo，并且年代很久远，所以最终决定参考一个java的博客项目：蘑菇博客，（PS：文档写的简直是太nice了，并且作者非常励志和耐心，在蘑菇博客的交流群里问了很多问题都帮忙解决了，很是感谢，java方向的可以学习一下。）
另外在实现管理端时，还参考了另外一个项目，smart-admin，是由1024实验室团队开发的一套互联网企业级的通用型中后台解决方案，后端也是用java写的，不过我主要参考的是前端代码（PS：写的是太好了，各种vue2的高级用法，非常推荐学前端的同学好好学习一下这个项目）。
当把所有的运行环境在本地安装好，项目成功跑起后，就开始了我的改造之旅...
最终目标：前端和后台管理端参考蘑菇博客的UI，代码书写风格参考smart-admin，自己重零设计实现一遍；将java写的后台服务改造为node，使用koa2来自己搭建后台，数据库使用mysql；
技术选型
最终的技术选型为：
| 名称 | 技术选型 |
|---|---|
前台和管理端vue-blog-web``vue-blog-amdin
|
vue2 |
后台服务koa-blog-service
|
koa2 |
| 数据库 | mysql |
于是就有了pupublog，一个vue2+koa2+mysql实现的单人博客项目
具体的项目细节文档，正在补充，敬请期待
（PS：前端无论是使用react还是vue，后端无论是express或者koa2或者egg等等，其实都是可以的，选择一个做下去就行了，做来做去发现前端最重要的还是基础。做这样一个项目也是为了体验一下从零开发一个项目的感受，然后部署上线、写文档，开源，这样一个过程，虽然花费了很多时间，但是最后也收获了很多，后期会继续完善的，欢迎大家提issure和留言评论，如哪里有错误的地方，也欢迎指正，让我们共同进步💪）
博客参考蘑菇博客的UI，重构前后台页面，前端代码编写风格以及目录结构参考smart-admin。
基于vue2-cli脚手架，从零构建项目。对axios进行二次封装，使用mixin对公共模块代码抽离，使用keep-alive组件对路由进行缓存，优化性能，使用路由守卫对错误地址进行拦截，使用vuex对全局状态管理，合理的使用cookie、localStorage、indexDb本地缓存实现功能开发，遵循高内聚低耦合的特点封装组件，模块与路由命名达到见名知意，复杂页面逻辑都有注释。
仿照Gitee，重写了留言和评论组件。
支持emoji回复，留言审核，留言举报，留言点赞，留言删除（管理员对所有留言具有删除权限）。当留言审核未通过时，仅自己可见（避免非法输入）。
仿照掘金，重写了文章目录组件。
根据HTML文章文档，自动生成文章目录，支持点击标题目录跳转到指定位置处，并高亮显示。支持滑动高亮 （会判断当前滑动位置，高亮对应标题）
仿照现代JavaScript教程的目录样式，重写了专题模块。
仿照掘金登录，重写了登录模块，现已支持Gitee登录和QQ登录。
点击按钮会在页面新打开窗口，当登录成功后，窗口自动关闭。通过window.opener.postMessage实现跨窗口通信，获取token。
为了满足业务需求，使用koa2重写了后台接口，从零搭建后台项目工程。
良好的目录结构，目录层级为，router（后端路由）->controller（参数接收和返回前台数据）->validation（参数校验）->service（业务逻辑）->dao（操作数据库）->sql（各模块的sql语句）
为了提高接口和后台页面开发效率，自定义代码生成器
用代码去写代码，减少重复工作，提高准确率，只需编写关键逻辑代码即可。开发效率大幅度提高，从三天一个模块（增删改查+分页，前台页面和后台接口），缩短为十分钟。
代码生成器执行逻辑如下：
支持Markdown编辑，使用的vditor第三方库
支持文档的导入导出（md格式）
支持图片上传
等等等等
前端vue2
后端koa2
| 技术 | 说明 | 官网 |
|---|---|---|
| koa2@2.0.0-alpha.7 | 一款基于nodejs的web开发框架，开发后台服务使用 | https://koa.bootcss.com/ |
| axios@0.21.4 | 后台向第三方发送请求，比如第三方登录的时候使用 | https://github.com/axios/axios |
| bcryptjs@2.4.3 | 密码加密工具，存入数据库的密码是hash值 | https://github.com/dcodeIO/bcrypt.js |
| dayjs@1.10.5 | 时间转换工具 | https://dayjs.fenxianglu.cn/category/ |
| ejs@3.1.6 | 模板引擎，将.ejs文件解析为html | https://ejs.co/#docs |
| jsonwebtoken@8.5.1 | JWT认证，将用户信息解析成token串，返回给前台，后台通过用户携带的token来识别用户，用户后台登录 | https://github.com/auth0/node-jsonwebtoken |
| jszip@3.7.1 | 后台将查询的数据解析成zip包，前台通过a标签直接下载 | https://stuk.github.io/jszip/ |
| koa-body@4.2.0 | koa接收post参数中间件，也可以接收前台上传的文件 | https://github.com/koajs/koa-body |
| koa-passport@4.1.4 | koa拦截器中间件，可以对需要登录才能访问的接口进行拦截，搭配passport-jwt使用 |
https://github.com/rkusa/koa-passport |
| passport-jwt@4.0.0 | 拦截路由，解析token中间件 | https://github.com/mikenicholson/passport-jwt |
| koa-router@10.0.0 | 后台接口路由中间件 | https://github.com/koajs/router/blob/master/API.md |
| koa-static@5.0.0 | 暴露项目文件夹中的文件供外部访问 | https://github.com/koajs/static |
| koa-views@7.0.1 | 模板渲染中间件 | https://github.com/queckezz/koa-views |
| koa2-cors@2.0.6 | 配置跨域 | https://github.com/zadzbw/koa2-cors |
| log4js@6.3.0 | 日志中间件 | https://github.com/log4js-node/log4js-node |
| marked@2.1.3 | md转换为html，导入文章时使用，存在数据库的是html格式的字符串 | https://marked.js.org/#usage |
| mysql@2.18.1 | 数据库操作 | https://github.com/mysqljs/mysql |
| turndown@7.1.1 | html转换为md格式，导出的文章是md文件 | https://github.com/mixmark-io/turndown |
| uuid@8.3.2 | 生成唯一的字符串，用作数据库的主键id | https://github.com/uuidjs/uuid |
阿里云：CentOS 7.9 64位 2核 2 GB 40GB云盘 2MB带宽
|-pupublog 仓库克隆下来的跟目录
|-code-build 代码生成器，一键生成接口代码和管理端代码
|-koa-blog-service 服务端
|-vue-blog-admin 博客后台管理端
|-vue-blog-web 博客前端
| 工具 | 说明 | 官网 |
|---|---|---|
| Visual Studio Code | 前端和node服务端开发工具 | https://code.visualstudio.com/ |
| Webstorm | 前端和node服务端开发工具 | https://www.jetbrains.com/webstorm/ |
| Navicat | 数据库连接工具 | https://www.navicat.com.cn/ |
| SQLyog | 数据库连接工具 | https://webyog.com/ |
tip：
Vscode或者Webstorm用哪个都行，看个人习惯，Navicat和SQLyog也是一样，选择一个自己喜欢的使用
Vscode或者Webstorm我都会用，数据库连接工具我比较习惯Navicat
| 工具 | 版本号 | 下载 |
|---|---|---|
| nodejs | 14.16.1 | https://nodejs.org/en/ |
| mysql | 5.7.19 | https://downloads.mysql.com/archives/community/ |
克隆仓库git clone https://gitee.com/hrbust_cheny/pupu_blog.git
本地安装mysql数据库
使用Navicat连接本地数据库，新建数据库pupublog，然后导入数据库文件pupublog.sql（tip：数据库文件存放在/koa-blog-service/目录下）
执行下面的sql语句，新建管理员用户
delete from t_admin_user where uid = '-1';
insert into t_admin_user( uid, user_name, user_password, order_num, create_time, update_time ) values ('-1','admin','$2a$10$2veC0JLAmmOavUlyyDN25.3vRix0nyH9Vf5lAcI8DRyQgKGnQBKVG',-1,localtime(),localtime());
-- 创建了一个账号为admin的用户，密码是123123
运行服务端koa-blog-service
## 进入到 koa-blog-service 目录下，安装依赖 /pupublog/koa-blog-service
npm install --registry=https://registry.npm.taobao.org
## 全局安装 supervisor，文件变更会自动重启node服务
npm install -g supervisor
## 启动node服务
npm run dev
记得更改/koa-blog-service/src/constant/config.js文件中的配置
// /koa-blog-service/src/constant/config.js
// mysql配置
const database = {
host: 'localhost', // 连接的服务器
port: 3306, // mysql服务运行的端口
database: 'pupublog', // 连接的数据库
user: 'root', // 你数据库的用户名
password: 'xxx' //数据库密码
}
/**
* 1、如果是本地运行
* http://localhost:20517
* 2、如果是部署到服务器，正式生产环境
* http://你的ip:20517 或者是你的域名
*
*/
const baseUrl = 'http://localhost:20517'
/**
* Gitee第三方登录的相关参数
*/
const giteeLogin = {
client_id: '你自己申请的客户id',
client_secret: '你自己申请的密钥',
expires: 3600, // token默认过期时间，单位是秒 3600s就是一小时
}
运行管理端vue-blog-admin
## 进入到 vue-blog-admin 目录下，安装依赖 /pupublog/vue-blog-admin
npm install --registry=https://registry.npm.taobao.org
## 启动管理端项目
npm run dev
运行前端vue-blog-web
## 进入到 vue-blog-web 目录下，安装依赖 /pupublog/vue-blog-web
npm install --registry=https://registry.npm.taobao.org
## 启动管理端项目
npm run dev
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。