2. 程式人生 > 其它 >React-Antd Pro增刪改查

React-Antd Pro增刪改查

阿新 • • 發佈：2021-10-20
基礎功能無非是增刪改查，用於熟悉路由，元件，傳值等Antd Pro的常用功能 上文介紹了Antd Pro的基礎搭建，再此基礎上進行實踐 Antd Pro預設版本V5 一.選單 首先配置左側選單列表，資料夾config》config.ts中找到routes: 新增如下內容： 
{
      path:'/myapp',
      name:'我的應用',
      icon:'AppstoreFilled', 
      routes:[
        {
          name:'應用列表',
          path:'./user/manage', 
          component:'./user/manage'
        }  
      ],
 }

結果下圖所示：

二.模組 找到資料夾pages
,建立資料夾user,再建立資料夾manage。 然後配置頁面，請求，資料模型等。 最後結構如下圖所示： components:用於放置頁面常用的元件 data.d.ts:用到的資料模型 index.tsx:模組的主頁面 service.ts:封裝了用到的Api請求函式 這種結構的細分對後期專案維護非常友好，缺點是前期開發速度受影響 （1）準備工作 1.1 封裝資料模型data.d.ts 
 1 export type TableListItem = {
 2     id: string;
 3     rolename: string;
 4     account: string
 
;
 5     username: string; 
 6   };
 7   export type TableListPagination = {
 8     total: number;
 9     pageSize: number;
10     current: number;
11   };
1.2 封裝用到的API請求 在Antd Pro中是通過Mock實現，本篇用.net core Api進行替換，後端程式碼在下文附件中下載 
 1 // @ts-ignore
 2 /* eslint-disable */
 3 import { request } from 'umi';

 
 4 import { TableListItem } from './data';
 5 
 6 /** 獲取列表  */
 7 export async function rule(
 8   params: {
 9     // query
10     /** 當前的頁碼 */
11     current?: number;
12     /** 頁面的容量 */
13     pageSize?: number;
14   },
15   options?: { [key: string]: any },
16 ) {
17   return request<{
18     data: TableListItem[];
19     /** 列表的內容總數 */
20     total?: number;
21     success?: boolean;
22   }>('http://localhost:4089/User', {
23     method: 'GET',
24     params: {
25       ...params,
26     },
27     ...(options || {}),
28   });
29 }
30 
31 /** 更新 */
32 export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
33   return request<TableListItem>('http://localhost:4089/User/Update', {
34     data,
35     method: 'PUT',
36     ...(options || {}),
37   });
38 }
39 
40 /** 新建  */
41 export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
42   return request<TableListItem>('http://localhost:4089/User/Add', {
43     data,
44     method: 'POST',
45     ...(options || {}),
46   });
47 }
48 
49 /** 刪除  */
50 export async function removeRule(data: {  key: string[]  }, options?: { key: string[] }) {
51    return request<Record<string,string[]>>('http://localhost:4089/User', {  
52    data,
53     method: 'DELETE',
54     ...(options || {}),
55   });
56 }

（2）列表 index.tsx

實現效果如下：

