📖 前言

在現代Web應用中，驗證碼系統是保障安全的重要組成部分。本文將詳細介紹如何從零開始構建一個功能完整的驗證碼圖片管理系統，涵蓋前端React開發、後端接口對接、狀態管理等關鍵技術點。

🎯 項目概述

系統功能：

  • 驗證碼圖片列表展示與分頁
  • 關鍵詞搜索過濾
  • 批量選擇與刪除
  • 單個驗證碼答案實時編輯
  • 完整的狀態管理和錯誤處理

技術棧：

  • 前端：React + TypeScript + Arco Design
  • 狀態管理：React Hooks
  • 網絡請求：Axios封裝
  • UI組件：Arco Design

🏗️ 核心架構設計

1. 狀態管理設計

typescript
// 核心狀態定義
interface AppState {
  dataList: yzmku[];           // 數據列表
  loading: boolean;            // 加載狀態
  selectedRowKeys: string[];   // 選中項
  pagination: PaginationData;  // 分頁信息
  searchTerm: string;          // 搜索詞
  editingId: string | null;    // 編輯狀態
}

2. 組件結構

text
Yanzhengmaku/
├── 狀態管理區 (useState Hooks)
├── 數據操作區 (API調用函數)
├── 事件處理區 (用户交互處理)
├── 表格配置區 (列定義)
└── UI渲染區 (JSX組件)

🔧 關鍵技術實現

1. 分頁功能實現

核心代碼：

typescript
const handlePaginationChange = (page: number, pageSize?: number) => {
  const newPageSize = pageSize || pagination.pageSize;
  
  // 立即更新狀態確保UI響應
  setPagination({
    ...pagination,
    page,
    pageSize: newPageSize,
  });

  // 加載新數據
  loadData({
    page,
    pageSize: newPageSize,
    searchTerm: searchTerm || undefined,
  });
};

關鍵點：

  • 狀態立即更新保證UI響應性
  • 保持搜索條件在分頁時不變
  • 合理的參數傳遞結構

2. 搜索功能實現

typescript
const handleSearch = (value: string) => {
  setSearchTerm(value);
  // 搜索時重置到第一頁
  loadData({
    page: 1,
    pageSize: pagination.pageSize,
    searchTerm: value || undefined,
  });
}

;

設計思路：

  • 搜索即觸發，無需額外確認
  • 自動重置頁碼，避免空頁情況
  • 支持空值處理

3. 批量操作實現

typescript
// 全選/取消全選
const handleSelectAll = (checked: boolean) => {
  setSelectAll(checked);
  setSelectedRowKeys(checked ? dataList.map(item => item._id) : []);
};

// 單個選擇
const handleSelect = (selected: boolean, record: yzmku) => {
  const newSelectedKeys = selected
    ? [...selectedRowKeys, record._id]
    : selectedRowKeys.filter(key => key !== record._id);
  
  setSelectedRowKeys(newSelectedKeys);
  setSelectAll(newSelectedKeys.length === dataList.length);
};

用户體驗優化：

  • indeterminate狀態顯示部分選中
  • 實時更新選中數量
  • 防誤操作確認對話框

4. 實時編輯功能

編輯模式切換：

typescript
const handleStartEdit = (record: yzmku) => {
  setEditingId(record._id);
  setEditingAnswer(record.verificationAnswer || '');
};

const handleCancelEdit = () => {
  setEditingId(null);
  setEditingAnswer('');
};

數據保存：

typescript
const handleSaveAnswer = (record: yzmku) => {
  if (!editingAnswer.trim()) {
    Message.warning('請輸入驗證碼答案');
    return;
  }

  const updateData = {
    id: record._id,
    verificationAnswer: editingAnswer,
  };

  WebAccess_pp.updateCaptchaImage(updateData, (res: any) => {
    if (res && res.code === 200) {
      Message.success('驗證碼答案更新成功');
      // 樂觀更新：立即更新本地狀態
      const updatedList = dataList.map(item => 
        item._id === record._id 
          ? { ...item, verificationAnswer: editingAnswer }
          : item
      );
      setDataList(updatedList);
      handleCancelEdit();
    }
  });
};