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 属性，

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

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

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. 根据条件筛选文章