antd pro 使用心得

来源:https://www.cnblogs.com/wang_yb/archive/2022/11/22/16915050.html
-Advertisement-
Play Games

最近用 antd pro 開發了一些 web 小工具。 antd pro 不僅僅是升級版的 antd 組件,更重要的是提供了全套的前端解決方案,包括前端工程的編譯打包,路由配置,數據管理,樣式和資源的引用,和後端的交互方式。 甚至對於網站的國際化也有支持。 本篇是近期使用antd pro 時,用到的 ...


最近用 antd pro 開發了一些 web 小工具。

antd pro 不僅僅是升級版的 antd 組件,更重要的是提供了全套的前端解決方案,包括前端工程的編譯打包,路由配置,數據管理,樣式和資源的引用,和後端的交互方式。
甚至對於網站的國際化也有支持。

本篇是近期使用antd pro 時,用到的一些功能的整理,整理這些內容是因為比較常用,省得每次在 antd pro 的官方文檔中去搜索。

菜單部分

antd pro一般用在後臺的管理系統,所以菜單部分是重中之重,antd pro 的菜單是集中在一個文件中(config/routes.ts)配置的,非常方便。

子菜單配置

管理系統中,隨著管理粒度的細分,子菜單是必不可少的,antd pro中配置菜單主要在2個地方:

  • config/routes.ts
  • src/locales/zh-CN/menu.ts

配置子菜單的路由:

{
  path: 'auth',  // 一級菜單路由
  name: 'auth',  // 一級菜單名稱
  icon: 'team',  // 一級菜單
  routes: [
    {
      path: '/auth/user',                 // 二級菜單路由
      name: 'user',                       // 二級菜單名稱
      component: './auth/user/UserList',  // 二級菜單對應的模塊
    },
  ],
}

繼續在 path: '/auth/user'中配置 routes:[ ... ]就能形成三級菜單

配置菜單的名稱:

'menu.auth': '認證許可權',
'menu.auth.user': '用戶管理',

隱藏的菜單

有時候,我們配置的一些路由並不希望它出現在菜單中,比如一些新增,修改頁面,在頁面跳轉中會出現,但是不需要顯示在菜單中,這時,只需如下設置:

{
    path: '/data/:data_id/detail',
    name: 'data.detail',
    hideInMenu: true,       // 隱藏此路由在菜單中的顯示
    component: './data/detail/DataDetailList',
  },

table組件

ProTable 是 antd pro 中的重要組件,實際上我是通過使用 ProTable 才開始逐漸使用 antd pro 的。
這個組件可以方便的在表格中展示各種形態的數據,也很好的集成了分頁和檢索功能,基本上,只要準備好要展示的數據,配置下表格的各個列,數據的展示和基本的互動都自動完成了。

這裡簡單整理下數據的載入方式:

<ProTable<API.DataDetailItem>
  columns={columns}     // columns 是定義各個列屬性的變數,這裡不再詳細列出了
  rowKey="id"
  rowClassName={getRowClassName}  // 這裡可以自定義一個函數,突出顯示正在操作的行
  actionRef={tableRef}
  headerTitle={`【${dataSource}】的明細數據`}
  search={{
    labelWidth: 'auto',
  }}
  toolBarRender={() => [  // 這裡其實可以定義一系列操作表格的按鈕或其他組件
    <Button
      key="button"
      icon={<PlusOutlined />}
      type="primary"
      onClick={() => {
        setModalAddVisible(true);
      }}
    >
      新建
    </Button>,
  ]}
  request={async (params: API.DataDetailItem & API.PageInfo) => {
    const resp = await getDataDetailList(params);  // getDataDetailList 是自定義的請求後臺數據的API
    return {
      data: resp.data.data_detail,
      total: resp.data.data_detail_aggregate.aggregate.count,
    };
  }}
/>

ProTable<API.DataDetailItem>這裡其實是定義了table中要處理的數據類型。
DataDetailItem不用和 table的 column完全一致,返回業務需要返回的數據即可,一般會比 column 要求的內容多。

request屬性可以是一個非同步函數,用來初始化 ProTable 的。
它的參數中包含了分頁信息API.PageInfo和返回的數據類型 API.DataDetailItem
其中API.PageInfo包含的信息很簡單:

  type PageInfo = {
    pageSize?: number;  // 每頁顯示的數量
    current?: number;   // 當前是哪一頁
  };

而數據類型API.DataDetailItem則是和 ProTable<API.DataDetailItem> 定義的類型相對應。

路由組件

在 antd pro 中,路由就在 config/routes.ts中集中配置,並且可以和菜單關聯,非常簡單。
這裡就整理兩點,一個是頁面中獲取帶參數路由的參數,一個是頁面間的路由跳轉(不是通過菜單來跳轉路由)。

