从零开始搭建React+TypeScript+webpack开发环境-集成antd ProComponents

前言

Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，提供更高程度的抽象，提供更上层的设计规范，并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。

在 ProComponents 中内置了一系列的设计规范，预设了常用的逻辑。在这个基础上提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。我们希望通过 Pro 系列组件提供快速高效搭建高质量中后台应用的能力，进一步扩展 Ant Design 的能力，欢迎使用并提出宝贵的意见。

安装依赖

yarn add @ant-design/pro-components

使用`ProLayout`创建后台管理页面

ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。

创建`BasicLayout`

import React, { FC, useEffect, useState } from 'react';
import { Link, useLocation, useNavigate, useOutlet } from 'react-router-dom';
import {
  MenuDataItem,
  PageContainer,
  ProLayout,
} from '@ant-design/pro-components';
import { checkPermission, getMenuList } from '@/services/console/menu';
import { Icon } from '@/components';

const BasicLayout: FC = (props) => {
  const children = useOutlet();
  const [menuData, setMenuData] = useState<Array<MenuDataItem>>([]);

  const menuItemRender = ({
    path,
    name,
    icon,
    isUrl,
  }: MenuDataItem & { isUrl: boolean }) => {
    const marginRight = 5;
    if (isUrl) {
      return (
        <>
          {typeof icon === 'string' && (
            <Icon type={icon} style={{ marginRight }} />
          )}
          <a href={path}>{name}</a>
        </>
      );
    }
    return (
      <>
        {typeof icon === 'string' && (
          <Icon type={icon} style={{ marginRight }} />
        )}
        <Link to={path || ''}>{name}</Link>
      </>
    );
  };
  useEffect(() => {
    getMenuList().then((data) => {
      setMenuData(data);
    });
  }, []);
  return (
    <ProLayout
      {...props}
      title="知雀"
      fixedHeader
      layout="side"
      menuDataRender={() => menuData}
      menuItemRender={menuItemRender}
      pageTitleRender={false}
    >
      <PageContainer style={{ minHeight: '100vh' }}>{children}</PageContainer>
    </ProLayout>
  );
};

export default BasicLayout;

上述代码中，我们使用 Ant Design Pro Components 库创建了应用程序的基本布局。这个组件是一个包含侧边菜单和固定头部的基本布局。它通过 @/services/console/menu 模块的 getMenuList 函数获取菜单数据，并根据数据动态渲染菜单项。

状态和效果

该组件使用 useState 钩子来管理 menuData 状态，该状态保存一个菜单项的数组。
使用 useEffect 钩子在组件挂载时调用 getMenuList 函数来获取菜单数据。一旦数据获取成功，它会使用 setMenuData 设置状态。

菜单项渲染

menuItemRender 函数用于自定义如何渲染每个菜单项。
它检查菜单项是否是一个 URL（isUrl），如果是，则渲染一个带有外部链接的锚点（<a>）元素。否则，它使用 Link 组件进行内部导航。
如果提供了 icon 属性，还会渲染图标。

渲染 ProLayout

使用 Ant Design Pro 中的 ProLayout 组件来定义应用程序的整体布局。
通过传递一些属性，如 title、fixedHeader、layout、menuDataRender、menuItemRender、pageTitleRender 和 loading 来根据需求自定义布局。

页面容器

使用 PageContainer 组件来包装页面内容。它确保内容至少达到视口的高度（minHeight: '100vh'）。

子组件

使用 useOutlet 钩子来渲染嵌套的路由或组件，这些组件位于 PageContainer 内部。

路由鉴权

调用接口查询是否有当前路由的访问权限，没有则重定向到403页面

const [loading, setLoading] = useState(true);
const { pathname } = useLocation();
const navigate = useNavigate();
useEffect(() => {
    checkPermission({
      pathname,
    })
      .then((pass) => {
        if (!pass) {
          navigate('403', { replace: true });
        }
      })
      .catch(() => {
        navigate('503', { replace: true });
      })
      .finally(() => {
        setLoading(false);
      });
  }, [pathname, navigate]);

加载状态的状态

使用 useState 钩子来管理加载状态。loading 最初被设置为 true，表示组件最初处于加载状态。

const [loading, setLoading] = useState(true);

位置和导航

使用 useLocation 钩子获取当前 URL 中的路径名。
使用 useNavigate 钩子获取 navigate 函数，可以使用它在代码中程序化地导航到不同的路由。

const { pathname } = useLocation();
const navigate = useNavigate();

权限检查的 Effect

使用 useEffect 钩子在组件挂载时或 pathname 改变时执行权限检查。
使用当前的 pathname 调用 checkPermission 函数。它返回一个解析为布尔值（pass）的 promise。
如果权限未被授予（!pass），则导航到 ‘403’ 路由，并使用 { replace: true } 选项替换当前路由。
如果发生错误，导航到 ‘503’ 路由，并同样使用 { replace: true } 选项替换当前路由。
无论如何最终，通过 setLoading(false) 将加载状态设置为 false。

