市网站制作打开网址选择浏览器

这是一个基于 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]

2. 进入项目目录

cd remote-monitoring-system

3. 安装依赖

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;}}
}

2. 后端服务器配置示例（以 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}}]}]