記錄--在Vue3這樣子寫頁面更快更高效

来源:https://www.cnblogs.com/smileZAZ/archive/2023/03/04/17178744.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 在開發管理後臺過程中，一定會遇到不少了增刪改查頁面，而這些頁面的邏輯大多都是相同的，如獲取列表數據，分頁，篩選功能這些基本功能。而不同的是呈現出來的數據項。還有一些操作按鈕。 對於剛開始只有 1，2 個頁面的時候大多數開發者可能會直 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

在開發管理後臺過程中，一定會遇到不少了增刪改查頁面，而這些頁面的邏輯大多都是相同的，如獲取列表數據，分頁，篩選功能這些基本功能。而不同的是呈現出來的數據項。還有一些操作按鈕。

對於剛開始只有 1，2 個頁面的時候大多數開發者可能會直接將之前的頁面代碼再拷貝多一份出來，而隨著項目的推進類似頁面數量可能會越來越多，這直接導致項目代碼耦合度越來越高。

這也是為什麼在項目中一些可復用的函數或組件要抽離出來的主要原因之一

下麵，我們封裝一個通用的useList，適配大多數增刪改查的列表頁面，讓你更快更高效的完成任務，準點下班 ~

前置知識

封裝

我們需要將一些通用的參數和函數抽離出來，封裝成一個通用hook，後續在其他頁面復用相同功能更加簡單方便。

定義列表頁面必不可少的分頁數據

export default function useList() {
  // 載入態
  const loading = ref(false);
  // 當前頁
  const curPage = ref(1);
  // 總數量
  const total = ref(0);
  // 分頁大小
  const pageSize = ref(10);
}

如何獲取列表數據

思考一番，讓useList函數接收一個listRequestFn參數，用於請求列表中的數據。

定義一個list變數，用於存放網路請求回來的數據內容，由於在內部無法直接確定列表數據類型，通過泛型的方式讓外部提供列表數據類型。

export default function useList<ItemType extends Object>(
  listRequestFn: Function
) {
  // 忽略其他代碼
  const list = ref<ItemType[]>([]);
}

在useList中創建一個loadData函數，用於調用獲取數據函數，該函數接收一個參數用於獲取指定頁數的數據（可選，預設為curPage的值）。

  • 執行流程
  1. 設置載入狀態
  2. 調用外部傳入的函數，將獲取到的數據賦值到list和total中
  3. 關閉載入態

這裡使用了 async/await 語法，假設請求出錯、解構出錯情況會走 catch 代碼塊，再關閉載入態

這裡需要註意，傳入的 listRequestFn 函數接收的參數數量和類型是否正常對應上 請根據實際情況進行調整

export default function useList<ItemType extends Object>(
  listRequestFn: Function
) {
  // 忽略其他代碼
  // 數據
  const list = ref<ItemType[]>([]);
  // 過濾數據
  // 獲取列表數據
  const loadData = async (page = curPage.value) => {
    // 設置載入中
    loading.value = true;
    try {
      const {
        data,
        meta: { total: count },
      } = await listRequestFn(pageSize.value, page);
      list.value = data;
      total.value = count;
    } catch (error) {
      console.log("請求出錯了", "error");
    } finally {
      // 關閉載入中
      loading.value = false;
    }
  };
}

別忘了，還有切換分頁要處理

使用 watch 函數監聽數據，當curPage，pageSize的值發生改變時調用loadData函數獲取新的數據。

export default function useList<ItemType extends Object>(
  listRequestFn: Function
) {
  // 忽略其他代碼
  // 監聽分頁數據改變
  watch([curPage, pageSize], () => {
    loadData(curPage.value);
  });
}

現在實現了基本的列表數據獲取

實現數據篩選器

在龐大的數據列表中，數據篩選是必不可少的功能

通常，我會將篩選條件欄位定義在一個ref中，在請求時將ref丟到請求函數即可。

在 useList 函數中，第二個參數接收一個filterOption對象，對應列表中的篩選條件欄位。

