前言
此项目是个人博客，有前端界面+后台管理系统；目的是当做react和node的练手项目，同时还可以了解到服务器nginx部署web站点以及备案和域名的基本操作流程。
项目预览地址
GitHub地址
LinWeb/blog体验地址
- 博客主页
林大大的博客39.105.133.130:8088
- 后台管理系统，管理员账号密码：admin/admin
林大大的博客39.105.133.130:8088
界面截图
- 博客主页
- 后台系统主页
技术栈
- 前端技术栈
react + antd + react-router + react-redux + axios
- 后端技术栈
koa2 + koa-router + mysql + sequelize
项目结构详解
项目运行
- 配置数据库
安装mysql，新建一个名称叫“**blog**”的数据库
- 安装依赖
项目根目录和根目录的app目录下分别安装
npm install
- 启动项目
项目根目录和根目录的app目录下分别启动
npm start
后台模块
- 文章
- 文章列表
- 文章详情
- 标签筛选
- 分类筛选
- 新增文章
- 删除文章
- 更新文章
- 标签
- 标签列表
- 分类
- 分类列表
- 评论
- 评论列表
- 新增评论
- 删除评论
- 回复
- 新增回复
- 删除回复
- 用户
- 注册用户
- 用户登录
- 用户列表
- 删除用户
- 更新用户
- 校验用户名是否已注册过
项目优化
目前，已优化了一部分，首次加载需要3,4秒的时间，由于目前租的云服务器的宽带只有1M。
到现在做的优化有以下几点：
* antd做按需加载
* highlight.js高亮依赖包只引入需要的模块
* 前端webpack+nginx 使用GZIP压缩，不采用koa后端压缩，减少I/O的消耗
* webpack配置splitChunks切割模块代码，生成多个模块js文件
* 采用自定义高阶组件bundle.js+import('')，按需动态加载组件
持续优化中~
项目总结
- 开始做这个项目的时候，先明确项目的需求，然后设计好数据表，考虑到数据表的联系
- 因为项目是使用sequelize操作mysql，所以要提前了解开发文档，不然会走很多坑
- 个人来说，使用react的一个缺点是对数据监听方面没有vue用起来顺畅
- 使用antd这个react组件库，带来了界面设计方面的便利，自己只是再做一些样式的优化即可
