【源码】基于React和Node.js的全栈后台管理系统

项目简介

本项目是基于React和Node.js的全栈实践项目。前端运用React - Admin - Starter框架，后端采用Express和MySQL提供接口服务。实现了后台管理系统常见的增删改查、分页、搜索等功能，还通过Nginx反向代理解决跨域问题。同时，提供统一的字段管理、通用的新增弹框和搜索组件，增强了代码的可维护性与复用性。

项目的主要特性和功能

前端特性

• 基于React - Admin - Starter框架，可自动配置路由和页面骨架。
• 用Ant Design for React构建UI组件，有统一的字段管理，方便字段名修改和维护。
• 通用新增弹框组件，支持动态传入字段和验证规则。
• 通用搜索组件，支持简单搜索和复杂搜索，便于扩展和维护。
• 使用Mock数据和代理跨域，利于前后端分离开发。

后端特性

• 采用Express框架提供RESTful API接口。
• 用MySQL.js进行数据库操作，支持分页查询和动态SQL生成。
• 通过Nginx反向代理解决跨域问题，支持前后端分离部署。

部署上线

• 支持用PM2管理Node.js进程，保障服务稳定性。
• 用Nginx进行反向代理，解决跨域问题并提升性能。
• 提供详细部署步骤，支持在阿里云等云服务器上部署。

安装使用步骤

复制项目

bash cd parttimejob

安装前端依赖

bash cd parttime npm install

安装后端依赖

bash cd ../parttimeApp npm install

配置数据库

• 在parttimeApp/conf/index.js中配置MySQL数据库连接信息。
• 创建数据库并导入SQL文件（如果有）。

启动后端服务

bash npm start 后端服务默认运行在3333端口。

启动前端服务

bash cd ../parttime npm start 前端服务默认运行在3332端口。

配置Nginx反向代理

• 在Nginx的vhost目录下创建parttime.conf文件，内容如下： nginx server { listen 3332; server_name localhost; root /path/to/parttime/public; index index.html; location /api/ { proxy_pass http://127.0.0.1:3333; proxy_connect_timeout 6000; proxy_read_timeout 6000; proxy_redirect off; } }
• 重启Nginx服务： bash sudo service nginx restart

访问项目

打开浏览器，访问http://localhost:3332即可使用系统。

注意事项

• 项目中的Mock数据功能可在开发阶段使用，上线后建议关闭。
• 部署时请确保服务器开放了相应的端口（如3332、3333）。
• 项目中的SQL查询逻辑尚未完全处理复杂条件（如LIKE、BETWEEN等），实际使用时需根据需求进行调整。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】