ant design pro v5 总结

相比V4，V5到底强在哪？

其实主要是ProComponents的功劳，我用它有两三个月了，在此记录一下使用遇到的一些坑和经验

今天我再次create了一个新的v5的项目，发现跟我的不太一样,不过没关系，大致都是一样的

v5相比v4修改了很多东西

1. Layout ，v5将之前的Layout封装成了ProLayout进行使用，可以看到在app.tsx文件中有以下代码

export const layout = ({
  initialState, // 这个值是user/login/index.tsx中refresh的用useModel存储的当前用户信息
}: {
  initialState: { settings?: LayoutSettings; currentUser?: API.CurrentUser };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,// 右侧头部的内容,可以自己改想要的样式
    disableContentMargin: false,
   logo: ()=> <img style={{height: 25}} src='/asset/img/logo.png' alt='logo'/>,// 没错，logo在这里改，可以返回一个DOM元素
    footerRender: () => <Footer />, 
    onPageChange: () => {
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser?.userid && history.location.pathname !== '/user/login') {
        history.push('/user/login');
      }
    },
    menuHeaderRender: undefined,
    ...initialState?.settings,
    menuDataRender:menuDataRender// 自定义menu
  };
};

2. 应V5版本封装了很多pro组件，大家可以去看看，用起来很方便，但是比较局限，文档地址如下：https://procomponents.ant.design/components

温馨提示：proComponents现在还在不断更新改版，可能昨天写的代码版本一更新今天就有问题了，请不要用npm 下载pro组件，运行项目时可能会出现一些_context找不到类似的问题，可以使用yarn

3. 关于权限，v4版本是权限字段或角色，但v5貌似只有角色， authority: [‘admin’, ‘user’]，因为后端返回数据的原因，我还是将他改成了v4版本的用法

如何更改 title图标和加载时的页面？

在src/pages/document.ejs文件可以改
1). 加载背景 ：39行

 #root {
          background-image: url('https://teknihall-resources.oss-cn-hongkong.aliyuncs.com/eca4320fabad8aecc3dd7b8c0bc23b4a.png');// 改掉这个路径
          background-repeat: no-repeat;
          background-size: 100% auto;
        }

也可以替换public下的home_bg.png文件
2). 加载logo：193行

<img src="https://teknihall-resources.oss-cn-hongkong.aliyuncs.com/8ec6b20af34031f3320ced6035d948af.png" alt="logo" width="256" />

也可以替换public下的pro_icon.svg文件
3). 加载时logo下方的图文: 203-208行

<div style="display: flex; justify-content: center; align-items: center">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px"
          />
          Ant Design
        </div>

4). title小图标和title，直接在public中，替换favicon.ico的图片就好了，或者在src/pages/document.ejs文件下修改为ico的路径
24-25行

<title>title</title>
<link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />

defaultSettings中菜单的几种模式及主题等配置

目前常用的基本就这些

1. 菜单
   在config/defaultSettings.ts更改

layout: 'side' | 'top' | 'mix';// 左侧菜单栏| 上边菜单栏|混合模式，会分割菜单，上面为一级菜单，左侧为二级菜单

2. 主题色 primaryColor
3. 主题模式 navTheme：‘light’ | ‘dark’; 正常|黑暗
4. 内容区宽度contentWidth : ‘Fluid’ | ‘Fixed’; 流体|固定
5. title
6. fixedHeader :false,是否固定头
7. fixSiderbar :false,是否固定侧栏
8. colorWeak：true,色弱模式

国际化

umi的FormatMessage，可能很多人不知道变量怎么用

1. locales
   一些menu需要用的都放在src/locales各个语言下面的ts文件中
   单独页面用到的，创建一个文件夹locales，下创建zh-CN.ts和en-US.ts

export default{
	"home.title":'首页'
}

2. FormattedMessage

import {formattedMessage,FormattedMessage} from "umi";

text: formattedMessage({id:'menu'}) // 这样就可以了
<FormattedMessage id='menu' /> // DOM元素这样写

3. 切换语言

import { setLocale } from 'umi';
// 刷新页面
setLocale('zh-TW', true);
// 不刷新页面
setLocale('zh-TW', false);

4. 切换语言的组件，我奉劝大家自己写吧，他的SelectLang是写死了的，原本有一个开放了一个属性可以传，但看了源码的我差点吐血，就这几个语言，你要不要这个语言是你的事，但他就是写死了，不好意思，忍不住想吐槽
   
   

request

request和v4的有点不太一样，v4版本的request是使用的umi-request导出的，此次是直接用umi导出的，是在umi-request上的再次封装

1. 拦截器

export const request: RequestConfig = {
  errorHandler,// 这个errorHandler错误处理的方法，项目拉取下来就有，我就不再多解释了
  requestInterceptors:[(url, options) => { // 请求拦截器，是一个数组，里面有多个拦截器
    return {
      url: `${url}&interceptors=yes`,
      options: { ...options, interceptors: true },
    };
  }],
  responseInterceptors:[async response => {// 响应拦截器，是一个数组，里面有多个拦截器
    const data = await response.clone().json();
    if (data && data.NOT_LOGIN) {
      location.href = '登录url';
    }
    return response;
  }] 
};

2. 请求request

import { request } from 'umi';
export async function fakeAccountLogin(params: LoginParamsType) {
  return request<API.LoginStateType>('/api/login/account', {
    method: 'POST',
    data: params,
  });
}

正常这样用就ok，不过我不习惯这样用，就自己封装一次
我的封装

export async function post(url:string,params:object,header={}){
  return request (url,{data:params,method:'POST',headers:Object.assign(baseHeader,header,)});
}

使用

 import * as http from ’utils/http.ts‘;
 async function getList (data:any){
 	return http.post('url',data);
 }