ant design pro 探索

登录页

想要修改登录页加载状态

找到 pages 下的 document.ejs 进行修改就可以生效了, 仅限于登录页

D:\STUDY\MYAPP\SRC\PAGES
│  404.jsx
│  Admin.jsx
│  document.ejs
│  Welcome.jsx
│  Welcome.less
│
├─TableList
│  │  index.jsx
│  │
│  └─components
│          UpdateForm.jsx
│
└─user
    └─Login
            index.jsx
            index.less

修改每个页面的加载前的 loading

贴图

如何修改这个状态呢

Spin.setDefaultIndicator(<LoadingOutlined />);

这个方法的说明在文档下拉到最底部就可以看到了 如果你想关闭这个 loading 就需要自己探索了

关于关闭 loading 提示: 下面是从 ant pro 中复制的代码, 里面有个备注释掉的 childrenRender 方法, 里面有涉及到 loading 展示状态的逻辑, 不过此方法不生效, 在 ant 的文档里也没有这个api, 文档里面的 loading 属性也有尝试, 都不生效

export const layout = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history; // 如果没有登录，重定向到 login

      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          // eslint-disable-next-line react/jsx-key
          <Link to="/umi/plugin/openapi" target="_blank">
            <LinkOutlined />
            <span>OpenAPI 文档</span>
          </Link>,
          // eslint-disable-next-line react/jsx-key
          <Link to="/~docs">
            <BookOutlined />
            <span>业务组件文档</span>
          </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // 增加一个 loading 的状态
    // childrenRender: (children) => {
    //   if (initialState.loading) return <PageLoading />;
    //   return children;
    // },
    ...initialState?.settings,
  };
};

antd pro V5 如何修改 loading图( github 提问)

今天就到这了!!!

配置 request (ant pro 内置的请求工具)

文档

umi-request 文档

在 src/app.ts or src/app.js 中直接导出配置即可修改,此配置兼容 umi-request 的所有配置

export const request={
  timeout: 1000,
  errorConfig: {}, // 错误处理
  middlewares: [],
  requestInterceptors: [], // 请求拦截器
  responseInterceptors: [], // 响应拦截器
};

使用 demo(使用的时候配置就已经生效)

import { request } from 'umi';

/** 登录接口 POST /api/login/account */
export async function login(body, options) {
  return request('/User/Login', {
    method: 'POST',
    data: body,
    ...(options || {}),
  });
}

@umijs/plugin-initial-state(可以当做一个全局状态管理)

同样是在 src/app.js 文件暴露出一个 getInitialState 函数 (内部返回的对象就是这个全局变量)

export async function getInitialState() {
  const getUserinfo = async ()=>{ //此处必须为一个 async 函数,否则初始值是一个 undefined
  return {}
  }
  return {
    getUserinfo,
    settings: {
      loading: false,
    },
  };
}

loading 这个变量如果是true 其他页面就会被阻止渲染, 页面为 loading 图标状态

在任何地方使用(获取 or 修改) 这里是 @umijs/plugin-model 插件的功能, 他们两个关系 就好像 reducer 和 context 的关系

  const { initialState, setInitialState } = useModel('@@initialState');
  
  console.log(initialState)
  // {
  //  settings: {
  //    loading: false,
  //  },
  // };
  // 修改使用( 这个貌似是一个异步, 在修改 pro 的代码中发现, 使用的时候尽量加一个 async, 否则在修改之后直接进入首页, 会被拦截未登录)
 // e 是之前已经存在的变量
  async setInitialState((e)=>{
  return {
            ...e, 
            ssotoken: msg.ssotoken,
          };
  })

2021/12/23!!!