React 后台管理系统

这是一个基于 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) => {// 添加tokenconst 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}}]}]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/81113.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

第九节：文件操作

第九节：文件操作

理论知识 文件的基本概念&#xff1a;文件是存储数据的基本单位&#xff0c;在 Linux 系统中&#xff0c;一切皆文件。文件可以是文本文件、二进制文件、设备文件等。文件的创建&#xff1a;使用 touch 命令可以创建一个新的空文件。如果文件已经存在&#xff0c;则更新文件的…
阅读更多...
2025-03 机器人等级考试四级理论真题 4级

2025-03 机器人等级考试四级理论真题 4级

1 2025年蛇年春晚&#xff0c;节目《秧BOT》机器人舞蹈表演节目点燃了全国观众的热情&#xff0c;请问参加节目表演的机器人是由哪家公司研发&#xff1f;&#xff08; &#xff09; A.大疆 B.华为 C.优必选 D.宇树科技 【参考答…
阅读更多...
k8s平台：手动部署Grafana

k8s平台：手动部署Grafana

以下是一个可用于生产环境的 Kubernetes 部署 Grafana 的 YAML 文件。该配置包括 Deployment、Service、ConfigMap 和 PersistentVolumeClaim&#xff0c;确保 Grafana 的高可用性和数据持久化。 Grafana 生产部署 YAML 文件 ☆实操示例 cat grafana-deployment.yaml --- # …
阅读更多...
农产品园区展示系统——仙盟创梦IDE开发

农产品园区展示系统——仙盟创梦IDE开发

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>农业大数据平台</title><style>* {margi…
阅读更多...
每日Bug：（2）共享内存

每日Bug：（2）共享内存

对于整个系统而言&#xff0c;主存与CPU的资源都是有限的&#xff0c;随着打开进程数量的增加&#xff0c;若是将所有进程运行所需的代码/数据/栈/共享库都存放在主存中&#xff0c;那么开启一部分进程就可以将主存占用完。 虚拟内存就是解决以上问题的方法&#xff0c;使用虚…
阅读更多...
C语言Makefile编写与使用指南

C语言Makefile编写与使用指南

Makefile 详细指南&#xff1a;编写与使用 Makefile 是 C/C 项目中常用的自动化构建工具&#xff0c;它定义了项目的编译规则和依赖关系。下面我将详细介绍 Makefile 的编写和使用方法。 一、Makefile 基础 1. 基本结构 一个典型的 Makefile 包含以下部分&#xff1a; mak…
阅读更多...
Centos离线安装Docker（无坑版）

Centos离线安装Docker（无坑版）

1、下载并上传docker离线安装包 官方地址&#xff1a;安装包下载 2、上传到离线安装的服务器解压 tar -zxvf docker-28.1.1.tgz#拷贝解压二进制文件到相关目录 cp docker/* /usr/bin/ 3、创建docker启动文件 cat << EOF > /usr/lib/systemd/system/docker.servic…
阅读更多...
OceanBase数据库-学习笔记4-租户

OceanBase数据库-学习笔记4-租户

租户 租户偏向于资源层面的逻辑概念&#xff0c;是在物理节点上划分的资源单元&#xff0c;可以指定其资源规格&#xff0c;包括 CPU、内存、日志盘空间、IOPS 等。 租户类似于传统数据库的数据库实例&#xff0c;租户通过资源池与资源关联&#xff0c;从而独占一定的资源配额…
阅读更多...
UNIAPP项目记录

UNIAPP项目记录

一、通过 vue-cli 创建 uni-app 项目 创建 vue3 项目 创建以 javascript 开发的工程&#xff08;如命令行创建失败&#xff0c;请直接访问 gitee 下载模板&#xff09; npx degit dcloudio/uni-preset-vue#vite my-vue3-project复制代码 npx degit dcloudio/uni-preset-vue#vit…
阅读更多...
华为发布全球首个L3商用智驾ADS4.0

华为发布全球首个L3商用智驾ADS4.0

2024年10月2024世界智能网联汽车大会上&#xff0c;余承东讲到&#xff1a;“华为ADS 4.0将于2025年推出高速L3级自动驾驶商用及城区L3级自动驾驶试点&#xff0c;希望加快L3级自动驾驶标准的进程&#xff0c;推动L3级自动驾驶技术的普及。” 世界智能网联汽车大会演讲PPT 所以…
阅读更多...
【Python学习路线】零基础到项目实战

【Python学习路线】零基础到项目实战

目录 &#x1f31f; 前言技术背景与价值当前技术痛点解决方案概述目标读者说明 &#x1f9e0; 一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比 &#x1f4bb; 二、实战演示环境配置要求核心代码实现运行结果验证 ⚡ 三、性能对比测试方法论量化数据对比…
阅读更多...
解决redis序列号和反序列化问题

解决redis序列号和反序列化问题

最近遇到了一个问题,将 List<Map<String, Object>> 类型数据以list形式存入到redis之后,发现取出来时数据格式完全不对,根据报错信息发现是反序列化问题,遇到类似问题,主要有两种解决方案1.使用序列号工具 例如&#xff0c;Java中常用的序列化工具有Jackson、Gso…
阅读更多...
Android学习总结之设计场景题

Android学习总结之设计场景题

设计图片请求框架的缓存模块 核心目标是通过分层缓存策略&#xff08;内存缓存 磁盘缓存&#xff09;提升图片加载效率&#xff0c;同时兼顾内存占用和存储性能。以下是针对 Android 面试官的回答思路&#xff0c;结合代码注释说明关键设计点&#xff1a; 一、缓存架构设计&…
阅读更多...
Webug3.0通关笔记14 第十四关:存储型XSS

Webug3.0通关笔记14 第十四关:存储型XSS

目录 第十四关:存储型XSS 1.打开靶场 2.源码分析 3.渗透实战 第十四关:存储型XSS 本文通过《webug3靶场第十四关 存储型XSS》来进行存储型XSS关卡的渗透实战。 存储型 XSS&#xff08;Stored Cross - Site Scripting&#xff09;&#xff0c;也被称为持久型 XSS&#xff…
阅读更多...
Java父类、子类实例初始化顺序详解

Java父类、子类实例初始化顺序详解

1、完整的初始化顺序&#xff08;含继承&#xff09; 1、父类的静态初始化 父类静态变量默认值 → 父类静态变量显式赋值 父类静态代码块&#xff08;按代码顺序执行&#xff09;。 2、子类的静态初始化 子类静态变量默认值 → 子类静态变量显式赋值 子类静态代码块&…
阅读更多...
13.组合模式：思考与解读

13.组合模式：思考与解读

原文地址:组合模式&#xff1a;思考与解读 更多内容请关注&#xff1a;7.深入思考与解读设计模式 引言 在软件开发中&#xff0c;是否曾经遇到过这样一种情况&#xff1a;你有一个对象&#xff0c;它本身很简单&#xff0c;但是它包含了其他类似的对象。随着系统变得越来越复…
阅读更多...
OpenCV实战教程 第一部分：基础入门

OpenCV实战教程 第一部分：基础入门

第一部分&#xff1a;基础入门 1. OpenCV简介 什么是OpenCV及其应用领域 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库&#xff0c;于1999年由Intel公司发起&#xff0c;现在由非营利组织OpenCV.org维护。Ope…
阅读更多...
虚幻商城 Quixel 免费资产自动化入库（2025年版）

虚幻商城 Quixel 免费资产自动化入库（2025年版）

文章目录 一、背景二、问题讲解1. Quixel 免费资产是否还能一键入库？2. 是不是使用了一键入库功能 Quixel 的所有资产就能入库了？3. 一键入库会入库哪些资产？三、实现效果展示四、实现自动化入库五、常见问题1. 出现401报错2. 出现429报错3. 入库过于缓慢4. 入库 0 个资产一…
阅读更多...
uni-app - 小程序使用高德地图完整版

uni-app - 小程序使用高德地图完整版

文章目录 🍉功能描述🍉效果🍉开发环境🍉代码部分🍉功能描述 页面自动通过定位获取用户位置并展示周边POI数据，同时支持关键词输入实时联想推荐关联地点信息， 实现精准智能的地点发现与检索功能。 🍉效果 🍉开发环境 unibest2.5.4nodev18.20.5pnpm9.14.2wot-des…
阅读更多...
牛客：AB4 逆波兰表达式求值

牛客：AB4 逆波兰表达式求值

链接&#xff1a;逆波兰表达式求值_牛客题霸_牛客网 题解&#xff1a; 利用栈&#xff0c;遍历字符串数组&#xff0c;遇到运算数则入栈&#xff0c;遇到运算符则取出栈顶两个运算数进行运算&#xff0c;并将运算结果入栈。 class Solution { public:/*** 代码中的类名、方法…
阅读更多...
最新文章

Copyright @ 2022~2023