帶參數的路由

路由配置在 config/routes.ts中:

{
  path: '/data/:data_id/meta',
  name: 'data.meta',
  hideInMenu: true,
  component: './data/meta/MetaDataList',
}

在對應的頁面中,可以這樣獲取路由中的參數 data_id

import { useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};  // 定義路由參數的類型,這裡只有一個參數 data_id

export default () => {
  const urlParams = useParams<MetaDataParams>();
	console.log(urlParams.data_id);
}



路由跳轉

通過菜單的跳轉不用額外配置,只要在 config/routes.ts中定義即可。
除此之外,還有一些頁面跳轉時不通過菜單的,比如從列表頁面到明細頁面,

列表頁面的跳轉:

import { history } from 'umi';

// 省略.... ....
<Button
  type="link"
  size="small"
  key="detail"
  onClick={() => {
    history.push('/data/' + rd.id + '/detail');
  }}
>
  明細
</Button>,
// 省略.... ....

明細頁面返回列表頁面:

import { history } from 'umi';


// 省略.... ....
<Button
  key="back"
  icon={<RollbackOutlined />}
  onClick={() => {
    history.goBack();
  }}
>
  返回
</Button>,
// 省略.... ....

頁面初始化

其實,antd pro 的數據展示組件基本都有 request屬性,用來初始化其中的數據,比如上面提到的 ProTable 組件。

但是,有時候在詳情或者編輯頁面,還是會需要載入一些其他的數據,這時候,就需要在頁面載入時初始化一些數據,本質上這是 React 的功能,而不是 antd pro 的功能。

比如,詳情頁面根據ID載入其他信息:

import { useState, useEffect } from 'react';
import { history, useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};

export default () => {
  const urlParams = useParams<MetaDataParams>();
  const [dataSource, setDataSource] = useState('');
  
  useEffect(() => {
    if (dataSource === '') {
      (async function initDataItem() {
        const d = await getDataById(urlParams.data_id); // getDataById 是訪問後端API的函數
        console.log(d);
        setDataSource(d.data.data_source_by_pk.name || '');
      })();
    }
    console.log('effect');
  }, [dataSource, urlParams]);
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、MySQL簡介 ​ MySQL是一種關係型資料庫管理系統,關係資料庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。 二、安裝與下載 1、下載流程 1、訪問官方(www.mysql.com) 2、點擊‘DOWNLOADS’,進入下載界面 3、下拉,找到‘ ...
  • 在今年的第七屆中國開源年會上,StoneDB 團隊在大數據分論壇發表了《HTAP 的下一步?SoTP 初探》主題演講,在本次演講中,我們首次正式對外闡釋了“SoTP 資料庫”的技術理念,本系列是演講實錄+小編補充版,權當拋磚引玉,供大家批評指正。由於內容比較多,本文為第一章節,主要講講我們提 SoT ...
  • 1 構建一個centos7.6.1810的docker鏡像,用於下載MySQL+xtrabackup所需安裝包 7.6.1810的docker鏡像,低版本最小安裝,會儘可能把所需的包拉齊。 Dockerfile文件如下 FROM centos:7.6.1810 CMD yum install -y ...
  • 在Redis運維過程中,由於bigkey的存在,會影響業務程式的響應速度,嚴重的還會造成可用性損失,DBA也一直和業務開發方強調bigkey的規避方法以及危害 ...
  • Android網路請求(3) 網路請求框架OkHttp 本節我們來講解OkHtpp網路請求框架 什麼是網路請求框架 在我的理解中,網路請求框架是為了方便我們更加便捷規範的進行網路請求所建的類,我們通過調用該類中的方法可以快速地進行網路請求,切幫我們封裝好了一些數據的處理方法,方便我們用更少的代碼去做 ...
  • Android網路請求(2) 在android網路開發中,除get請求外常見的還有post、put、delete這三種,接下來我們將詳細講解這三種請求及參數 GET請求 我們使用過get請求了,對於我們的日常生活中get請求毫無疑問是最常用的請求方式,大部分的瀏覽器搜索都是通過get請求,如在百度上 ...
  • 最近需要接手別人c#那邊組的一個項目新增頁面,但他們的是React的框架,作為一名後端,沒接觸過,一臉懵逼。。。。。。 說哈我的處理思路: 一、先用相應的程式打開該項目的源碼。如:react用vscode打開 二、先找到了頁面,查看頁面結構 這是我後面加的頁面,可以看出來,less類似css樣式 j ...
  • Express 快速創建 Web 伺服器 express 的基本使用 先安裝express包 npm i [email protected] 1.導入 express const express = require('express'); 2.創建 web 伺服器 const app = express( ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...