承接上一節(jié)，我們使用 Vite 對(duì)JS資源進(jìn)行打包后，優(yōu)化了不少性能，但也有不少麻煩還沒(méi)有解決，這次來(lái)做個(gè)收尾。

• 本系列代碼分享在 GitHub 中，希望能幫助大家理解
• https://github.com/muze-page/vue-spa

流程

多對(duì)象傳值

在上一節(jié)的 Option.vue 文件中，有這樣的代碼

const datas = reactive({
  dataOne: "",
  dataTwo: "",
  dataName: [],
  dataImage: "",
  dataSelectedImage: "",
});

看起來(lái)沒(méi)啥問(wèn)題，但我現(xiàn)在需要開(kāi)發(fā)2個(gè) Tab 選項(xiàng)，每個(gè)選項(xiàng)中都有3個(gè)選項(xiàng)需要填寫，類似這樣

  let datas = reactive({

      npc_zfb_appid: "",
      npc_zfb_private_key: "",
      npc_zfb_public_key: "",

      npc_wx_mch_id: "",
      npc_wx_cert_api: "",
      npc_wx_cert_key: "",

  });

嗯，還是沒(méi)啥問(wèn)題，但是，我要是有10個(gè) Tab 選項(xiàng)呢？

如果你只是低頭跑，你總會(huì)撞上山的

聰明的你想到了，可以這樣啊

  let datas = reactive({

    zfb: {
      npc_zfb_appid: "",
      npc_zfb_private_key: "",
      npc_zfb_public_key: "",
    },
    wx: {
      npc_wx_mch_id: "",
      npc_wx_cert_api: "",
      npc_wx_cert_key: "",
    },
    npc_refund_user: [],
  });

有其他需求再接著分,或者分了再分。

這當(dāng)然沒(méi)問(wèn)題，但我們的獲取選項(xiàng)的接口就不夠用了，
需要修改 interface.php 文件中的函數(shù) get_option_by_RestAPI() 為以下內(nèi)容

//讀取Option
//支持?jǐn)?shù)組類數(shù)據(jù)請(qǐng)求
function get_option_by_RestAPI($data)
{
    // 將輸入數(shù)據(jù)轉(zhuǎn)換成數(shù)組類型 
    $dataArray = json_decode($data->get_body(), true);
    $return = array();
    // 遍歷數(shù)組，檢查每個(gè)元素是否為對(duì)象
    foreach ($dataArray as $option_name => $value) {
        // 初始化當(dāng)前選項(xiàng)的值數(shù)組
        $option_value = array();
        // 如果當(dāng)前元素是一個(gè)非空數(shù)組，則遍歷其中的每個(gè)字段
        if (is_array($value) && !empty($value)) {
            foreach ($value as $field_name => $field_value) {
                // 獲取指定選項(xiàng)的值，如果不存在，則使用空字符串代替
                $option_value[$field_name] = get_option($field_name, '');
            }
            // 將當(dāng)前選項(xiàng)及其值添加到返回?cái)?shù)組中
            $return[$option_name] = $option_value;
        } else {
            // 如果當(dāng)前元素非數(shù)組或數(shù)組為空，獲取指定選項(xiàng)的值
            $return[$option_name] = get_option($option_name, '');
        }
    }
    return $return; // 返回所有選項(xiàng)的鍵值對(duì)
}

這里面進(jìn)行了若干次判斷，并進(jìn)行對(duì)應(yīng)的處理，以保證我們可以正常是使用上面提到的數(shù)據(jù)結(jié)構(gòu)。

瀏覽器的響應(yīng)結(jié)構(gòu)就是這樣的

數(shù)據(jù)校驗(yàn)

如果我們需要的是用戶名，但使用者卻填寫了手機(jī)號(hào)，這時(shí)，會(huì)導(dǎo)致拿不到需要的數(shù)據(jù)，就需要在數(shù)據(jù)提交前進(jìn)行數(shù)據(jù)校驗(yàn)，來(lái)保證數(shù)據(jù)的正確性。

代碼的使用者是一匹野馬，你不能指望他按照你的想法去跨紅色的欄

為了便于演示，我們使用方便的正則來(lái)進(jìn)行數(shù)據(jù)校驗(yàn)。分別是姓名和手機(jī)號(hào)