調整一下loadData函數，在請求函數中傳入filterOption對象即可

註意，傳入的 listRequestFn 函數接收的參數數量和類型是否正常對應上 請根據實際情況進行調整

export default function useList<
  ItemType extends Object,
  FilterOption extends Object
>(listRequestFn: Function, filterOption: Ref<Object>) {
  const loadData = async (page = curPage.value) => {
    // 設置載入中
    loading.value = true;
    try {
      const {
        data,
        meta: { total: count },
      } = await listRequestFn(pageSize.value, page, filterOption.value);
      list.value = data;
      total.value = count;
    } catch (error) {
      console.log("請求出錯了", "error");
    } finally {
      // 關閉載入中
      loading.value = false;
    }
  };
}

註意，這裡 filterOption 參數類型需要的是 ref 類型，否則會丟失響應式 無法正常工作

清空篩選器欄位

在頁面中，有一個重置的按鈕，用於清空篩選條件。這個重覆的動作可以交給 reset 函數處理。

通過使用 Reflect 將所有值設定為undefined，再重新請求一次數據。

什麼是 Reflect？看看這一篇文章Reflect 映射對象

export default function useList<
  ItemType extends Object,
  FilterOption extends Object
>(listRequestFn: Function, filterOption: Ref<Object>) {
  const reset = () => {
    if (!filterOption.value) return;
    const keys = Reflect.ownKeys(filterOption.value);
    filterOption.value = {} as FilterOption;
    keys.forEach((key) => {
      Reflect.set(filterOption.value!, key, undefined);
    });
    loadData();
  };
}

導出功能

除了對數據的查看，有些界面還需要有導出數據功能（例如導出 csv，excel 文件），我們也把導出功能寫到useList里

通常，導出功能是調用後端提供的導出Api獲取一個文件下載地址，和loadData函數類似，從外部獲取exportRequestFn函數來調用Api

在函數中，新增一個exportFile函數調用它。

export default function useList<
  ItemType extends Object,
  FilterOption extends Object
>(
  listRequestFn: Function,
  filterOption: Ref<Object>,
  exportRequestFn?: Function
) {
  // 忽略其他代碼
  const exportFile = async () => {
    if (!exportRequestFn) {
      throw new Error("當前沒有提供exportRequestFn函數");
    }
    if (typeof exportRequestFn !== "function") {
      throw new Error("exportRequestFn必須是一個函數");
    }
    try {
      const {
        data: { link },
      } = await exportRequestFn(filterOption.value);
      window.open(link);
    } catch (error) {
      console.log("導出失敗", "error");
    }
  };
}

註意，傳入的 exportRequestFn 函數接收的參數數量和類型是否正常對應上 請根據實際情況進行調整

優化

現在，整個useList已經滿足了頁面上的需求了，擁有了獲取數據，篩選數據，導出數據，分頁功能

還有一些細節方面，在上面所有代碼中的try..catch中的catch代碼片段並沒有做任何的處理，只是簡單的console.log一下

提供鉤子

在useList新增一個 Options 對象參數，用於函數成功、失敗時執行指定鉤子函數與輸出消息內容。

定義 Options 類型

export interface MessageType {
  GET_DATA_IF_FAILED?: string;
  GET_DATA_IF_SUCCEED?: string;
  EXPORT_DATA_IF_FAILED?: string;
  EXPORT_DATA_IF_SUCCEED?: string;
}
export interface OptionsType {
  requestError?: () => void;
  requestSuccess?: () => void;
  message: MessageType;
}

export default function useList<
  ItemType extends Object,
  FilterOption extends Object
>(
  listRequestFn: Function,
  filterOption: Ref<Object>,
  exportRequestFn?: Function,
  options? :OptionsType
) {
  // ...
}

設置Options預設值

const DEFAULT_MESSAGE = {
  GET_DATA_IF_FAILED: "獲取列表數據失敗",
  EXPORT_DATA_IF_FAILED: "導出數據失敗",
};

