Vue 3 後端錯誤消息處理範例

来源:https://www.cnblogs.com/techhub/p/18301010/vue-error-handle
-Advertisement-
Play Games

什麼是深拷貝與淺拷貝？深拷貝與淺拷貝是js中處理對象或數據複製操作的兩種方式。‌在聊深淺拷貝之前咱得瞭解一下js中的兩種數據類型： ...


1. 錯誤消息格式

前後端消息傳遞時，我們可以通過 json 的 errors 欄位傳遞錯誤信息，一個比較好的格式範例為：

{
  errors: {
    global: ["網路錯誤"],
    password: ["至少需要一個大寫字母", "至少需要八位字元"]
  }
}

errors 中，欄位名代表出錯位置（如果是輸入框的話，對應錯誤要顯示在框下麵），內容為一個數組，每個字元串代表一個錯誤。

2. 處理函數

可以新建一個 composables 文件夾，以存儲各個 components 中共用的邏輯，例如錯誤消息處理。這裡在 composables 文件夾中新建一個 error.ts：

import { ref, type Ref } from 'vue';

export interface ErrorFields {
  global: string[];
  [key: string]: string[];
}

export function useErrorFields(fields: string[]) {
  const errors: Ref<ErrorFields> = ref({ global: [], ...fields.reduce((acc, field) => ({ ...acc, [field]: [] }), {}) });
  const clearErrors = () => {
    for (const field in errors.value) {
      errors.value[field] = [];
    }
  };
  const hasErrors = (field?: string) => {
    if (field) {
      return errors.value[field].length > 0;
    }
    return Object.values(errors.value).some((field) => field.length > 0);
  };
  const addError = (field: string, message: string) => {
    if (field === '') {
      field = 'global';
    }
    const array = errors.value[field];
    if (!array.includes(message)) {
      array.push(message);
    }
    return array;
  };
  const removeError = (field: string, message?: string) => {
    if (field === '') {
      field = 'global';
    }
    if (message) {
      errors.value[field] = errors.value[field].filter((m) => m !== message);
    } else {
      errors.value[field] = [];
    }
  };
  return { errors, clearErrors, hasErrors, addError, removeError };
}

這裡我們就定義了錯誤類及其處理函數。

3. 組件中的使用

定義的 useErrorFields 工具可以在 component 中這樣使用：

<script setup lang="ts">
import axios from 'axios';
import { computed, onMounted, ref, type Ref } from 'vue';
import { useErrorFields } from '@/composables/error';

const { errors, clearErrors, addError, hasErrors } = useErrorFields(['username', 'password']);

const username = ref('');

function onSubmit() {
  const api = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
  });
  api.get("/user/register")
  .catch((error) => {
    if (error.response && error.response.data && error.response.data.errors) {
      errors.value = { ...errors.value, ...error.response.data.errors };
    } else if (error.response) {
      addError('', '未知錯誤');
    } else {
      addError('', '網路錯誤');
    }
  })
}
</script>

<template>
  <div
    v-if="hasErrors('global')"
    class="mb-5 rounded-md border-0 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 px-4 py-2"
  >
    <div class="flex text-red-700 dark:text-rose-400 space-x-2 mb-2">
      <p class="text-lg font-semibold">錯誤</p>
    </div>
    <ul class="flex flex-col font-medium tracking-wide text-sm list-disc pl-6">
      <li v-for="e in errors.global" v-html="e" />
    </ul>
  </div>
  <form>
    <div>
      <label for="username" class="block text-sm font-medium leading-6">
        用戶名
        <span class="text-red-700">*</span>
      </label>
      <div class="mt-2">
        <input
          v-model="username"
          @focus="clearErrors"
          id="username"
          name="username"
          type="text"
          autocomplete="username"
          required
          class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none sm:text-sm sm:leading-6 dark:bg-white/10 dark:ring-white/20"
          :class="{ 'ring-red-500': hasErrors('username'), 'ring-gray-300': !hasErrors('username') }"
        />
      </div>
      <ul class="flex flex-col font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
        <li v-for="e in errors.username" v-html="e" />
      </ul>
    </div>
    <div>
      <button
        type="submit"
        class="flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 text-white shadow-sm hover:bg-indigo-500"
        :class="{
          'cursor-default pointer-events-none': hasErrors() || processing,
          'bg-gray-400': hasErrors(),
          'bg-indigo-600': !hasErrors(),
        }"
      >
        註冊
      </button>
    </div>
  </form>
