【React】antdpro开发指南

前言

后台管理系统用的非常多，如果比较复杂点的后台可能会多人开发，这时候可能导致各种样式不统一之类的问题。
antdpro用起来有一定学习成本，所以需要梳理一下。

快速上手

npx create-umi your-project

选择最新v5，antd4
启动

npm run start

即可看见页面。
登录页默认用户名密码是admin ant.design 。输入进去即可进入后台。
进入后右下角有个米饭一样的图标，那个就是umi-ui，可以非常方便的导入代码或者模板进行修改。
注意！尽量别用umi-ui导入模板，容易引起各种问题。而且是一个不可逆的过程！同时，很多模板没有人维护，使用的是老的api或者写法，也容易导致各种bug！
读者可以玩一下，这玩意就是我最初学前端非常想要的功能。不仅仅是复制代码，包括路由什么的都整好了。

概念

使用antdpro，首先默认你已经会了react dva ts umi antd(里面很多组件和antd关系比较大，没熟练用过antd的要花更多时间上手)

配置

config文件夹下3个文件，相当于原umirc的配置：
路由参考：https://beta-pro.ant.design/docs/layout-cn
defaultSettings主要用来配置主题
proxy主要就是devserver的代理。
antdpro整了react环境变量，你可以看见在proxy里分别配了3个环境，当然都是开发环境，对应着3个start脚本。

主题

优先使用官方提供的工具先看一下哪种主题好：https://preview.pro.ant.design/dashboard/analysis/
然后复制粘贴到defaultSettings中。
当然你也可以在自己的站点里使用它，需要将PageContainer, SettingDrawer, ProSettings从pro-layout里导出后自己实现。
具体参考：https://pro.ant.design/blog/new-pro-use-cn#settingdrawer

布局

一般小项目不会用这玩意的，如果用了antdpro可能对样式什么的有需求，所以antdpro还整了个可视化配置样式插件。
这个也是为啥在antd的基础上封了个proxxx组件，而且这些组件把常用的逻辑都写差不多了，只要修改对应的地方就行了，没人用的主要原因就是又大又重，他们称之为重型组件，有些地方想定制比较难下手，还是需要把所有代码以及配置都搞懂。
参考官网：https://procomponents.ant.design/components/

请求

里面的很多loading都是使用umihook的useRequest：

import React from 'react';
import { useRequest } from 'umi';
import services from '@/services/afs2demo';const YourComponent: React.FC = () => {const { data, loading } = useRequest(() => {return services.AccountController.addAccount();});if (loading) {return <>Loading...</>;}return <div>{data?.name}</div>;
};export default YourComponent;

这样避免写太多loading，同时可以配合table使用。useRequest的参数的函数的返回值是一个promise，一般是每个页面的serverice.ts下定义的请求：

import { request } from 'umi';
import { TableListParams, TableListItem } from './data.d';export async function queryRule(params?: TableListParams) {return request('/api/rule', {params,});
}

umi-request在app.tsx下有个errorHandler已经写好了个异常处理。
中间件处理需要加上配置：

export const request = {middlewares: [async function middlewareA(ctx, next) {console.log('A before');await next();console.log('A after');},async function middlewareB(ctx, next) {console.log('B before');await next();console.log('B after');}]
}

拦截器处理也是一样：

requestInterceptors?: RequestInterceptor[];responseInterceptors?: ResponseInterceptor[];

MOCK

约定mock文件夹下的为mock数据，具体可以参考：https://umijs.org/zh-CN/docs/mock
如果你不想用mock，可以配置关闭：

export default {mock: false,
};

或者使用命令不开：

MOCK=none umi dev

数据流

antdpro5中使用了新的数据流可以代替dva，这样在纯hooks组件下更加轻量好理解，也容易方便管理并且没有学习成本。
这个是通过plugin-model实现的功能，约定model下的文件为一个id，然后就像使用自定义hook一样使用它，但是这个状态是全局的，另外状态更新各个组件都可以更新。
dva学习成本还是略高的，就算你学会了，别人不一定能很快学会，而这个就不一样了。
初始数据：