useEffect(() => {
    checkPermission({
      pathname,
    })
      .then((pass) => {
        if (!pass) {
          navigate('403', { replace: true });
        }
      })
      .catch(() => {
        navigate('503', { replace: true });
      })
      .finally(() => {
        setLoading(false);
      });
  }, [pathname, navigate]);

此部分代码确保在进行权限检查时显示加载状态，然后根据权限结果进行导航，最终在检查完成后将加载状态设置为 false。

实现登录功能

import React from 'react';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Icon } from '@/components';
import { Button, theme } from 'antd';

import { accountLogin } from '@/services/oauth/login';
import { setAccessToken } from '@/utils/token';
import { useNavigate } from 'react-router-dom';
import styles from './index.less';

const Login: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();

  return (
    <div className={styles.loginForm} style={{ background: colorBgContainer }}>
      <div>
        <LoginForm
          title="知雀"
          subTitle="后台管理系统"
        >
          <ProFormText
            name="username"
            fieldProps={{
              placeholder: '请输入用户名',
              prefix: <Icon type="user" className="prefixIcon" />,
            }}
            rules={[{ required: true, message: '请输入用户名' }]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              placeholder: '请输入密码',
              prefix: <Icon type="lock" className="prefixIcon" />,
            }}
            rules={[{ required: true, message: '请输入密码' }]}
          />
          <div className={styles.loginAction}>
            <Button type="link" className={styles.resetPassword}>
              忘记密码？
            </Button>
          </div>
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;

这段代码定义了一个名为 Login 的 React 函数组件。它看起来是一个使用 Ant Design Pro 组件创建的登录页面，包括一个登录表单。

导入模块

该组件从不同的模块导入了各种组件和工具。特别地，它使用了来自 @ant-design/pro-components 的 LoginForm 和 ProFormText 组件用于登录表单。

import React from 'react';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Icon } from '@/components';
import { Button, theme } from 'antd';
import { accountLogin } from '@/services/oauth/login';
import { setAccessToken } from '@/utils/token';
import { useNavigate } from 'react-router-dom';
import styles from './index.less';

主题配置

使用 theme.useToken() 钩子访问主题令牌，特别是 colorBgContainer 属性，它设置了登录表单的背景颜色。

const {
  token: { colorBgContainer },
} = theme.useToken();

路由

使用 react-router-dom 中的 useNavigate 钩子获取导航函数。它将在登录成功后用于导航到不同的路由。

const navigate = useNavigate();

登录表单

该组件渲染了一个来自 Ant Design Pro 组件的 LoginForm，并设置了标题和副标题。

<LoginForm
  title="知雀"
  subTitle="后台管理系统"
>

表单字段

使用两个 ProFormText 组件分别用于用户名和密码字段。它们包括占位符、前缀图标和验证规则。

<ProFormText
  name="username"
  // 其他属性
/>
<ProFormText.Password
  name="password"
  // 其他属性
/>

样式

该组件使用了一个 CSS 模块（styles）进行样式设置，登录表单的背景颜色基于主题令牌进行设置。

<div className={styles.loginForm} style={{ background: colorBgContainer }}>

忘记密码链接

表单底部包含一个用于重置或找回密码的链接。

<Button type="link" className={styles.resetPassword}>
  忘记密码？
</Button>

该组件提供了一个清晰和样式化的登录表单，并具有在登录成功后导航到不同路由的必要功能。

实现登录

async (formData) => {
     return accountLogin(formData)
       .then(({ accessToken }) => {
         setAccessToken(accessToken);
         navigate('/console', { replace: true });
         return Promise.resolve(true);
       })
       .catch(() => {
         return Promise.resolve(false);
       });
   }}

通过 accountLogin(formData) 异步调用登录服务，该服务返回一个 Promise。
如果登录成功（.then(({ accessToken }) => { ... })），将获取的访问令牌设置为应用程序的访问令牌，然后使用 navigate('/console', { replace: true }) 进行页面导航到’/console’路由，并使用 { replace: true } 选项替换当前路由。
如果登录失败（.catch(() => { ... })），则返回一个解析为 false 的 Promise。

整体而言，这个异步函数用于处理登录逻辑。如果登录成功，它设置访问令牌并将用户重定向到’/console’路由。如果登录失败，它返回一个解析为 false 的 Promise。这个函数的结构适用于一些异步操作，例如处理用户认证。

结语

本文主要介绍了如何创建一个后台管理模板，主要目标是在用户提供的登录凭据进行验证后，有效地管理用户会话并将其导航到应用程序的主要部分。通过异步处理和适当的用户反馈，代码提供了良好的用户体验和可维护性。

全栈探索者