nodejs做企业网站,上海外贸推广建站,常州网站建设企业,汽车行业网站怎么做初始化 初始化脚手架#xff1a;快速开始 官方默认使用 umi4#xff0c;这里文档还没有及时更新#xff08;不能像文档一样选择 umi 的版本#xff09;#xff0c;之后我选择 simple。
然后安装依赖。
在 package.json 中#xff1a; start: cross-e…初始化 初始化脚手架快速开始 官方默认使用 umi4这里文档还没有及时更新不能像文档一样选择 umi 的版本之后我选择 simple。
然后安装依赖。
在 package.json 中 start: cross-env UMI_ENVdev max dev,start:dev: cross-env REACT_APP_ENVdev MOCKnone UMI_ENVdev max dev,这里 start 模式使用了前端项目内的 mock 数据而 start:dev 没有使用mock 数据需要真实的后端接口。
Pro 的底座是 umiumi 是一个 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 中关于请求的配置
/*** name request 配置可以配置错误处理* 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。* doc https://umijs.org/docs/max/request#配置*/
export const request {...errorConfig,
};
我们可以在 app.tsx 中写自己请求的相关配置。
import { RequestConfig } from umi;export const request: RequestConfig {timeout: 1000,errorConfig: {},middlewares: [],requestInterceptors: [],responseInterceptors: [],errorHandler,// ...
};但是他这里的配置明显是不全的所以我们需要逐层进入源码进行查找。然后就可以发现很多配置比如 prefixtimeout等。
或者也可以看官方文档但是直接看源码会更快更准一些 这是最新版的 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 权限。
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 中然后导出
/*** name request 配置可以配置错误处理* 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。* doc https://umijs.org/docs/max/request#配置*/
export const request {...errorConfig,
};
