# react-pc

**Repository Path**: codinglin/react-pc

## Basic Information

- **Project Name**: react-pc
- **Description**: 基于 react hooks + mobx + antd + echarts 的 pc 端项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-16
- **Last Updated**: 2023-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, mobx, Ant-Design, Echarts

## README

## React Hooks + Mobx + Antd + Echarts 构建 PC 端项目

- 安装依赖(推荐使用 yarn)

```
yarn
或
yarn install
```

- 运行项目

```
yarn start
```

- 登录验证

登录调用后端接口，手机号要符合规范(使用正则进行校验)，验证码必须是 `246810`

- 遇到的问题(antd 版本问题)

报错：[antd: Menu] `children` will be removed in next major version. Please use `items` instead.

- 解决方法

定义正确属性的对象，并在 `Menu` 组件中使用 `items` 属性，

```js
const MenuList = [
  { key: "1", label: "数据概览", icon: <HomeOutlined /> },
  { key: "2", label: "内容管理", icon: <DiffOutlined /> },
  { key: "3", label: "发布文章", icon: <EditOutlined /> },
];
...
<Menu
  // ...
  items={MenuList}
/>
```

注意：在 React 严格模式下，异步数据操作需要用 `runInAction` 包裹（包含捕获异步错误后的数据操作），推荐。

```js
import { runInAction } from "mobx";
...
getUserInfo = async () => {
  // 调用接口获取数据
  const res = await http.get("/user/profile");
  runInAction(() => {
    this.userInfo = res.data;
  });
};
```

解决使用 echarts 时的警告：https://blog.csdn.net/qq_48005111/article/details/129112822?spm=1001.2014.3001.5502

项目实现功能：

1. 登录和退出登录

2. 菜单随路由高亮(菜单反向高亮)

3. 数据可视化(对 Echarts 进行封装)

4. 发布、更新(数据回填)以及删除文章

5. 图片上传(单图以及多图)

6. 根据条件筛选文章