</template>

接下來，我們一步步解析以上代碼。

3.1 根據後端響應更新錯誤狀態

我們首先使用 useErrorFields 定義了一個錯誤狀態類：

const { errors, clearErrors, addError, hasErrors } = useErrorFields(['username', 'password']);

這時候，錯誤狀態 errors 中可訪問三個欄位，並將綁定到頁面的不同位置：

global: 全局錯誤 / 無具體位置的錯誤 => 顯示在表格頂端的單獨框中

username: 用戶名上的錯誤 => 顯示在 username 輸入框下方
password: 密碼上的錯誤 => 顯示在 password 輸入框下方

接下來，我們需要定義提交函數，例如這裡使用 axios 進行後端訪問，後端地址用環境變數提供：

function onSubmit() {
  const api = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
  });
  api.get("/user/register")
  .catch((error) => {
    if (error.response && error.response.data && error.response.data.errors) {
      errors.value = { ...errors.value, ...error.response.data.errors };
    } else if (error.response) {
      addError('', '未知錯誤');
    } else {
      addError('', '網路錯誤');
    }
  })
}

這樣，後端返回錯誤信息時，錯誤狀態會被自動更新。如果出現了網路錯誤或其他錯誤，addError類會在 global 欄位上增加錯誤 (使用空字元串為第一個參數，預設添加到 global 欄位)。

接下來，將錯誤狀態綁定到頁面。

3.2 綁定到輸入框

<input
  v-model="username"
  @focus="clearErrors"
  id="username"
  name="username"
  type="text"
  autocomplete="username"
  required
  class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none sm:text-sm sm:leading-6 dark:bg-white/10 dark:ring-white/20"
  :class="{ 'ring-red-500': hasErrors('username'), 'ring-gray-300': !hasErrors('username') }"
/>

這裡主要使用了兩個個函數：

clearErrors: 當重新開始進行輸入時，清除錯誤狀態中的全部錯誤。

hasErrors: 當對應位置出現錯誤時，將輸入框邊框顏色變為紅色。

將錯誤狀態顯示在輸入框下：

<div>
  <label for="username" class="block text-sm font-medium leading-6">
    用戶名
    <span class="text-red-700">*</span>
  </label>
  <div class="mt-2">
    <input
      ...
    />
  </div>
  <ul class="flex flex-col font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
    <li v-for="e in errors.username" v-html="e" />
  </ul>
</div>

這裡我們使用 <li> 標簽，使用 errors.username 將對應位置的錯誤消息依次顯示在輸入框下。

3.4 全局消息顯示在表格頂端

<div
  v-if="hasErrors('global')"
  class="mb-5 rounded-md border-0 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 px-4 py-2"
>
  <div class="flex text-red-700 dark:text-rose-400 space-x-2 mb-2">
    <p class="text-lg font-semibold">錯誤</p>
  </div>
  <ul class="flex flex-col font-medium tracking-wide text-sm list-disc pl-6">
    <li v-for="e in errors.global" v-html="e" />
  </ul>
</div>
<form>
  ...
</form>

這裡使用 hasErrors('global') 來檢測是否有全局錯誤，併在輸入表頂端顯示。

3.5 提交按鈕在有錯誤時不允許點擊

<button
  type="submit"
  class="flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 text-white shadow-sm hover:bg-indigo-500"
  :class="{
    'cursor-default pointer-events-none': hasErrors(),
    'bg-gray-400': hasErrors(),
    'bg-indigo-600': !hasErrors(),
  }"
>
  註冊
</button>

這裡使用 hasErrors() 來檢測錯誤狀態類中是否有任何錯誤，並據此啟用或禁用按鈕。

4. 完整案例

