React 后台管理系统

已于 2025-04-30 16:42:39 修改
阅读量923 收藏 9
点赞数 6
文章标签： react.js 前端 前端框架
于 2025-04-30 15:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43557848/article/details/147633406
版权

这是一个基于 React + TypeScript + Ant Design 开发的向明天系统前端项目。

git仓库地址

在这里插入图片描述

技术栈

  • React 19
  • TypeScript
  • Ant Design 5.x
  • Redux Toolkit
  • React Router
  • Axios
  • Less

环境要求

  • Node.js (推荐使用最新LTS版本)
  • npm 或 yarn

安装步骤

  1. 克隆项目到本地
git clone [https://gitee.com/to-tomorrow-xmt/react.git]
  1. 进入项目目录
cd remote-monitoring-system
  1. 安装依赖
npm install
# 或使用 yarn
yarn install

开发环境运行

npm start
# 或使用 yarn
yarn start

项目将在开发模式下运行，访问 http://localhost:3000 查看效果。

生产环境构建

npm run build
# 或使用 yarn
yarn build

构建后的文件将生成在 build 目录中。

项目结构

src/
  ├── api/          # API 接口定义
  ├── assets/       # 静态资源
  ├── components/   # 公共组件
  ├── pages/        # 页面组件
  ├── redux/        # Redux 状态管理
  ├── router/       # 路由配置
  ├── styles/       # 全局样式
  ├── types/        # TypeScript 类型定义
  └── utils/        # 工具函数

主要功能

  • 用户认证与授权
  • 数据可视化
  • 系统设置
  • 封装接口请求数据

开发规范

  1. 使用 TypeScript 进行开发
  2. 遵循 ESLint 代码规范
  3. 使用 Prettier 进行代码格式化
  4. 组件命名采用 PascalCase
  5. 文件命名采用 kebab-case
接口配置文件

在 src/config 目录下创建 api.config.ts 文件：

// src/config/api.config.ts
export const API_CONFIG = {
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 10000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
  },
};

跨域处理

开发环境跨域配置

在项目根目录下的 craco.config.js 文件中配置开发环境代理：

// craco.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '',//真实地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};
生产环境跨域处理

生产环境跨域需要在后端服务器进行配置，以下是常见的配置方式：

  1. Nginx 配置示例：
server {
    listen 80;
    server_name your-domain.com;

    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 跨域配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}
  1. 后端服务器配置示例（以 Node.js Express 为例）：
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: process.env.REACT_APP_BASE_URL,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
}));

请求配置

项目使用 Axios 进行 HTTP 请求，主要配置如下：