程式碼如下：

  1 import { PlusOutlined } from '@ant-design/icons';
  2 import { Button, message  } from 'antd';
  3 import React, { useState } from 'react';
  4 import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
  5 import type { ProColumns } from '@ant-design/pro-table';
  6 import ProTable from '@ant-design/pro-table'; 
  7 import { rule, addRule,updateRule,removeRule } from './service';
  8 import type { TableListItem, TableListPagination } from './data';import  CreateForm   from './components/CreateForm';
  9 import  UpdateForm   from './components/UpdateForm';
 10  
 11 
 12 const handleRemove = async (selectedRows: TableListItem[]) => {
 13   const hide = message.loading('正在刪除');
 14   if (!selectedRows) return true;
 15   console.log( selectedRows);
 16   console.log( selectedRows.map((row) => row.id));
 17   try {
 18     await removeRule({
 19       key: selectedRows.map((row) => row.id),
 20     });
 21     hide();
 22     message.success('刪除成功，即將重新整理');
 23     return true;
 24   } catch (error) {
 25     hide();
 26     message.error('刪除失敗，請重試');
 27     return false;
 28   }
 29 };
 30 
 31 const TableList: React.FC = () => { 
 32   const [visible, setVisible] = useState<boolean>(false);
 33   const [current, setCurrent] = useState<Partial<TableListItem> | undefined>(undefined); 
 34   const [updvisible, setUpdvisible] = useState<boolean>(false);
 35   const handleSubmit = (values: TableListItem) => 
 36   {
 37     addRule({ ...values });    
 38     message.success('新增成功'); 
 39     setVisible(false);
 40   };
 41   const handleUpdSubmit = (values: TableListItem) => 
 42   {
 43     updateRule({ ...values });    
 44     message.success('修改成功'); 
 45     setUpdvisible(false);
 46   }; 
 47    
 48   const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
 49   
 50   const columns: ProColumns<TableListItem>[] = [
 51     {
 52       title: 'id',
 53       dataIndex: 'id', 
 54       valueType: 'textarea',
 55       hideInForm: true,
 56       hideInTable: true
 57     },
 58     {
 59       title: '角色名稱',
 60       dataIndex: 'rolename', 
 61       valueType: 'textarea',
 62     },
 63     {
 64       title: '使用者名稱',
 65       dataIndex: 'username',
 66       valueType: 'textarea',
 67     },
 68     {
 69       title: '賬號',
 70       dataIndex: 'account',
 71       valueType: 'textarea',
 72     },
 73     {
 74       title: '操作',
 75       dataIndex: 'option',
 76       valueType: 'option',
 77       render: (_, record) => [
 78         <a
 79           key="Id"
 80           onClick={(e) => {
 81             e.preventDefault();
 82             setUpdvisible(true); 
 83             setCurrent(record); 
 84           }}
 85         >
 86           修改
 87         </a> 
 88       ],
 89     },
 90   ];
 91 
 92   return (
 93     <PageContainer>
 94       <ProTable<TableListItem, TableListPagination>
 95         headerTitle="查詢表格" 
 96         rowKey="id"
 97         search={{
 98           labelWidth: 120,
 99         }}
100         toolBarRender={( ) => [
101           <Button
102             type="primary"
103             key="primary"
104             onClick={() => {
105               setVisible(true); 
106             }}
107           >
108             <PlusOutlined /> 
109             新建
110           </Button> 
111       ]}
112         request={rule}
113         columns={columns}
114         rowSelection={{
115           onChange: (_, selectedRows) => {
116             console.log("選擇開始："+selectedRows.length);
117             setSelectedRows(selectedRows);
118           },
119         }}
120       />
121       {selectedRowsState?.length > 0 && (
122         <FooterToolbar
123           extra={
124             <div>
125               已選擇{' '}
126               <a
127                 style={{
128                   fontWeight: 600,
129                 }}
130               >
131                 {selectedRowsState.length}
132               </a>{' '}
133               項 &nbsp;&nbsp;
134             
135             </div>
136           }
137         >
138           <Button
139             onClick={async () => {
140                
141               await handleRemove(selectedRowsState);
142               setSelectedRows([]);
143           
144             }}
145           >
146             批量刪除
147           </Button>
148         
149         </FooterToolbar>
150       )} 
151       <CreateForm
152         done={true}
153         visible={visible}
154         current={current} 
155         onSubmit={handleSubmit}
156         onVisibleChange={setVisible}
157       />
158       <UpdateForm
159         done={true}
160         updvisible={updvisible}
161         current={current} 
162         onSubmit={handleUpdSubmit}
163         onVisibleChange={setUpdvisible}
164       />
165        
166     </PageContainer>
167   );
168 };
169 
170 export default TableList;
View Code

ProTable：表格元件，具體使用參考：https://procomponents.ant.design/components/table/

ProColumns：表格列，注意dataIndex屬性對應的大小寫問題

request={rule}: rule對應到data.d.ts中的列表Api 後端模擬了一些資料用於顯示： 其中的CreateForm和UpdateForm在下一步會介紹 （3）新增和修改 新增和修改用彈窗的形式顯示，彈窗元件ModalForm,可以參考https://procomponents.ant.design/components/modal-form 在Antd Pro中彈窗的關閉和顯示 通過其屬性visible控制。需要注意的是，要配置引數屬性onVisibleChange，否則可能會有彈窗無法關閉的問題 3.1 新增頁面 實現效果：