如果你需要一個完整案例，這裡有：錯誤狀態處理在用戶註冊場景的案例，前端開源，詳見：Github，你也可以訪問 Githubstar.pro 來查看網頁的效果（一個 Github 互贊平臺，前端按本文方式進行錯誤處理）。

感謝閱讀，如果本文對你有幫助，可以訂閱我的博客，我將繼續分享前後端全棧開發的相關實用經驗。祝你開發愉快。


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

-Advertisement-
Play Games
更多相關文章
  • 從0到1打造一個 WebRTC 應用
    ‍ 寫在開頭 點贊 + 收藏 學會 前言 2020 年初突如其來的新冠肺炎疫情讓線下就醫渠道幾乎被切斷，在此背景下，微醫作為數字健康行業的領軍者通過線上問診等形式快速解決了大量急需就醫人們的燃眉之急。而作為微醫 Web 端線上問診中重要的一環-醫患之間的視頻問診正是應用了接下來講 ...
  • Vue 中ref()與 reactive() 的區別
    在 Vue 3 中，組合式 API（Composition API）引入了新的響應式系統，使得狀態管理和邏輯復用變得更加靈活和強大。ref() 和 reactive() 是組合式 API 中兩個重要的響應式工具，它們各自有不同的使用場景和特性。在這篇博客中，我們將深入探討 ref() 和 react ...
  • 【vue深入學習第2章】Vue.js 中的 Ajax 處理：vue-resource 庫的深度解析
    Vue.js 中的 Ajax 處理：vue-resource 庫的深度解析 在現代前端開發中，Ajax 請求是與後端進行數據交互的關鍵技術。Vue.js 作為一個漸進式 JavaScript 框架，提供了多種方式來處理 Ajax 請求，其中 vue-resource 是一個較為常用的庫。儘管 vue ...
  • 【vue深入學習第1章】探索 Vue 2 的生命周期：從創建到銷毀
    Vue.js 是一個漸進式的 JavaScript 框架，用於構建用戶界面。理解 Vue 的生命周期是掌握這個框架的關鍵之一。在這篇博客中，我們將深入探討 Vue 2 的生命周期，並通過代碼示例來展示每個生命周期鉤子的作用。 Vue 實例的生命周期 Vue 實例的生命周期可以分為四個主要階段： 創建 ...
  • 探索Nuxt.js的useFetch：高效數據獲取與處理指南
    摘要：“探索Nuxt.js的useFetch：高效數據獲取與處理指南”詳述了Nuxt.js中useFetch函數的使用，包括基本用法、動態參數獲取、攔截器使用，及參數詳解。文章通過示例展示瞭如何從API獲取數據，處理動態參數，自定義請求和響應，以及useFetch和useAsyncData的參數選項... ...
  • 如何實現元素的曝光監測
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 一些名詞解釋 曝光 頁面上某一個元素、組件或模塊被用戶瀏覽了，則稱這個元素、組件或模塊被曝光了。 視圖元素 將頁面上展示的元素、組件或模塊統稱為視圖元素 ...
  • 想看源碼但是無從下口怎麼辦？
    相信不少同學都有歐陽這種情況，年初的時候給自己制定了一份關於學習英語和源碼的詳細年度計劃。但是到了實際執行的時候因為各種情況制定的計劃基本都沒有完成，年底回顧時發現年初制定的計劃基本都沒完成。痛定思痛，第二年年初決定再次制定一份學習英語和源碼的詳細年度計劃，毫無疑問又失敗了。 ...
  • Nuxt.js 錯誤偵探：useError 組合函數
    title: Nuxt.js 錯誤偵探：useError 組合函數 date: 2024/7/14 updated: 2024/7/14 author: cmdragon excerpt: 摘要：文章介紹Nuxt.js中的useError組合函數，用於統一處理客戶端和伺服器端的錯誤，提供status ...
