Antd Desgin Pro 保姆级配置（三）

2022-03-11 2,324 阅读4分钟

Antd Desgin Pro的规范

在官方文档上，官方建议开发者在使用Antd Desgin Pro 构建项目后，使用一种规范，规范如下图

1646964535(1).png

文件名称对应路由菜单展示的名称，展示的主文件应使用index.tsx
此路由页面中，所有的类型限制，应放在data.d.ts文件下
此路由页面中，所有的请求，应放在service.ts文件下
此路由页面中，拆分的组件应放在Components文件夹下

如果项目组件文档不打算放在另一个项目中去单独部署到另外一个项目中，在`Components`的组件应按照文件夹的方式创建，并且每个组件包含一个`index.md`文件。

1646964886(1).png

`src/app.tsx`文件解析：

官方对getInitialState()的解释：会在整个应用最开始执行，返回值会作为全局共享的数据

通俗点来说，每次刷新页面，这个方法都会执行，首先会判断是否用户信息过期，过期跳转登录页面，如果未过期，将用户的数据储存到一个容器中，作为全局共享的数据

打开`app.tsx`文件，最先看到，这个文件暴露出了一个`getInitialState()`函数，并且`getInitialState()`会有返回值

fetchUserInfo()如果可以拿到用户信息，返回值是用户信息，如果拿不到用户信息，强制跳转登录页面。
settings: defaultSettings.tsx 文件暴露出的一些配置，在下面会说到
currentUser 获取的用户信息

1646965125(1).png

如何拿到`getInitialState()`的返回值，如果在页面中使用？

const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState');

initialState: getInitialState()的返回值
loading: getInitialState()是否在执行，避免重复执行
error : getInitialState()执行中的错误信息
refresh: 重新执行getInitialState()
setInitialState 修改getInitialState()的返回值

1646965998(1).png

`src/app.tsx`继getInitialState()之后又暴露出了一个配置项`layout`,没错就是ProLayout的配置，ProLayout支持的api 都需要在这里进行配置

1646966107(1).png

ProLayout支持的api太多了，这里就不一一列举了，如果有兴趣的可以点击链接跳转查看procomponents.ant.design/components/…

这里说一下，之前暴露出的settings配置项的问题，layout这个箭头函数，中间会接受两个参数 initialState,setInitialState，全局容器的数据，更改全局容器的数据的方法。最重要的其实是initialState里面的settings，我们可以在layout底部看到

1646966351(1).png

通过扩展运算符的方式，将Settings的内容拼接到了layout函数的返回值中，我们跟着settings暴露的内容去看，进入config/defaultSettings.tsx文件下

1646966693(1).png

这里面其实也都是ProLayout的Api，只是这个文件的Api属于常用Api，我们会在这里配置一些背景，标题。logo一些信息

pure这个也是ProLayout的一个Api，它的作用是清空所有默认配置，如果把pure设置未true，将不启用ProLayout布局,感兴趣的朋友可以尝试一下，看下效果

1646966848(1).png

`ProLayout`根据官方的解释，在构建时是无法使用 dom 的，那么问题来了，我们找不到对应的dom，我们如何设置Dom的背景？如果更改DOM的一些CSS的配置呢?

`src/global.less`文件下，我目前是通过优先级来更改的，应该是有更好的办法，我目前还未找到，如果找到会在下面评论区及时补充

1646966996(1).png

`routes.ts`文件解析，

路由配置文件`routes.ts`之前也说过这个文件涉及的一些Api，但是如果是第一次使用Antd Desgin Pro 框架，可能会踩坑。

`注意这里的./会直接到Pages文件夹下`

在routes.ts添加一个路由配置,并且在Pages创建对应的文件夹，创建对应的声明文件。

1646967395(1).png

保存，发现页面展示的没问题，但是在控制台，爆出了一个错误

1646967434(1).png

这个其实是因为，Antd Desgin Pro 默认开启了国际化配置，我们需要到src/locales/zh-CN/menu去创建一个变量。当然也可以不开启国际化，这个在config/config.tsx文件中关闭。

1646967636(1).png

1646967610(1).png

设置结束后，你在右上角切换语言，对应的路由标题就会发生对应的变化了

跳转路由

我们再如法炮制一个路由

1646968122(1).png

按照以往的经验来说，在这里配置的路由，都会显示到菜单中，我们现在不希望这个路由显示在菜单中，这个时候，我们就想起了之前router的Api

layout 是否展示ProLayout布局
hideInMenu 是否展示在右侧菜单中

1646968530(1).png 效果：

1646968344(1).png

问题又来了，在Antd Desgin Pro中如何跳转页面呢。这些Api 其实官方已经帮我们配置好了，并且挂载到了每个组件的props中，我们只需要去使用即可

1646968409(1).png

1646968502(1).png

将layout 设置为false 。默认为true hideInMenu 为false 默认为false 看效果

1646968652(1).png

1646968662(1).png

周末写一下权限路由的接口和从服务端获取路由的接口，剩余的下次见吧。jym！！！