程式碼如下：

 1 import type {FC} from 'react';
 2 import {
 3     ModalForm, 
 4     ProFormText 
 5   } from '@ant-design/pro-form';
 6 import type {TableListItem} from '../data.d' 
 7 type CreateFormProps={
 8     done: boolean;
 9     visible: boolean;
10     current: Partial<TableListItem>| undefined; 
11     onSubmit: (values: TableListItem) => void;
12     onVisibleChange?: (b: boolean) => void;
13 }
14 
15 const CreateForm: FC<CreateFormProps>=(props)=>{
16     const{done,visible,current,onSubmit,onVisibleChange}=props;
17     if(!visible){
18         return null;
19     }
20     return (
21         <ModalForm<TableListItem>
22             visible={visible}
23             title={'新增'} 
24             width={640}
25             onFinish={async (values)=>{
26                 onSubmit(values)
27             }}
28             onVisibleChange={onVisibleChange}
29             initialValues={current}
30             modalProps={{
31                 onCancel: () => {return true;},
32             destroyOnClose:true,
33             bodyStyle:done?{padding:'72px o'}:{}
34             }}
35             >
36              { 
37                 <>
38                 <ProFormText 
39                   name="rolename"
40                   label="角色名稱"
41                   placeholder="請輸入"
42                   />
43                   <ProFormText 
44                   name="account"
45                   label="賬號名稱"
46                   placeholder="請輸入"/> 
47                     <ProFormText 
48                     name="username"
49                     label="使用者名稱稱"
50                     placeholder="請輸入"/>
51                     </>
52               }
53                
54              
55             </ModalForm>
56     );
57 };
58 export default CreateForm;
View Code

點選"確定"，觸發”onFinish“，呼叫父元件傳來的方法handleSubmit提交資料,引數values拿到需要提交的能對映到data.d.ts中的TableListItem模型資料

3.2 修改頁面 實現效果： 程式碼如下： 
 1 import type {FC} from 'react';
 2 import {
 3     ModalForm, 
 4     ProFormText 
 5   } from '@ant-design/pro-form';
 6 import type {TableListItem} from '../data.d' 
 7 type UpdateFormProps={
 8     done: boolean;
 9     updvisible: boolean;
10     current: Partial<TableListItem>| undefined; 
11     onSubmit: (values: TableListItem) => void;
12     onVisibleChange?: (b: boolean) => void;
13 
14 }
15 
16 const UpdateForm: FC<UpdateFormProps>=(props)=>{
17     const{done,updvisible,current,onSubmit,onVisibleChange}=props;
18     if(!updvisible){
19         return null;
20     }
21     return (
22         <ModalForm<TableListItem>
23             visible={updvisible}
24             title={'修改'} 
25             width={640}
26             onFinish={async (values)=>{
27                 onSubmit(values)
28             }}
29             onVisibleChange={onVisibleChange}
30             initialValues={current}
31             modalProps={{
32             destroyOnClose:true,
33             bodyStyle:done?{padding:'72px o'}:{}
34             }}
35             >
36              { 
37                 <>
38                 <ProFormText 
39                   name="rolename"
40                   label="角色名稱"
41                   placeholder="請輸入"
42                   />
43                   <ProFormText 
44                   name="account"
45                   label="賬號名稱"
46                   placeholder="請輸入"/> 
47                     <ProFormText 
48                     name="username"
49                     label="使用者名稱稱"
50                     placeholder="請輸入"/>
51                     </>
52               }
53                
54              
55             </ModalForm>
56     );
57 };
58 export default UpdateForm;
View Code

修改和新增功能類似，多了資料顯示的功能，選擇後的資料通過current儲存

最後提交至updateform元件的current屬性

（4）刪除

主要是針對批量刪除，在表格中配置rowSelection，監聽和記錄選中的項 刪除介面的傳參是Request Payload，後端接收引數的是字典型別，後面還需優化

Dictionary<string,string[]>接收待刪除項

三.總結 以上簡單記錄了下基於Antd Pro的增刪改查功能，涉及到React一些基礎知識，比如建立元件，Hook的一些使用， 涉及到了ES6的一些常用函式map,set,async,Promise等， 最主要是Pro中6個基於Antd開發的模板元件，ProLayout,ProTable,ProForm,ProCard,ProDescriptions,ProSkeleton 以上僅用於學習和總結！

相關推薦

React-Antd Pro增刪改查

基礎功能無非是增刪改查，用於熟悉路由，元件，傳值等Antd Pro的常用功能 上文介紹了Antd Pro的基礎搭建，再此基礎上進行實踐