export async function getInitialState() {return {userName: 'xxx',};
}

app中有个getInitialState方法用来做全局的初始数据，依靠 @umijs/plugin-initial-state插件完成。
同样，这个也是个model，只是它自带的：

import React from 'react';import { useModel } from 'umi';
import { Spin } from 'antd';export default () => {const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');if (loading) {return <Spin />;}return <div>{initialState.userName}</div>;
};

DVA

5版本的model同样也支持dva，这是因为plugin-dva的获取文件后对导出进行了校验。

/* eslint-disable no-param-reassign */
import { Effect, ImmerReducer, Subscription } from 'umi';export interface IndexModelState {name: string;
}
export interface IndexModelType {namespace: 'index';state: IndexModelState;effects: {query: Effect;};reducers: {save: ImmerReducer<IndexModelState>;};subscriptions: { setup: Subscription };
}
const IndexModel: IndexModelType = {namespace: 'index',state: {name: '',},effects: {*query({ payload }, { put }) {yield put({type: 'save',payload,});},},reducers: {save(state, action) {state.name = action.payload;},},subscriptions: {setup({ dispatch, history }) {return history.listen(({ pathname }) => {if (pathname === '/testdemo') {dispatch({type: 'query',payload: 'yehuozhili',});}});},},
};
export default IndexModel;

页面中使用需要connect后props获取：

import React, { FC } from 'react';
import { IndexModelState, ConnectProps, Loading, connect } from 'umi';interface PageProps extends ConnectProps {index: IndexModelState;loading: boolean;
}
const IndexPage: FC<PageProps> = ({ index, dispatch, loading }) => {const { name } = index;return <div>Hello {name}</div>;
};
export default connect(({ index, loading }: { index: IndexModelState; loading: Loading }) => ({index,loading: loading.models.index,
}))(IndexPage);

权限

权限参考资料：https://beta-pro.ant.design/docs/authority-management-cn
权限实质就是个高阶组件，思想有点类似于守卫的意思，src下有个access的文件，里面设置了权限以及判定。具体可以根据业务需要来，主要就是业务返回某个权限值，然后基于权限值判断：

// src/access.ts
export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {const { currentUser } = initialState || {};return {canAdmin: currentUser && currentUser.access === 'admin',canGuset: currentUser && currentUser.access === 'guest',};
}

比如我加一个canGuest表明某个页面只能由guest进行访问。
在mock文件夹里模拟着返回值，其中有句：

