# react-remote-monitoring

**Repository Path**: to-tomorrow-xmt/react

## Basic Information

- **Project Name**: react-remote-monitoring
- **Description**: react的后台管理系统，
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-04-30
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript

## README

# 向明天 (Remote Monitoring System)
![alt text](image.png)

这是一个基于 React + TypeScript + Ant Design 开发的向明天系统前端项目。
添加游客登录入口,账号同密码:admin

## 技术栈

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

## 环境要求

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

## 安装步骤

1. 克隆项目到本地
```bash
git clone [你的Gitee仓库地址]
```

2. 进入项目目录
```bash
cd remote-monitoring-system
```

3. 安装依赖
```bash
npm install
# 或使用 yarn
yarn install
```

## 开发环境运行

```bash
npm start
# 或使用 yarn
yarn start
```

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

## 生产环境构建

```bash
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

## 贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 许可证

[MIT](LICENSE)

## API 请求说明

### 接口配置

#### 开发环境配置
在项目根目录下的 `.env.development` 文件中配置开发环境接口地址：

```env
REACT_APP_API_URL=http://localhost:8080/api
REACT_APP_BASE_URL=http://localhost:3000
```

#### 生产环境配置
在项目根目录下的 `.env.production` 文件中配置生产环境接口地址：

```env
REACT_APP_API_URL=https://your-production-domain.com/api
REACT_APP_BASE_URL=https://your-production-domain.com
```

#### 接口配置文件
在 `src/config` 目录下创建 `api.config.ts` 文件：

```typescript
// 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` 文件中配置开发环境代理：

```javascript
// craco.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.REACT_APP_API_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};
```

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

1. Nginx 配置示例：
```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 为例）：
```javascript
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 请求，主要配置如下：

```typescript
// 基础配置
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);
  }
);
```

### 请求方法示例

```typescript
// 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     # 统一导出
```