生活资讯
antdpro 、antdPro动态切换主题色
2023-04-15 01:04  浏览:50

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动态切换主题色的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

发表评论
0评