準(zhǔn)備數(shù)據(jù)

我們修改 Option.vue 文件，準(zhǔn)備兩個(gè)變量用來(lái)存儲(chǔ)我們的選項(xiàng)值

//存儲(chǔ)選項(xiàng)值
const datas = reactive({
//省略
  check: {
    name: "",
    phone: "",
  },
});

這里，我使用了結(jié)構(gòu)化的數(shù)據(jù)，便于數(shù)據(jù)管理。

數(shù)據(jù)獲取里也得加上

//獲取數(shù)據(jù)
const get_option = () => {
  axios
    .post(dataLocal.route + "pf/v1/get_option", datas, {
      headers: {
        "X-WP-Nonce": dataLocal.nonce,
        "Content-Type": "application/json",
      },
    })
    .then((response) => {
      //省略
      datas.check.name = data.check.name;
      datas.check.phone = data.check.phone;
    })
    .catch((error) => {
      window.alert("連接服務(wù)器失敗或后臺(tái)讀取出錯(cuò)！數(shù)據(jù)讀取失敗");
      console.log(error);
    });
};

這樣，就能在頁(yè)面初始加載時(shí)，拿到選項(xiàng)的默認(rèn)值了

準(zhǔn)備正則

我們準(zhǔn)備兩個(gè)計(jì)算屬性，通過(guò)正則來(lái)判斷，并輸出對(duì)應(yīng)的布爾值

//驗(yàn)證名稱
const isName = computed(() => {
  // 正則表達(dá)式驗(yàn)證名字，2到6個(gè)中文字符
  const reg = /^[u4e00-u9fa5]{2,6}$/;
  return reg.test(datas.check.name);
});
//驗(yàn)證電話號(hào)碼
const isPhone = computed(() => {
  // 正則表達(dá)式驗(yàn)證電話號(hào)碼
  const reg = /^1[3456789]d{9}$/;
  return reg.test(datas.check.phone);
});

他會(huì)持續(xù)的拿到輸入的值，并進(jìn)行判斷輸出的。

準(zhǔn)備模版

我們?cè)谀０嫖募校瑢?duì)應(yīng)的值用上

  <h3>數(shù)據(jù)校驗(yàn)</h3>
  姓名：<input type="text" v-model="datas.check.name" />
  <p v-if="!isName" class="check">格式錯(cuò)誤 - 必須為兩字到六字中文</p>
  <br />
  手機(jī)號(hào)：<input type="text" v-model="datas.check.phone" />
  <p v-if="!isPhone" class="check">格式錯(cuò)誤 - 必須是1開(kāi)頭的11位手機(jī)號(hào)</p>
  <hr />

這樣，當(dāng)拿到的值符合正則需求時(shí)，計(jì)算函數(shù)輸出 true ，然后 if 反向判斷為 false ，不顯示警告內(nèi)容。

效果

執(zhí)行打包命令后，刷新 VueSpa 菜單可查看效果

提示信息的外觀，我加了點(diǎn)小小的樣式。

還有以下幾點(diǎn)需要改進(jìn)

• 點(diǎn)擊保存按鈕進(jìn)行數(shù)據(jù)校驗(yàn)
• 校驗(yàn)通過(guò)才能正常報(bào)存
• 將校驗(yàn)數(shù)據(jù)模塊化，可復(fù)用

當(dāng)然，基于 Node 生態(tài)，您還可以通過(guò)諸多現(xiàn)成的校驗(yàn)框架更方便的實(shí)現(xiàn)同樣的功能。

總結(jié)

現(xiàn)在，前后端進(jìn)行了分離，后端只需負(fù)責(zé)存儲(chǔ)數(shù)據(jù)，前端負(fù)責(zé)準(zhǔn)備和展示數(shù)據(jù)即可。大大提升了代碼的可維護(hù)性和健壯性，降低了瀏覽器的性能開(kāi)銷。

當(dāng)然，在前端工程化的路上，你還有無(wú)限多的可能，待您探索。

本系列章節(jié)核心內(nèi)容到此為止，后續(xù)有更棒的想法，會(huì)持續(xù)分享給大家的。