# React18-express-nginx-mysql **Repository Path**: colazhao/react18-express-nginx-mysql ## Basic Information - **Project Name**: React18-express-nginx-mysql - **Description**: 前端基于react18+redux-toolkit+antd+vite搭建,后端采用nodejs-express框架,mysql作为数据库,nginx做反向代理搭建的一套后台管理系统 - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-06-19 - **Last Updated**: 2025-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript, React, Nodejs, Nginx ## README # React18-Express-Nginx-mysql ## 介绍 React18-Express-Nginx-mysql,该项目前端基于React18、React-router、Redux-toolkit、Typescript、Vite、Ant-design搭建,后端采用Nodejs-express框架搭建,MySql作为数据库,Nginx做反向代理服务器进行搭建的开源的一套后台管理系统。 ## Git仓库地址 - Gitee:https://gitee.com/colazhao/react18-express-nginx-mysql ## 项目功能 - 采用最新技术栈开发:React18、React-router、Redux-toolkit、Typescript、Vite、Ant-design、Express、node-xlsx、Nginx - 实现用户登录,用户增删改查,用户列表导出,用户认证,菜单状态管理等功能 ### 客户端 - 客户端采用vite构建工具生成react18项目,使用hook函数式编程,redux-toolkit做状态管理,react-router做路由懒加载 - 使用redux-toolkit实现了菜单主题和菜单折叠控制(单纯为了玩一下,就不做复杂的了) - 使用TypeScript对Axios二次封装(常用请求封装、错误拦截等) - 路由进行登录验证 - 对antd的Table组件二次封装 - 用户管理进行增删改查及导出操作 ### 服务端 - 服务端采用express框架搭建,引入nodemon、cors、node-xlsx、jsonwebtoken等 - 使用jsonwebtoken生成token及其验证 - 封装MySQL数据库链接方法 - 使用node-xlsx将数据库表中内容生成excel文件 - 使用Nginx进行反向代理(单纯学习,因这里只有一个服务,故只做了反向代理,无负载均衡,多服务器时可配置权重进行分发请求) ## 安装使用步骤 **Clone** git clone https://gitee.com/colazhao/react18-express-nginx-mysql.git **Install** 服务端安装依赖: cd expressService npm install 客户端安装依赖: cd react18 npm install 如果npm install 安装失败,请升级 nodejs 到 16 以上,或尝试使用以下命令: npm install --registry=https://registry.npm.taobao.org 如果需要使用Nginx做反向代理,可先在本机安装Nginx,修改nginx.conf文件 **Run** 1.导入数据库: 打开Navicat,导入nodedb.sql文件,生成nodedb数据库 2.启动服务端: cd expressService npm run dev --dev命令是使用nodemon命令启动该项目,nodemon会在每次修改文件后进行自启动服务,比较方便快捷 npm run start --start命令是使用node命令启动该项目,在每次修改文件后需手动重启服务 3.启动客户端: cd react18 npm run dev 一顿操作猛如虎,项目完美现眼前 **Build** cd react18 npm run build ## 项目部署 客户端打包后生成dist文件 方式一:直接部署express服务器 将生成的dist文件夹放置expressService目录下,服务端app.js中app.use(express.static(path.join(__dirname, 'dist')));会指向该目录入口文件 方式二:部署至Nginx服务器 将生成的dist文件夹放置本机Nginx安装目录下的html目录下,在nginx.conf中进行配置,配置好之后启动Nginx,访问本地localhost即可 ![1718767656805](C:\Users\zhaoyan\AppData\Roaming\Typora\typora-user-images\1718767656805.png) ## 项目截图 - 用户登录 ![1718767904708](C:\Users\zhaoyan\AppData\Roaming\Typora\typora-user-images\1718767904708.png) - 首页 ![1718767963680](C:\Users\zhaoyan\AppData\Roaming\Typora\typora-user-images\1718767963680.png) - 用户管理 ![1718767977909](C:\Users\zhaoyan\AppData\Roaming\Typora\typora-user-images\1718767977909.png) - 用户个性化菜单设置 ![1718768049082](C:\Users\zhaoyan\AppData\Roaming\Typora\typora-user-images\1718768049082.png)