【Ant Design Pro】快速上手

初始化

初始化脚手架:快速开始

官方默认使用 umi4,这里文档还没有及时更新(不能像文档一样选择 umi 的版本),之后我选择 simple。

然后安装依赖。

在 package.json 中:

json 复制代码
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

这里 start 模式使用了前端项目内的 mock 数据,而 start:dev 没有使用mock 数据,需要真实的后端接口。

Pro 的底座是 umi,umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力,同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。

以前 umi/plugins 里的插件已经内置到 @umijs/plugins 了,可以通过 plugins: ['@umijs/plugins/dist/*'] 用。插件都需要兼容 umi4 才能用,插件 api 有变化,没兼容的是用不了的。比如 umi-ui 在 umi4 中并不支持 issues

umi-ui 还是很好用的,不知道什么时候可以支持 umi4.

项目瘦身

移除国际化

然后也可以把 src/locale 文件夹删掉了。

  • config 配置
  • defaultConfig 默认配置
  • routes 路由
  • proxy 代理配置
  • oneapi 也是和 api 相关的,可以删掉

然后可以删除页面和对应的路由。

这里的 swagger 接口文档工具也可以删掉。

前后端联调

antd pro 请求 或者是 umi 请求

查看 antdpro 官网,发现请求相关配置在 app.tsx 中。

或者也可以打开 antd pro 的 github 源码,发现 app.tsx 中关于请求的配置:

ts 复制代码
/**
 * @name request 配置,可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request = {
  ...errorConfig,
};

我们可以在 app.tsx 中写自己请求的相关配置。

ts 复制代码
import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
  errorHandler,
  // ...
};

但是他这里的配置明显是不全的,所以我们需要逐层进入源码进行查找。然后就可以发现很多配置(比如 prefix,timeout等)。

或者也可以看官方文档(但是直接看源码会更快更准一些):

这是最新版的 umi,不同于上个版本,上一个版本应该是 透传的 umi-request 。

直接在 github 中看 umi-request,发现更新也已经是三年前了。

配置代理

直接使用 antdpro 提供的 config\proxy.ts 即可。

然后前端统一在 api.ts 中加上 api:

同时后端也都加上 /api 前缀:

(虽然前后端同时都不加 /api 应该也可以😂)

Procomponents

这里 antdpro 已经有一个 登录表单,我们希望使用一个 注册表单,但是 登录的 button 文字在文档中并没有说明,这时我们可以追溯源码:

可以发现有很多配置项,其中 submitter.searchConfig.subText 就是该 button 中的文字,然后做以下修改:

然后就只需要修改类型校验、登录注册的 type.d.ts 和 相关 api 请求接口方法就可以(或者加一些自己的业务校验)。

权限管理

app.tsx 是项目全局入口文件(在首次访问页面执行 / 刷新页面),定义了整个项目使用的公共数据,getInitialState 方法定义了项目初始化需要执行的操作。getInitialstate

access.ts 是定义权限的地方,access。通过初始化数据时获取的用户数据,来判断是否具有 admin 权限。

ts 复制代码
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}

请求响应拦截器

requestErrorConfig.ts 里面规定了全局请求响应拦截的一系列操作,request

里面的 data 可以直接获取后端返回的数据:

然后整体对象 errorConfig 会被引入到 app.ts 中,然后导出:

ts 复制代码
/**
 * @name request 配置,可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request = {
  ...errorConfig,
};
相关推荐
cy玩具20 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.2 小时前
Chrome调试工具(查看CSS属性)
前端·chrome