'POST /api/login/account': (req: Request, res: Response) => {const { password, username, type } = req.body;if (password === 'ant.design' && username === 'admin') {res.send({status: 'ok',type,currentAuthority: 'admin',});access = 'admin';return;}if (password === 'ant.design' && username === 'user') {res.send({status: 'ok',type,currentAuthority: 'user',});access = 'user';return;}if (type === 'mobile') {res.send({status: 'ok',type,currentAuthority: 'admin',});return;}

也就是以admin登录，是admin权限。
可以试着在路由配置中对权限进行控制：

{name: 'test',icon: 'smile',path: '/testdemo',access: 'canGuset',component: './testdemo',},

此时，以admin身份登录/testdemo则会出现401页面。
将mock文件的那句改为guest再次访问，即可出现想要的页面。
组件中使用：

 const access = useAccess();

即可拿到access.ts所定义的权限。

国际化

国际化参考文档：
https://beta-pro.ant.design/docs/i18n-cn
https://umijs.org/zh-CN/plugins/plugin-locale#%E4%BB%8B%E7%BB%8D
约定在 src/locales 中引入相应的 js，例如 en-US.ts 和 zh-CN.ts，并且在 config/config.ts 中做如下配置：

plugins:[...,locale: {enable: true,default: 'zh-CN',baseNavigator: true,},...,
]

它使用的是react-intl :https://formatjs.io/docs/getting-started/installation/
这个库有很多高级功能，比如动态导入什么的，所以还是比较大的。
layout中若设置了国际化，默认配置的route的name就是国际化的key值。
如果你写了对应的zh-CN.ts，默认会

重型组件PRO

了解了上面的设定，基本可以玩了，下面还需要了解antdpro特有的重型组件，来使得样式保持统一。

ProLayout - 高级布局

prolayout是高级布局，是一开始就自带的。
可以通过context拿到布局上下文：

import { RouteContext, RouteContextType } from '@ant-design/pro-layout';
const Page = () => (<RouteContext.Consumer>{(value: RouteContextType) => {return value.title;}}</RouteContext.Consumer>
);

routerContext里面还有个很常用的就是isMobile，如果需要对手机端支持，拿此参数判断。
plugin-layout将layout的代码写入.umi，所以用户可以完全不用管路由，我个人觉得这玩意相当好。其实确实这东西不需要怎么自定义。如果想自定义的可以关掉layout，手动引入ProLayout或者自己写layout。
https://procomponents.ant.design/components/layout#api
PageContainer是一个壳，它可以显示嵌入页面的底色，也可以显示白色，另外提供面包屑功能，这个面包屑，1级菜单是不显示的，如果想显示，需要修改app.tsx。

ProTable - 高级表格

https://procomponents.ant.design/components/table
这玩意配置项太多，因为不只是表格，会带着别的东西，所以还需要耐下心来先挑选满足自己要求的表格，然后自定义的地方再仔细看配置。

ProForm - 高级表单

https://procomponents.ant.design/components/form
这个主要是登录注册，或者是让用户填表单的地方，同样是一个组件一个页面。

ProCard - 高级卡片

https://procomponents.ant.design/components/card
如果你想让padding固定，有个比较美观的样式，那就需要使用它。
卡片不仅仅是那种小的，它可以去承载别的之类。在一开始布局时可以调整好。

ProDescriptions - 高级定义列表

这玩意是按固定格式的白板，类似于antd的descriptions
https://procomponents.ant.design/components/descriptions

ProList - 高级列表

这组件是自带padding的，需要列表时可以使用。
https://procomponents.ant.design/components/list

【React】antdpro开发指南相关推荐

React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
[转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分 ...
React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
积木Sketch插件进阶开发指南
前段时间,美团外卖技术团队积木Sketch插件"意外走红".为了帮助更多的设计师小哥哥.小姐姐落地设计规范,提升产研效率,积木Sketch团队开始着手打造一个平台化的产品.本文介绍 ...
iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
前端前端开发工程师_我们庞大的工程师团队会使用此前端开发指南
前端前端开发工程师 by Yangshun Tay 阳顺泰我们庞大的工程师团队会使用此前端开发指南 (Our large team of engineers use this front end d ...
短视频无尽流前端开发指南
本文基于对家装家居内容短视频无尽流的开发实践,总结出了一套适应于该场景及衍生场景的前端开发指南,通过阅读本文可以快速了解短视频无尽流的前端开发. 前言短视频无尽流是当下比较热门的一种业务场景,在日常 ...
Web3 全栈开发指南
使用Next.js.Polygon.Solidity.The Graph.IPFS和Hardhat构建全栈Web3应用,本教程有相应视频,在这里. 在这个完整深入的web3教程中,将学习构建全栈web ...
区块链开发指南_区块链开发权威指南
区块链开发指南 by Haseeb Qureshi 由Haseeb Qureshi 区块链开发权威指南 (The authoritative guide to blockchain developme ...

【React】antdpro开发指南

前言

快速上手

概念

配置

主题

布局

请求

MOCK

数据流

DVA

权限

国际化

重型组件PRO

ProLayout - 高级布局

ProTable - 高级表格

ProForm - 高级表单

ProCard - 高级卡片

ProDescriptions - 高级定义列表

ProList - 高级列表

【React】antdpro开发指南相关推荐

最新文章

热门文章