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

    前言

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

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

    安装依赖

    yarn add @ant-design/pro-components

    • 1

    使用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;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

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

    状态和效果

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

    菜单项渲染

    渲染 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]);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    加载状态的状态

    • 使用 useState 钩子来管理加载状态。loading 最初被设置为 true，表示组件最初处于加载状态。
    const [loading, setLoading] = useState(true);

    • 1

    位置和导航

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

    • 1
    • 2

    权限检查的 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]);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    此部分代码确保在进行权限检查时显示加载状态，然后根据权限结果进行导航，最终在检查完成后将加载状态设置为 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;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    这段代码定义了一个名为 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';

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    主题配置

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

    • 1
    • 2
    • 3

    路由

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

    • 1

    登录表单

    • 该组件渲染了一个来自 Ant Design Pro 组件的 LoginForm，并设置了标题和副标题。
    <LoginForm
  title="知雀"
  subTitle="后台管理系统"
>

    • 1
    • 2
    • 3
    • 4

    表单字段

    • 使用两个 ProFormText 组件分别用于用户名和密码字段。它们包括占位符、前缀图标和验证规则。
    <ProFormText
  name="username"
  // 其他属性
/>
<ProFormText.Password
  name="password"
  // 其他属性
/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    样式

    • 该组件使用了一个 CSS 模块（styles）进行样式设置，登录表单的背景颜色基于主题令牌进行设置。
    <div className={styles.loginForm} style={{ background: colorBgContainer }}>

    • 1

    忘记密码链接

    • 表单底部包含一个用于重置或找回密码的链接。
    <Button type="link" className={styles.resetPassword}>
  忘记密码？
</Button>

    • 1
    • 2
    • 3

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

    实现登录

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

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

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

    结语

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

  • 相关阅读:
    解锁高效创新：IPD策略如何重塑产品开发流程
    Debezium系列之：实现表中指定字段相同的数据始终发往Kafka Topic相同的分区
    软考系统架构师倒计时第2天
    阿里云ECS服务器配置怎么选？
    刘二大人 PyTorch深度学习实践 笔记 P5 用PyTorch实现线性回归
    C# FileSystemWatcher 实时监控文件的增加、修改、重命名和删除实例
    react redux(一)
    linux早期内存管理：memblock完全介绍
    Badboy录制jmeter性能测试脚本
    互联网图片安全风控实战训练营开营！
  • 原文地址：https://blog.csdn.net/weixin_41908433/article/details/134364103