antd-pro升级了，新增的UmiJs是个什么玩意儿？？
antd-pro升级以后发现他们使用了umi，所以就玩玩它是个什么东西。
umi是什么就不赘述，直接参照官网 umi
官方建议node版本是8.10或更高版本。
我的node版本是v8.9.3，正常使用。
1、按照下列命令执行
2、然后，选择需要的功能，要选择的按空格即可，我选择的是 antd dva
3、确定后，将根据选择自动创建目录和文件。
4、然后手动安装依赖项
5、最后，启动本地开发服务器
如果顺利，请在浏览器中打开 http：// localhost：8000 ，您将看到以下ui。
按照官方执行的包路径并不是这这样，我对其进行了添加和修改
其中 .umirc.js 按照官网生成应该是和 package 同级的一个配置文件，入下图，存在即合理，我们使用 config/config.js
上图‘项目查看’有package.json的截图，查看一下其中的配置，我们使用 cross-env 进行跨平台地设置及使用环境变量，简单区分一下有mock和无mock的启动区别，至于修改端口这个事儿看公司使用在端口上有没有要求，如果有要求就按照公司要求配置，没有要求个人建议自己维护一套端口规则，即便是不维护也不要用默认端口。
其他的使用跟 dva 时代没有多少区别，关于数据还是 redux-saga 那一套东西
移除antd pro中的 路由的国际化
对于大部分不需要国际化的ant pro来说。
移除locale会减轻很多开发工作。
import { formatMessage } from 'umi/locale';
替换
为
const pageName = currRouterData.cnname;
import { formatMessage } from 'umi/locale';
替换formatter
为
antd pro 实现文件下载
这是POST 请求的：
export async function downloadDiagnosticLog(params) {
return request(`/api/v1/diagnosisLogController/download?${stringify(params, { arr***Format: 'repeat' })}`);
}
* sendDownloadDiagnosticLog({ p***load }, { call, put }) {
console.log('p***load: ', p***load);
const response= yield call(downloadDiagnosticLog, p***load);
console.log('p***load: ', response);
yield put({
type: 'respDownloadDiagnosticLog',
p***load: response,
});
},
respDownloadDiagnosticLog(state, { p***load }) {
return {
...state,
downloadDiagnosticLogState: p***load,
};
},
async sendDownloadDiagnosticLog(id) {
const fileName= 'rowData.activeDepotName';//说白了就是给文件个名字
console.log(this);
await this.props.dispatch({//发送请求
type: 'DiagnosticLog/sendDownloadDiagnosticLog',
p***load: { id: id ? [id] : this.state.selectedRowKeys},//参数
});
const { DiagnosticLog: { downloadDiagnosticLogState} } = this.props;
console.log(downloadDiagnosticLogState);
let response= downloadDiagnosticLogState;
const blob= new Blob([response]);//创建blob对象
const alink= document.createElement('a');//创建a链接
alink.style.displ***= 'none';
alink.href= blob;
alink.download= fileName;
document.body.appendChild(alink);
alink.click();
document.body.removeChild(alink);
};
a href={`/api/v1/diagnosisLogController/download?id=${record.id}`}
antd pro 动态菜单与动态路由
项目中使用了动态菜单，其中含有固定和非固定的菜单，但是我们的后端同事只在登陆时返回含有动态菜单 name 的数组。
阅读源码我们可以发现，在 l***outs/BasicL***out 中可以看到 menuData 是从 menu.js 中获取的
routes 就是运行生成的 .umi/router.js 的内容，将其输出我们可以直观的看见它的具体结构
在 router.config.js 中使用 dynamic 去标志该目录（路由）是动态的
大体思路就是对 routes 进行数据处理，将登录获取到的特定路由（这里用 name 属性标识）在 routes 中过滤出来
此时的 menuData 就是我们想要的实际菜单了
旧版本（2.x）回到 l***outs/BasicL***out 中，从props中取出 routerMap
权限组件 Authorized ，使用这个组件就能实现不跳转的 404、403页面了
但是3.x的写法会导致出现404或者403时会全屏，所以如果是局部应用的话，可以将登录校验、404/403校验分离，将 Routes 分别挂在对应的路由层级上
关于antdpro和antdPro动态切换主题色的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。