一周排行
    -Advertisement-
    Play Games
  • 實用接地氣的 .NET 微服務框架
    前言 微服務架構已經成為搭建高效、可擴展系統的關鍵技術之一，然而，現有許多微服務框架往往過於複雜，使得我們普通開發者難以快速上手並體驗到微服務帶了的便利。為瞭解決這一問題，於是作者精心打造了一款最接地氣的 .NET 微服務框架，幫助我們輕鬆構建和管理微服務應用。 本框架不僅支持 Consul 服務註 ...
  • 基於surging的木舟IOT平臺如何添加網路組件
    先看一下效果吧: 如果不會寫動畫或者懶得寫動畫，就直接交給Blend來做吧; 其實Blend操作起來很簡單，有點類似於在操作PS，我們只需要設置關鍵幀，滑鼠點來點去就可以了，Blend會自動幫我們生成我們想要的動畫效果. 第一步：要創建一個空的WPF項目 第二步：右鍵我們的項目，在最下方有一個，在B ...
  • Prism:框架介紹與安裝
    Prism:框架介紹與安裝 什麼是Prism? Prism是一個用於在 WPF、Xamarin Form、Uno 平臺和 WinUI 中構建鬆散耦合、可維護和可測試的 XAML 應用程式框架 Github https://github.com/PrismLibrary/Prism NuGet htt ...
  • 不可不知的WPF畫筆（Brush）
    在WPF中，屏幕上的所有內容，都是通過畫筆（Brush）畫上去的。如按鈕的背景色，邊框，文本框的前景和形狀填充。藉助畫筆，可以繪製頁面上的所有UI對象。不同畫筆具有不同類型的輸出（ 如：某些畫筆使用純色繪製區域，其他畫筆使用漸變、圖案、圖像或繪圖）。 ...
  • .NET 8 高併發微服務電商系統實戰
    前言 嗨，大家好！推薦一個基於 .NET 8 的高併發微服務電商系統，涵蓋了商品、訂單、會員、服務、財務等50多種實用功能。 項目不僅使用了 .NET 8 的最新特性，還集成了AutoFac、DotLiquid、HangFire、Nlog、Jwt、LayUIAdmin、SqlSugar、MySQL、 ...
  • 基於surging 如何利用peerjs進行語音視頻通話
    本文主要介紹攝像頭（相機）如何採集數據，用於類似攝像頭本地顯示軟體，以及流媒體數據傳輸場景如傳屏、視訊會議等。 攝像頭採集有多種方案，如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre（UWP），網上一些文章以及 ...
  • [WPF]數據綁定時為何會出現StringFormat失效
    前言 Seal-Report 是一款.NET 開源報表工具，擁有 1.4K Star。它提供了一個完整的框架，使用 C# 編寫，最新的版本採用的是 .NET 8.0 。 它能夠高效地從各種資料庫或 NoSQL 數據源生成日常報表，並支持執行複雜的報表任務。 其簡單易用的安裝過程和直觀的設計界面，我們 ...
  • NET Core 多身份校驗與策略模式
    背景需求： 系統需要對接到XXX官方的API，但因此官方對接以及管理都十分嚴格。而本人部門的系統中包含諸多子系統，系統間為了穩定，程式間多數固定Token+特殊驗證進行調用，且後期還要提供給其他兄弟部門系統共同調用。 原則上：每套系統都必須單獨接入到官方，但官方的接入複雜，還要官方指定機構認證的證書 ...
  • C#自定義控制項—轉換開關
    本文介紹下電腦設備關機的情況下如何通過網路喚醒設備，之前電源S狀態 電腦Power電源狀態- 唐宋元明清2188 - 博客園 (cnblogs.com) 有介紹過遠程喚醒設備，後面這倆天瞭解多了點所以單獨加個隨筆 設備關機的情況下，使用網路喚醒的前提條件： 1. 被喚醒設備需要支持這WakeOnL ...
  • .NET 8.0 前後分離快速開發框架
    前言 大家好，推薦一個.NET 8.0 為核心，結合前端 Vue 框架，實現了前後端完全分離的設計理念。它不僅提供了強大的基礎功能支持，如許可權管理、代碼生成器等，還通過採用主流技術和最佳實踐，顯著降低了開發難度，加快了項目交付速度。 如果你需要一個高效的開發解決方案，本框架能幫助大家輕鬆應對挑戰，實 ...
所有分類