react项目使用antd

官网

https://ant.design/docs/react/i18n-cn

项目中使用

1.安装
yarn npm cnpm
cnpm i --save-dev antd

2.安装完成之后 启动项目 使用antd
import { Button } from 'antd';

3.组件中直接使用
//引入antd
import { Button, Rate } from "antd";
export default () => {
return (
<>
admin
<div className="admin">
<div className="admin-left"></div>
<div className="admin-right">
<Button>按钮</Button>
<Rate allowHalf defaultValue={2.5} />
</div>
</div>
</>
);
};

使用图标

安装
npm install --save @ant-design/icons
引入
import { UserOutlined, SafetyOutlined, LockOutlined } from "@ant-design/icons";
使用
<UserOutlined />

使用UI构建登录界面

项目中存在布局切换

布局一

布局二

技术选择使用redux状态管理来切换布局

实现项目中动态菜单

1.何实发请求获取菜单----用户登录完成之后
路由子菜单父级获取菜单
//获取用户信息
useEffect(() => {
//获取用户信息
dispatch(GET_USERINFO());
//获取用户的菜单
dispatch(GET_USERROUTES());
}, []);
配置user模块下异步的action 发网络请求
//获取用户菜单数据
export const GET_USERROUTES = () => {
return async (dispatch, getState) => {
//发送网络请求
let res = await getRoutes();
console.log(res.data.data);
};
};

2.在路由配置文件中创建解析路由方法 （原因是需要使用一级路由的配置对象）
//处理路由
export const PatterRouter = () => {};

在获取路由数据之后 调用执行改方法 处理路由
//获取用户菜单数据
export const GET_USERROUTES = () => {
return async (dispatch, getState) => {
//发送网络请求
let res = await getRoutes();
console.log(res.data.data);
//调用路由处理
let route = PatterRouter(res.data.data);
};
};

3.对传递的数据进行解析
//使用递归算法
export const PatterRouter = (rots) => {
//接收
let arr = [];
//遍历
rots.forEach((item) => {
//对象接收
let obj = {
component: item.component,
hidden: item.hidden,
meta: item.meta,
name: item.name,
path: item.path,
};
//如果存在子集 递归
if (item.children && item.children.length) {
obj.children = PatterRouter(item.children);
}
arr.push(obj);
});
return arr;
};

4.解析之后的数据存储到redux
//存储到状态管理
dispatch({ type: "SAVE_ROUTES", args: route });

5.可以使用redux的数据动态渲染菜单
//使用递归解析菜单数据
let itemList = (args) => {
let arr = [];
if (!args) return [];
args.forEach((item, index) => {
let its = getItem(
item.meta.title,
index, //需要注意key 唯一性 需要处理
<UserOutlined />,
itemList(item.children)
);
arr.push(its);
});
return arr;
};