前言本项目是一个前端界面+后台管理系统的个人博客；目的是做一个react和node的实践项目，同时可以了解服务器nginx部署网站和备案以及域名的基本操作流程。项目预览地址https://www.lxsblog.cnGitHub地址https://github.com/LinWeb/blog体验地址博客主页http://39.105.133.130:8088/后台管理系统，管理员账号密码：admin/adminhttp//39.105.133.130:8088/admin界面截图博客首页后台系统首页技术栈前端技术栈react+antd+react-router+react-redux+axios后端技术栈koa2+koa-router+mysql+sequelize项目structure后端工程结构详解├──app//前端工程├──config//工程配置│├──db.js//数据库配置文件│└──index.js//tokenkeyname├──controller//controller├──lib//tools│├──bcrypt.js//密码加密│└──token.js//登录令牌├──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//markdownconverter├──router//路由│├──admin.js//后台路由│├──index.js//路由入口│├──main.js//路由中间件│└──web.js//前台路由├──service//接口请求├──store//数据仓库├──view//前台页面│├──web//前端界面页面│├──common//公共页面│└──admin//后台管理系统页面└──index.js//项目入口项目运行配置数据库安装mysql，新建一个名为“blog”数据库安装依赖于项目的根目录和根目录的app目录。在项目的根目录和根目录的app目录下安装npminstall。在项目的后台模块中启动npmstart。文章标签标签列表类别类别列表评论评论列表添加评论删除评论回复添加回复删除回复用户注册用户用户登录用户列表删除用户更新用户验证用户名是否已注册加载需要3或4秒。由于租用的云服务器带宽只有1M，目前做的优化有以下几点：antd按需加载highlight.js高亮依赖包，只导入需要的模块。前端webpack+nginx使用GZIP压缩代替koa后端压缩降低I/O消耗webpack配置splitChunks切割模块代码，生成多个模块js文件使用自定义高级组件bundle.js+import(''),动态按需加载组件在持续优化中~项目总结在开始这个项目的时候，首先明确项目的需求，然后设计数据表，考虑到数据表的连接因为项目使用sequelize来操作mysql，所以一定要提前看懂开发文档，否则会掉很多坑，使用react的缺点之一就是没有vue做数据监控。使用antd这个react组件库，给界面设计带来方便。我只需要做一些样式优化。
