# 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)