前言
使用 react 有一段时间了, 也想用 react 去写点什么，平时接触最多的就是 blog 了，于是乎借助 antd 这个 UI 框架设计出了一个极其简约风格的 spa 博客。
目的也是将 react 的生态圈的工具梳理一遍，后端则采用了 koa + sequelize + mysql 的技术选型（我司用的就是这个技术栈啦，所以笔者也用这个了）
博客介绍
- 前后台同构（同时包含博客的后台管理），为了方便记录后端开发过程，笔者将后端也一起放在同个项目文件夹中。
- 博客样式几乎借助于 antd 这个优秀的 UI 框架，主打简约风格（其实就是笔者觉得怎么好看怎么写而已）~
- 分出了几个分支便于学习和查看开发记录，相信这个项目会让刚接触 react 的伙伴学到一些的
预览地址 : 由于域名还在备案中，所以暂时用 ip 代替啦
技术栈
- 前端
- react v16.8.1
- redux redux-thunk
- react-router4
- axios
- marked highlight.js
- 后端
- koa2 + koa-router
- sequelize + mysql
- jwt + bcrypt
实现功能
- 主页 + 列表页 + 搜索页 + 后台增删改查文章等
- 评论与回复功能模块
- 用户登录注册，以及权限管理 (jwt + localStorage)
- markdown 代码高亮
- 锚点导航 回到顶部
- 响应式开发
分支
为了方便查看开发记录笔者分了几个分支
- client-chore: 记录前端项目的构建过程
- 配置 react + antd + less + babel-plugins-import
- 配置 redux + redux-thunk + redux-logger (开发和生产环境)
- 配置 装饰器 + axios 封装 + 路由配置（主博客路由 和 admin 管理系统）
- server-chore: 记录后端项目的构建过程
- 配置 koa + koa-router + 中间件
- 项目结构划分（mvc结构）
- 配置 sequelize 以及数据库的设计
- ...
- client-markdown: 配置 markdown 语法高亮
- dev: 开发分支
效果
概览
评论功能与其他
响应式
后台管理
表结构
开启项目
前端
git clone https://github.com/gershonv/react-blog.git
cd react-blog
npm i --registry=https://registry.npm.taobao.org
npm start
复制代码后端
创建一个 blogdev 的 mysql 数据库，运行 server/config/blogdev.sql 文件导入数据
cd server
npm i --registry=https://registry.npm.taobao.org=
npm start
复制代码总结
从零开发个人博客，整个过程感受就是不动手就不知道自己还有多少知识没了解到或者说好好运用到。麻雀虽小五脏俱全吧。
要点在于
- 前端
- 如何组织项目架构。合适的项目架构可以提高开发效率和更好的后期维护。
- 第二 router 4 如何封装才更好拓展，维护。这里部分借助了 rekit 目录结构
- 如何利用 react 新特性去组织你的代码
- 如何利用工具提高效率，装饰器，热加载，（redux、…）
- 当然权限的管理 jwt， 对 antd 的使用
- 后端
- koa 各类中间件使用
- 登录注册权限，jwt 加密，处理权限的方式
- sequelize 的使用 模型定义 多表~
- 错误的统一处理，如何优雅的处理
- 项目结构如何搭建等等
项目结构：
（1）由于部署的问题，刷新nginx 会自动匹配路径跳到404，本地项目是不会的！！！所以大家可以 fork 下来看看。后端端口改 axios.js 文件 为 http://120.79.10.11:6060。（学生机服务器，有点慢。。）
另外，最高权限只能自己克隆下来，用自己的数据库去改，最高权限的用户只有一个~~~跟着开启项目的步骤去操作就可以了。。
- 看效果 可操作
（1） - 需要最高权限 跟着开启项目的步骤 自建数据库！！
- 有最高权限才能访问到 /admin 页面，当然了上面说了 会自动跳到 404 页， 笔者在部署方面近乎白痴，后期会完善。
- 最高权限
id 1 auth 1!注册后改库就好了，因为密码是通过加密的~，自建数据可能登录不进
项目大体没问题的，当然还存在一些细节问题，笔者在后期也会逐渐的完善的~~
PS : 觉得不错的伙伴可以给个 star ~~~ 或者 fork 下来看看哦。如果有什么建议，也可以提 issue 哦