// 基础配置
const baseURL = 'http://your-api-domain.com/api';
const timeout = 10000; // 请求超时时间

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    // 处理错误响应
    if (error.response.status === 401) {
      // 处理未授权
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

请求方法示例

// GET 请求
const getData = async (params: any) => {
  try {
    const response = await axios.get('/endpoint', { params });
    return response;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// POST 请求
const postData = async (data: any) => {
  try {
    const response = await axios.post('/endpoint', data);
    return response;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// PUT 请求
const updateData = async (id: string, data: any) => {
  try {
    const response = await axios.put(`/endpoint/${id}`, data);
    return response;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// DELETE 请求
const deleteData = async (id: string) => {
  try {
    const response = await axios.delete(`/endpoint/${id}`);
    return response;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

错误处理

项目使用统一的错误处理机制：

  1. 网络错误：显示"网络连接失败，请检查网络设置"
  2. 401 未授权：自动跳转到登录页面
  3. 403 禁止访问：显示"没有权限访问该资源"
  4. 404 资源不存在：显示"请求的资源不存在"
  5. 500 服务器错误：显示"服务器内部错误，请稍后重试"

请求封装

建议将 API 请求封装在 src/api 目录下，按模块组织：

src/api/
  ├── auth.ts      # 认证相关接口
  ├── device.ts    # 设备相关接口
  ├── monitor.ts   # 监控相关接口
  └── index.ts     # 统一导出

权限路由说明

    <!-- 路由格式 -->
    使用方式,登录以后后端把这个数据放给角色，根据这个格式,把所有路径路由配置放在这里,读取的时候让后台判断,返回那些路径,与后端沟通好.
    <!-- 把路由配置放在这里 -->
    parentId: id;
    index: index;
    title:一级路由名称
    icon:图标 我用的是iconfont 的图标 根据自己情况替换就行了;
    type: group;
    children: [ //子级路由
    index:index;
    title:二级路由名称
    path:path;
    name:name;
    component:文件读取路径 读取pages 文件 路径// 看不明白的就把这里的路径和pages 下的路径对比一下就明白了
    menuType:menuType;
    meta:   路由原信息
    ] ;
    "nav": [
        {
            "parentId": "1",
            "index": "1",
            "title": "首页",
            "icon": "icon-shouye",
            "type": "group",
            "children": [
                {
                    "index": "1-1",
                    "title": "首页",
                    "name": "home",
                    "path": "/home",
                    "component": "shouYe/index",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "1-1",
                        "check": true
                    }
                }
            ]
        },
        {
            "parentId": "2",
            "index": "2",
            "title": "设备管理",
            "icon": "icon-shebei",
            "type": "group",
            "children": [
                {
                    "index": "2-1",
                    "title": "设备列表",
                    "name": "shebei",
                    "path": "/shebei",
                    "component": "shebei/shebei",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "2-1",
                        "check": true
                    }
                }
            ]
        },
        {
            "parentId": "3",
            "index": "3",
            "title": "模块管理",
            "icon": "icon-mokuai",
            "type": "group",
            "children": [
                {
                    "index": "3-1",
                    "title": "模块列表",
                    "name": "mokuai",
                    "path": "/mokuai",
                    "component": "mokuai/Mokuai",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "3-1",
                        "check": true
                    }
                }
            ]
        },
        {
            "parentId": "4",
            "index": "4",
            "title": "标靶检测",
            "icon": "icon-mubiaobachang1",
            "type": "group",
            "children": [
                {
                    "index": "4-1",
                    "title": "报警列表",
                    "name": "jingIndex",
                    "path": "/jingIndex",
                    "component": "biaoba/index",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "4-1",
                        "check": true
                    }
                },
                {
                    "index": "4-2",
                    "title": "标靶检测",
                    "name": "biaoba",
                    "path": "/biaoba",
                    "component": "biaoba/biaoba",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "4-2",
                        "check": true
                    }
                },
                {
                    "index": "4-3",
                    "title": "标靶报警",
                    "name": "baojing",
                    "path": "/baojing",
                    "component": "biaoba/baojing",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "4-3",
                        "check": true
                    }
                },
                {
                    "index": "4-4",
                    "title": "报警等级",
                    "name": "dengji",
                    "path": "/dengji",
                    "component": "biaoba/dengji",
                    "menuType": 0,
                    "meta": {
                        "selectIndex": "4-4",
                        "check": true
                    }
                }
            ]
        }
    ]
向明天乄
关注
react后台管理系统(一)
唯见青山不见君
11-22 1700
react后台管理系统(一)
react后台管理系统(三)
唯见青山不见君
11-25 1131
react后台管理系统(三)
react后台管理系统项目总结
xiaokangna的博客
09-19 2894
React后台管理项目1、创建一个项目配置一个ui插件库 1、创建一个项目 作为一个react的项目，首先就得先创建一个项目 npx create-react-app react-pro 配置一个ui插件库 作为一个程序员，写项目就需要一个非常好用的插件库，这里推荐使用ant UI ...
react后台管理系统(react+Antd)
cjy_fly的博客
01-05 1728
react后台管理系统(react+Antd)初学react
react后台管理系统(二)
唯见青山不见君
11-22 1131
react后台管理系统(二)
React 后台管理系统项目
qq_34927733的博客
10-10 1万+
该项目架构是纯手工搭建的，并非使用脚手架搭建～ 相关技术 react + redux + react-router + sass + antd + eslint + webpack 项目预览地址 https://jesonman.github.io/react-admin-demo/ 项目源码地址 https://github.com/JesonMan/react-admin/ 相关页面 登录 首...
【开发篇】10分钟快速搭建React后台管理系统模板
Mind_programmonkey的博客
09-16 9137
React后台管理系统模板 一、准备React 1.建立react应用 npx create-react-app react_management_system_template cd react_management_system_template 并对react应用进行整理，整理成如下图所示 在terminal中输入yarn start，在游览器中输入http://localhost:3000即可得到如下图： 2.基础插件安装 本次所需的插件 react-router-dom less l
React后台管理系统模板搭建
原来你来过
02-25 1480
React后台管理系统模板搭建
最好的 6 款 React 后台管理系统模板和框架
热门推荐
蒋川@卡拉云
03-21 1万+
React admin框架繁多，在本文里我们介绍 React 下最好的 6 款后台系统，每款均严格测试后，整理它们的优缺点方便你来挑选。同时我们给出一些实用建议，帮你避免选型时不注意可能导致的埋坑。
2022最新React项目实战(React后台管理系统、TypeScript+React18)
05-12
前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥...
react-web-admin:React后台管理系统
03-11
React Web Admin是一个基于React技术栈构建的后台管理系统模板，它为开发者提供了一个快速搭建企业级管理后台的基础框架。React作为Facebook推出的高效、可复用组件的JavaScript库，因其虚拟DOM和单向数据流的设计，...
管理系统系列--react后台管理系统.zip
02-25
【标题】：“管理系统系列--react后台管理系统.zip”指的是一个基于React技术栈开发的后台管理系统的压缩包文件。React是Facebook推出的开源JavaScript库，主要用于构建用户界面，尤其适用于单页应用程序（SPA）。在...
react后台管理系统-富文本
07-02
我们的React后台管理系统是一个功能强大的管理平台，它提供了丰富的功能和工具，帮助用户轻松管理网站和应用程序的各个方面。 首先，该系统具有强大的权限系统。管理员可以根据用户角色和权限级别来分配访问权限，...
react-admin-manage:React后台管理系统
03-11
后台管理系统 启动 yarn or npm i yarn start or npm start 使用技术 react + antd design + react-route-dom 界面一览
关于react19版本更新后部分组件无法正常使用的问题
最新发布
苦夏木禾
04-30 286
我们在使用像是提示、弹窗等静态方法时，会报错；这是由于 React 19 调整了 react-dom 的导出方式，导致无法直接使用 ReactDOM.render 方法。
React 第三十五节 Router 中useNavigate 的作用及用途详解
刺客-Andy 的博客
04-29 559
是中引入的一个钩子函数，用于。它替代了旧版本（v5及以下）中的useHistory，提供了更简洁的 API 来实现页面跳转、历史记录操作（如前进/后退）等功能。
[Agent]AI Agent入门02——ReAct 基本理论与实战
m0_69281817的博客
04-28 786
ReAct（Reasoning and Acting）是一种通过协同推理（Reasoning）与行动（Acting）提升大语言模型（LLM）任务解决能力的技术。其核心思想是在解决复杂问题时交替生成推理和动作，形成闭环的决策流程。通过交叉推理和行动，ReAct 使智能体能够动态地在产生想法和特定于任务的行动之间交替，动态地处理复杂任务并提高决策的准确性和可靠性。
React后台管理系统
10-07
React后台管理系统是一个基于React框架开发的用于管理后台数据和功能的系统。在React后台管理系统的搭建中，我们通常会使用React脚手架来快速创建项目，并安装相关的依赖库。其中，yarn是一种常用的包管理工具，可以用于安装React和其他依赖。而React脚手架可以通过命令npx create-react-app来创建一个新的React项目。在项目中，我们还需要定义状态文件并在store文件夹下创建一个index.jsx文件来管理所有的状态操作函数和方法。可以使用React的context机制来共享状态，并使用useStore钩子函数来获取共享的状态。此外，还需要安装React和React-DOM的指定版本以及babel-standalone。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值