个人作品:一个技术栈koa2+ mysql+react + antd的个人博客
发布于 2 个月前 作者 LinWeb 1968 次浏览 最后一次编辑是 1 个月前 来自 分享

前言

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


项目预览地址

https://www.lxsblog.cn


GitHub地址

https://github.com/LinWeb/blog


体验地址


界面截图

  • 博客主页 image.png

  • 后台系统主页 image.png


技术栈

前端技术栈

react + antd + react-router + react-redux + axios

后端技术栈

koa2 + koa-router + mysql + sequelize


项目结构详解

后端项目结构

├── 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”的数据库

  • 安装依赖

项目根目录和根目录的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组件库,带来了界面设计方面的便利,自己只是再做一些样式的优化即可
19 回复

打开都费劲

打开都费劲

不好意思,各位!由于服务器用的是乞丐版中的乞丐版,后续我看看还有什么原因导致?

打开都费劲

可以把前端部到github 后端部到heroku

打开都费劲

GZIP + CDN,迅速提高打开速度。顺便搞个按需引入,减少一下包的体积~

请问前端用的什么脚手架

@chhpt gzip很管用,谢谢您的建议

@DOTA2mm create-react-app,并使用npm run eject命令把webpack的配置拧到前端,方便修改配置

目前,已优化了一部分,首次加载需要3,4秒的时间,由于目前租的云服务器的宽带只有1M。 到现在做的优化有以下几点:

  1. antd做按需加载
  2. highlight.js高亮依赖包只引入需要的模块
  3. 前端webpack+nginx 使用GZIP压缩,不采用koa后端压缩,减少I/O的消耗
  4. webpack配置splitChunks切割模块代码,生成多个模块js文件
  5. 采用自定义高阶组件bundle.js+import(’’),按需动态加载组件

持续优化中~

增加公测站点,欢迎小伙伴体验!

你好,我看了下你的项目,挺好的,我也做了一个和你的项目差不多技术栈,我的是Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站,地址是:https://cnodejs.org/topic/5d14cb08cdb1f967c157669c#5d158f9934bca667bc6e38d6,建议去了解一下 七牛CDN回源加速 ,打开网站体验会很快的,共勉:)

@liangfengbo 谢谢,找个时间尝试一下。你的博客的访问速度很快,为你点赞!也是做了按需加载。

回到顶部