const DEFAULT_OPTIONS: OptionsType = {
  message: DEFAULT_MESSAGE,
};

export default function useList<
  ItemType extends Object,
  FilterOption extends Object
>(
  listRequestFn: Function,
  filterOption: Ref<Object>,
  exportRequestFn?: Function,
  options = DEFAULT_OPTIONS
) {
  // ...
}

在沒有傳遞鉤子的情況霞，推薦設置預設的失敗時信息顯示

優化loadData，exportFile函數

基於 elementui 封裝 message 方法

import { ElMessage, MessageOptions } from "element-plus";

export function message(message: string, option?: MessageOptions) {
  ElMessage({ message, ...option });
}
export function warningMessage(message: string, option?: MessageOptions) {
  ElMessage({ message, ...option, type: "warning" });
}
export function errorMessage(message: string, option?: MessageOptions) {
  ElMessage({ message, ...option, type: "error" });
}
export function infoMessage(message: string, option?: MessageOptions) {
  ElMessage({ message, ...option, type: "info" });
}

loadData 函數

const loadData = async (page = curPage.value) => {
  loading.value = true;
  try {
    const {
      data,
      meta: { total: count },
    } = await listRequestFn(pageSize.value, page, filterOption.value);
    list.value = data;
    total.value = count;
    // 執行成功鉤子
    options?.message?.GET_DATA_IF_SUCCEED &&
      message(options.message.GET_DATA_IF_SUCCEED);
    options?.requestSuccess?.();
  } catch (error) {
    options?.message?.GET_DATA_IF_FAILED &&
      errorMessage(options.message.GET_DATA_IF_FAILED);
    // 執行失敗鉤子
    options?.requestError?.();
  } finally {
    loading.value = false;
  }
};

exportFile 函數

const exportFile = async () => {
  if (!exportRequestFn) {
    throw new Error("當前沒有提供exportRequestFn函數");
  }
  if (typeof exportRequestFn !== "function") {
    throw new Error("exportRequestFn必須是一個函數");
  }
  try {
    const {
      data: { link },
    } = await exportRequestFn(filterOption.value);
    window.open(link);
    // 顯示信息
    options?.message?.EXPORT_DATA_IF_SUCCEED &&
      message(options.message.EXPORT_DATA_IF_SUCCEED);
    // 執行成功鉤子
    options?.exportSuccess?.();
  } catch (error) {
    // 顯示信息
    options?.message?.EXPORT_DATA_IF_FAILED &&
      errorMessage(options.message.EXPORT_DATA_IF_FAILED);
    // 執行失敗鉤子
    options?.exportError?.();
  }
};

useList 使用方法

<template>
  <el-collapse class="mb-6">
    <el-collapse-item title="篩選條件" name="1">
      <el-form label-position="left" label-width="90px" :model="filterOption">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="用戶名">
              <el-input
                v-model="filterOption.name"
                placeholder="篩選指定簽名名稱"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="註冊時間">
              <el-date-picker
                v-model="filterOption.timeRange"
                type="daterange"
                unlink-panels
                range-separator="到"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-row class="flex mt-4">
              <el-button type="primary" @click="filter">篩選</el-button>
              <el-button type="primary" @click="reset">重置</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-collapse-item>
  </el-collapse>
  <el-table v-loading="loading" :data="list" border style="width: 100%">
    <el-table-column label="用戶名" min-width="110px">
      <template #default="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="手機號碼" min-width="130px">
      <template #default="scope">
        {{ scope.row.mobile || "未綁定手機號碼" }}
      </template>
    </el-table-column>
    <el-table-column label="郵箱地址" min-width="130px">
      <template #default="scope">
        {{ scope.row.email || "未綁定郵箱地址" }}
      </template>
    </el-table-column>
    <el-table-column prop="createAt" label="註冊時間" min-width="220px" />
    <el-table-column width="200px" fixed="right" label="操作">
      <template #default="scope">
        <el-button type="primary" link @click="detail(scope.row)"
          >詳情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div v-if="total > 0" class="flex justify-end mt-4">
    <el-pagination
      v-model:current-page="curPage"
      v-model:page-size="pageSize"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 30, 50]"
    />
  </div>
