我的做品：一个技术栈koa2+ mysql+react + antd的我的博客

时间 2019-11-08

标签我的一个技术 koa2 koa mysql+react mysql react antd 博客栏目 MySQL 繁體版

原文原文链接

前言

此项目是我的博客，有前端界面+后台管理系统；目的是当作react和node的练手项目，同时还能够了解到服务器nginx部署web站点以及备案和域名的基本操做流程。前端

项目预览地址

https://www.lxsblog.cnvue

GitHub地址

https://github.com/LinWeb/blognode

体验地址

博客主页

http://39.105.133.130:8088/mysql

后台管理系统，管理员帐号密码：admin/admin

http://39.105.133.130:8088/adminreact

界面截图

博客主页

后台系统主页

技术栈

前端技术栈

react + antd + react-router + react-redux + axioswebpack

后端技术栈

koa2 + koa-router + mysql + sequelizeios

项目结构详解

后端项目结构

├── app                             //前端项目
├── config                          //项目配置
│   ├── db.js                       //数据库配置文件
│   └── index.js                    //token的key名
├── controller                      //控制器
├── lib                             //工具
│   ├── bcrypt.js                   //密码加密
│   └── token.js                    //登陆token
├── middlewares                     //中间件
│   ├── checkAuth.js                //检查是普通用户仍是管理员
│   ├── checkToken.js               //检查是否已经登陆用户
│   └── errorHandler.js             //错误中间件
├── model                           //数据表模型
├── router                          //路由配置
├── app.js                          //项目入口
└── README.md                       //项目说明

前端项目结构

└── src                             //项目主体
    ├── assets                      //资源文件夹
    ├── component                   //组件库
    │   ├── web                     //前台界面组件库
    │   ├── common                  //公共组件库
    │   └── admin                   //后台管理系统组件库
    ├── config                      //配置文件夹
    │   ├── api.js                  //接口配置文件
    │   └── routerConfig.js         //路由配置
    ├── lib                         //放置插件和工具
    │   ├── axios.js                //axios全局配置
    │   ├── checkAuth.js            //检查是不是普通用户仍是管理员
    │   └── marked.js               //markdown转换器
    ├── router                      //路由
    │   ├── admin.js                //后台路由
    │   ├── index.js                //路由入口
    │   ├── main.js                 //路由中间件
    │   └── web.js                  //前台路由
    ├── service                     //接口请求
    ├── store                       //数据仓库
    ├── view                        //前台页面
    │   ├── web                     //前台界面页面
    │   ├── common                  //公共页面
    │   └── admin                   //后台管理系统页面
    └── index.js                    //项目入口

项目运行

配置数据库

安装mysql，新建一个名称叫“blog”的数据库nginx

安装依赖

项目根目录和根目录的app目录下分别安装git

npm install

启动项目

项目根目录和根目录的app目录下分别启动github

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组件库，带来了界面设计方面的便利，本身只是再作一些样式的优化便可