antdprov5

Posted 2022-10-31 煜成'Studio

antdprov5

新建文件夹，alt+D 输入cmd打开终端

yarn create umi 
//一系列设置后

//安装依赖
yarn install

yarn start

//检查错误和代码格式化，快捷键是：光标在文档中任何位置，再shift+alt+l
npm run lint

新建

1.src/pages/BasicList文件夹，文件夹里面新建index.tsx和index.less，rafce快捷键创建函数式组件

import styles from './index.less';

className=styles.tableToolBar

2.config下的routes.ts里配置式路由（复制粘贴配置就行）

import  PageContainer  from '@ant-design/pro-layout'; //添加页面的头部，就是面包屑的那个位置

<PageContainer>
    ...
</PageContainer>

3.useRequest获取数据

import  useRequest, useIntl  from 'umi'; //数据获取

const init = useRequest< data: BasicListApi.ListData >(
    `https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd$pageQuery$sortQuery`,
);
//BasicListApi在index.tsx的同目录下的data.d.ts中设置，之后的init?.data?.dataSource输入的时候就会有代码提示

//手动重新获取数据
init.run()

data.d.ts中是类型定义的文件，使用json2ts把后台数据转变一下，并把namespace（导出去的文件名）替换命名为BasicListApi，在useRequest后面用<data: BasicListApi.Data>定义一下

在类型定义中，module用的多于namespace（官网推荐）；type用的多于interface（官网上推荐使用interface，但是type是大势所趋了，所以用type）。export interface，可以不加export，type也是

useEffect(() => 
    //监听page和per_page等的改变
    init.run(); //重新刷新一下页面
    // eslint-disable-next-line react-hooks/exhaustive-deps
, [page, perPage]);

//页码改变
const PaginationChangeHandler = (_page: any, _per_page: any) => 
    //这里的参数_page和_per_page不能用page和per_page，因为和上面全局的page和per_page重复
    setPage(_page);
    setPerPage(_per_page); //注意：useState执行机制是异步的
    //init.run()
    //页面重新获取init.run()，否则，页码等即使点击改变了页面也不会改变。但setPage和setPerPage是异步的，init.run()的会先于异步操作进行执行，解决方法：异步操作可以使用useEffect结合的方式解决
;

4.index.tsx中需要使用的拆分出来的小组件，放在新建的BasicList/builder中，例如BasicList/builder/ActionBuilder.tsx

将需要很多操作的组件放在BasicList/component/下(Modal.tsx, style.less)

?.

const data = init?.data?.dataSource //?.省略了判断init下的data是否为空的过程

ts中给了类型，就有代码提示了，很方便

5.国际化

src/locales/很多语言文件夹/页面的不同位置的设置

6.在类型定义文件pages/BasicList/data.d.ts文件中如果要修改某个类型名，可以按F2再修改，那么tsx文件中使用这个类型的地方都会自动智能修改；

declare module BasicListApi 
  //类型提示。使用json2ts把后台数据转变一下，并命名为BasicListApi，在useRequest后面用<data: BasicListApi.Data>定义一下
  //module用的多于namespace（官网推荐），type用的多于interface（官网上推荐使用interface，但是type是大势所趋了，所以用type）。export interface，可以不加export，type也是这样

  type ActionHandler = (action: BasicListApi.Action, record: any) => void;

  type Page = 
    title: string;
    type: string;
    searchBar?: boolean;
    trash?: boolean;
    [key: string]?: any; //不确定的字段
  ;

7.错误捕捉提示是全局的话，放在app.tsx的errorHandler函数中处理；是局部的话，可以在useRequest的第二个参数中onError设置

---

forEach没有返回值（不用另外变量来承接，本身直接返回），输出可能比输入少
map有返回值，输入多少输出多少

数组.some(…)找值，返回值是true或者false
数组.find(…)返回的是具体的值

---

在src/locales/en-US或zh-CN中添加自己创建的路由的列表的中英文名称

---

改数据类型，在数据名的地方按住F2，修改后引用该类型的地方都智能地改为新名字

---

URI 约等于 URL+ URN
URI（Uniform Resource Identifier统一资源标识符）身份证号
URL（Uniform Resource Locator统一资源定位符）身份证地址
URN（Uniform Resource Name）身份证姓名

URI一般形式为scheme://<authority>/path
scheme是http https之类的
<authority>=username:password@host 是需要授权，一般的网址没有这个
<path>=path/path2/path3?<query>#<fragment>多个层级
<query>查询 是键值对key=value <fragment>片段 是一个字段
http://www.home.com/table/keys?color=red#top&shape=rectangle

React Router的三种模式：Browser Hash Memory

Browser（推荐）	Hash
www.test.com/admin 说明：访问的是/admin/index.html等index文件	www.test.com/#/admin 说明：#以后的变更不会发送给服务器处理， 访问的是根目录下的文件/index.html

Browser模式下：
umi.useLoaction的loaction.pathname就是上面网址的/path，也就是/table/keys，注意：这里path前是有/的
umi.useLoaction的location.search是?query，也就是?color=red和shape=rectangle
umi.useLoaction的location.hash是#fragment，也就是#top
umi.useloaction的location.query是一个对象，里面包含键值对，location.query.color=red

路由

	path: '/user/*'或者path: '/user/:id1/:id2'
	component: './User.tsx'

可以匹配到www.test.com/user/5/123

User.tsx
umi.useLocation的location.pathname = /5/123
umi.useParams如果命名为params，则params.id1 = 5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I4pMwUc8-1655122650176)(./antd-pro-v5/1.png)]

遇到的问题：

1.yarn start后webpack一直是99%，然后localhost：8000一直进不去登录页面，转圈圈loading（node_modules/@umijs/runtime does not exist in container）

解决方案：删除src 下 .umi 文件，再重新yarn start

解决方案：删除 node_modules src/.umi package-lock.json（可能yarn.lock yarn-error.log也要删），然后重新安装依赖npm install，再yarn start。
然后又报错，ERROR in ./node_modules/swagger-ui-react/swagger-ui.js 2:107055-107070.Module not found: Error: Can’t resolve ‘btoa’ in ‘D:\\Desktop\\projectantdpro\\node_modules\\swagger-ui-react’。应该是安装依赖时网速不好一些没下下来。
npm install --save btoa，然后在yarn start就可以了。
参考：[ant design pro (umijs) 报 AssertionError ERR_ASSERTION]: filePath not found of /home/ifnk/proj/blog-web/node_modules/umi/node_modules/@umijs/runtime 的解决方法 - ifnk - 博客园 (cnblogs.com)。
[antd-design-pro v5 mac 系统，每次安装完新的包，重新打包都会报一下错误AssertionError ERR_ASSERTION]: filePath not found of /Volumes/存储盘/webspace/dom/myapp/node_modules/@umijs/renderer-react · Issue #8835 · ant-design/ant-design-pro (github.com)。