react增刪改查

react增刪改查 import React, { Component } from \'react\' import axios from \'axios\' export default class List extends Component {

react實現todolist的增刪改查詳解

目錄以todolist為例目錄如下app.Input.jsList.jsItem.jsTotal.jsMask.js（彈窗）bus.jsApp.總結以todolist為例

EF基礎的增刪改查VS2017（Database First）

一、ORM 是什麼 在瞭解Entity Framework是什麼前，我們先的知道ORM是什麼，ORM是一種物件關係對映思想，我們可以這樣理解：

Spring Boot WebFlux 增刪改查完整實戰 demo

03：WebFlux Web CRUD 實踐 前言 上一篇基於功能性端點去建立一個簡單服務，實現了 Hello 。這一篇用 Spring Boot WebFlux 的註解控制層技術建立一個 CRUD WebFlux 應用，讓開發更方便。這裡我們不對資料庫儲存進行

Go元件學習——gorm四步帶你搞定DB增刪改查

1、簡介 ORM Object-Relationl Mapping， 它的作用是對映資料庫和物件之間的關係，方便我們在實現資料庫操作的時候不用去寫複雜的sql語句，把對資料庫的操作上升到對於物件的操作。

MongoDB的安裝以及基本增刪改查命令

MongoDB 介紹 mongodb和大多數NoSQL 資料庫(redis,memcached 等)一樣，都是以kv資料庫(key/value) 儲存資料不同的是mongodb 檔案資料庫,儲存的是檔案(Bson->json的二進位制化).

使用 orm 實現增刪改查 - beego 框架使用筆記

概述 beego ORM 是一個強大的 Go 語言 ORM 框架，目前該框架已支援 MySQL、PostgreSQL、Sqlite3 資料庫驅動。

java 資料庫連線與增刪改查操作例項詳解

本文例項講述了java 資料庫連線與增刪改查操作。分享給大家供大家參考，具體如下：

JdbcTemplate方法介紹與增刪改查操作實現

JdbcTemplate介紹 為了使 JDBC 更加易於使用,Spring 在 JDBCAPI 上定義了一個抽象層,以此建立一個JDBC存取框架，Spring Boot Spring Data-JPA。

Python使用pymysql模組操作mysql增刪改查例項分析

本文例項講述了Python使用pymysql模組操作mysql增刪改查。分享給大家供大家參考，具體如下：

mysql觸發器之觸發器的增刪改查操作示例

本文例項講述了mysql觸發器之觸發器的增刪改查操作。分享給大家供大家參考，具體如下：

mysql檢視之管理檢視例項詳解【增刪改查操作】

本文例項講述了mysql檢視之管理檢視操作。分享給大家供大家參考，具體如下：

pymysql模組的使用(增刪改查)詳解

一、pymysql的下載和使用 之前我們都是通過MySQL自帶的命令列客戶端工具mysql來操作資料庫，那如何在python程式中操作資料庫呢？這就用到了pymysql模組，該模組本質就是一個套接字客戶端軟體，使用前需要事先安裝。

MongoDB簡單操作示例【連線、增刪改查等】

本文例項講述了MongoDB簡單操作。分享給大家供大家參考，具體如下： MongoDB 中預設的資料庫為 test，連線後嘗試以下操作

Python實現連線MySql資料庫及增刪改查操作詳解

本文例項講述了Python實現連線MySql資料庫及增刪改查操作。分享給大家供大家參考，具體如下：

python實現的MySQL增刪改查操作例項小結

本文例項總結了python實現的MySQL增刪改查操作。分享給大家供大家參考，具體如下：

Oracle + mybatis實現對資料的簡單增刪改查例項程式碼

什麼是 MyBatis？ MyBatis 是支援普通 SQL 查詢，儲存過程和高階對映的優秀持久層框架。 MyBatis 消除了幾乎所有的 JDBC 程式碼和引數的手工設定以及對結果集的檢索。MyBatis 可以使用簡單的XML 或註解用於配置和原始

利用控制檯如何對Redis執行增刪改查命令

前言 本文主要給大家介紹了關於控制檯對Redis執行增刪改查命令的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧

python連結oracle資料庫以及資料庫的增刪改查例項

初次使用python連結oracle，所以想記錄下我遇到的問題，便於向我這樣初次嘗試的朋友能夠快速的配置好環境進入開發環節。