</template>
<script setup lang="ts">
import { UserInfoApi } from "@/network/api/User";
import useList from "@/lib/hooks/useList/index";
const filterOption = ref<UserInfoApi.FilterOptionType>({});
const {
  list,
  loading,
  reset,
  filter,
  curPage,
  pageSize,
  reload,
  total,
  loadData,
} = useList<UserInfoApi.UserInfo[], UserInfoApi.FilterOptionType>(
  UserInfoApi.list,
  filterOption
);
</script>

本文useList的完整代碼在 github.com/QC2168/snip…

本文轉載於:

https://juejin.cn/post/7172889961446768670

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • CentOS7部署NFS
    實現背景 最近需要把大數據測試環境的虛擬機遷移到另一臺物理機上，其中資料庫文件過大，一般的上傳文件有大小限制不能超過4GB，可以通過NFS共用目錄解決文件上傳問題。 NFS介紹 NFS介紹NFS 即網路文件系統（Network File-System），可以通過網路讓不同機器、不同系統之間可以實現文 ...
  • # Shell 是什麼？
    原文：What is a Shell? 註意：本文是對原文的一個翻譯！ Shell是一個巨集處理器，用於執行命令。巨集處理器意味著，將文本和符號展開，創建一個更大的表達式。 Unix shell 既是一個命令解釋器，也是一門編程語言。作為一個命令解釋器，它提供了豐富的GUN工具集可以與用戶進行交互。作為 ...
  • 輕鬆玩轉Makefile | 企業項目級Makefile實例
    前言 本文展示了一個比較完整的企業項目級別的Makefile文件，包括了：文件調用，源文件、頭文件、庫文件指定，軟體版本號、巨集定義，編譯時間，自動目錄等內容。 1、目錄架構 本文中所採用的目錄架構，在企業項目開發中十分常見：源文件都放在src目錄中，頭文件都放在inc目錄中，並且這兩個目錄都可以有對 ...
  • 普冉PY32系列(六) 通過I2C介面驅動PCF8574擴展的1602LCD
    1602LCD 是工業上常用的模塊, 在工廠交通運輸設備上經常能見到. 驅動晶元為 HD44780, 1602LCD 的字元顯示為兩行, 每行16個字元, 字元基於5×8的像素矩陣 ...
  • Hive中行列轉換具體實現及應用
    1、工作應用場景 統計得到每個小時的UV、PV、IP的個數，構建如下表結構： 但是表中數據的存儲格式不利於直接查詢展示，需要進行調整：（以時間分區，去重、聚合等……對結果進行行列轉換） 2、行轉列 （1）多行轉多列 case when函數 功能：用於實現對數據的判斷，根據條件，不同的情況返回不同的結 ...
  • Hive的4種排序
    1、全局排序（Order by） 功能：全局排序，只有1個reducer（用1個Reduce Task完成全局排序，與設置的Reduce Task個數無關） 參數：ASC：升序（預設） DESC：降序 使用：order by放在select語句的結尾 例如： --查詢員工信息按工資降序排列 sele ...
  • Flutter 下載篇 - 叄 | 網路庫切換實踐與思考
    前言 本文是關於使用flutter_download_manager下載功能的實踐和探索。我們將基於flutter_download_manager的功能擴展，改造成自己想要的樣子。在閱讀本文之前，建議先瞭解前兩篇文章： Flutter 下載篇 - 壹 | flutter_download_mana ...
  • Flutter 下載篇 - 貳 | 當下載器遇上切換網路庫
    需求背景 繼上篇《Flutter 下載篇 - 壹 | flutter_download_manager 源碼解析》中詳細介紹了 flutter_download_manager 用法和原理。在優缺點中提到，該庫純 Dart 實現，支持下載管理，暫停，恢復，取消和斷點續傳。其中有個缺點是網路庫與 di ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類