UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程

焦急的等待着更新

这个课程说明时候开始啊？

我也想问啊，老师啥时候更新啊

焦急的等待着更新,+1 希望老师 主要先更新这个,进行学习.

尽快更这个

Ant Design Pro4 超级多问题，要是我就会等他修复半年 稳定了再上生产环境

还有登录页的问题，看 issues 官方的回答

给个地址我看下，这个问题的

https://github.com/ant-design/ant-design-pro/issues/4669

求更

过几天就开始更这个哈

期待

老师，能否讲讲如何做自定义组件呢？我想做一个图片验证码组件，用于登录页面。谢谢。

简单，一个 Input 框，一个 Img 标签就可以了，Img 标签每次点击重新请求图片验证码就可以了。
我是用原生 Captcha 组件改改的

            <Captcha
              name="captcha"
              captchaPath={captchaPath}
              onGetCaptcha={this.onGetCaptcha}
              placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
              rules={[
                {
                  required: true,
                  message: formatMessage({ id: 'validation.verification-code.required' }),
                },
              ]}
              onPressEnter={e => {
                e.preventDefault();
                this.loginForm.validateFields(this.handleSubmit);
              }}
            />

  onGetCaptcha = () => {
    const uuid = generateUUID()
    this.setState({
      uuid,
      captchaPath: `/api/captcha.jpg?uuid=${uuid}`
    })
  }

            <Captcha
              name="captcha"
              captchaPath={captchaPath}
              onGetCaptcha={this.onGetCaptcha}
              placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
              rules={[
                {
                  required: true,
                  message: formatMessage({ id: 'validation.verification-code.required' }),
                },
              ]}
              onPressEnter={e => {
                e.preventDefault();
                this.loginForm.validateFields(this.handleSubmit);
              }}
            />

  onGetCaptcha = () => {
    const uuid = generateUUID()
    this.setState({
      uuid,
      captchaPath: `/api/captcha.jpg?uuid=${uuid}`
    })
  }

感谢了，兄弟

接入后端的 api,登录成功后转发到首页拉取用户信息时,headers 没有默认带上 token 导致 401,但再次刷新首页又可以了,不知道老师知道原因不?

把 token 存 cookies 吧

但改成跳转的方式就可以,感觉是 routerRedux.replace 的问题

待会试试存 cookie,感觉也会是同样的问题,token 应该是成功存了的.
登录成功后,用 routerRedux.replace 去转发,这段的 headers 没有刷新 authorization 的值

调试的结果是 location.href 会触发这个文件执行,这样就会把存的 token 重新赋值给 authorization,
但 routerRedux.replace 不会触发这边,所以 authorization 的值还是刚进登录页面的空值,难道要在 routerRedux.replace 转发前去触发这个文件执行吗?

第一套有提到存到 localstorage 结合 antd 就有这个问题的，要么换成 axios 等其他工具 发送请求 或 存到 cookies 试下的，存到 localstorage 不是最佳选择

没注意到,我试试 cookie 看行不行吧

嗯，你可以试试

换成 cookie 还是一样的效果，用 location.href 跳就可以。。。

老师能不能说下下 Pro v4 这个课大概什么时候更完

不好预估呀

请问一下，我想配置不同得环境该这么配置，比如说我有两个测试环境，一个生成环境，我要分别打包

老师，请问如何去除全局页脚，我用视频的方法可以覆盖，但是无法去除

老师，如何去除页脚，我用视频的方式只能覆盖，无法去除，就算将很多注释掉，页脚还是存在
import ProLayout, { SettingDrawer,DefaultFooter} from '@ant-design/pro-layout';
import React, { useEffect } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { isAntDesignPro } from '@/utils/utils';
import logo from '../assets/logo.svg';
// import {DefaultFooter} from "@ant-design/pro-layout";

/**

• use Authorized check all menu item */

const menuDataRender = menuList =>
menuList.map(item => {
const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
return Authorized.check(item.authority, localItem, null);
});

const links = [
{
key: '',
title: '',
href: '',
blankTarget: true,
},
{
key: '',
title: '',
href: '',
blankTarget: true,
},
];

const copyright = '';

//所有 footerRender 都注释掉，页脚还是存在，找不到页脚是在哪里引入的
const footerRender = (_, defaultDom) => {
if (! isAntDesignPro()) {
// return defaultDom;
return ( <>

</>
)
}

// return (
// <>
// {defaultDom}
//

// style={{
// padding: '0px 24px 24px',
// textAlign: 'center',
// }}
// >
//
// // src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
// width="82px"
// alt="netlify logo"
// />
//
//
// </>
// );
}
const BasicLayout = props => {
const { dispatch, children, settings } = props;
/**

• constructor */

useEffect(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
type: 'settings/getSetting',
});
}
}, []);
/**

• init variables */

const handleMenuCollapse = payload => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
}
};

return (
<>
logo={logo}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl) {
return defaultDom;
}

      return <Link to={menuItemProps.path}>{defaultDom}</Link>;
    }}
    breadcrumbRender={(routers = []) => [
      {
        path: '/',
        breadcrumbName: formatMessage({
          id: 'menu.home',
          defaultMessage: 'Home',
        }),
      },
      ...routers,
    ]}
    itemRender={(route, params, routes, paths) => {
      const first = routes.indexOf(route) === 0;
      return first ? (
        <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
      ) : (
        <span>{route.breadcrumbName}</span>
      );
    }}
    footerRender={footerRender}
    menuDataRender={menuDataRender}
    formatMessage={formatMessage}
    rightContentRender={rightProps => <RightContent {...rightProps} />}
    {...props}
    {...settings}
  >
    {children}
  </ProLayout>
  <SettingDrawer
    settings={settings}
    onSettingChange={config =>
      dispatch({
        type: 'settings/changeSetting',
        payload: config,
      })
    }
  />
</>

);
};

export default connect(({ global, settings }) => ({
collapsed: global.collapsed,
settings,
}))(BasicLayout);

这不是 v4 版本的啊，v4 改了挺多的，看完有些地方还是不会用

权限管理那个视频里有 v4 的分页

是基于 Ant design pro v4 & ant design v3

Ant design pro v4 & ant design v4 的，可以看这个 https://www.qiuzhi99.com/playlists/ant-design-pro-permisson.html ，有分页的

这个课有很多和直接 create 出来的项目不一样，咱们所有都是参考模板自动创建。注册那个部分，创建出来的部分，路由都无法访问显示 404.怎么才能和老师的代码从原生开始保持一致呢。

和视频保持相同版本

怎么才能和视频一样呢，我是用老师提供的方法 create 出来的。

这是本套视频的源码 https://github.com/hfpp2012/hello-antd-pro-v4

你好 我目前看到该网站大部分都是 react 栈视频教程， 请问作者是否会 出一些 vue 栈 flutter 、koa2 等视频 是否会更友好

嗯，会

各位，视频靠谱不？最近也在用基于 v4 这个框架做权限，不怎么会，想找个视频学习下？求分享，我 qq1733094171 谢谢大佬们

这个分享送会员如何操作?