第六节：Vue3 开发WordPress设置选项 - 添加对象传值和数据校验

本文链接：https://blog.csdn.net/qq_59516928/article/details/131480974

文章讲述了在使用Vite优化JS资源打包后，如何处理多对象传值的问题，以及通过数据校验确保数据正确性。作者提供了代码示例，展示了如何重构数据结构以适应多个选项，并修改后端接口以支持新的数据格式。此外，还介绍了如何使用正则表达式进行前端数据校验，确保用户输入符合要求，最后讨论了前端工程化的更多可能性。

摘要由CSDN通过智能技术生成

承接上一节，我们使用 Vite 对JS资源进行打包后，优化了不少性能，但也有不少麻烦还没有解决，这次来做个收尾。

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

流程

多对象传值

在上一节的 Option.vue 文件中，有这样的代码

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

看起来没啥问题，但我现在需要开发2个 Tab 选项，每个选项中都有3个选项需要填写，类似这样

  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: "",
   
  });

嗯，还是没啥问题，但是，我要是有10个 Tab 选项呢？

如果你只是低头跑，你总会撞上山的

聪明的你想到了，可以这样啊

  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: [],
  });

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

这当然没问题，但我们的获取选项的接口就不够用了，
需要修改 interface.php 文件中的函数 get_option_by_RestAPI() 为以下内容

//读取Option
//支持数组类数据请求
function get_option_by_RestAPI($data)
{
    // 将输入数据转换成数组类型 
    $dataArray = json_decode($data->get_body(), true);
    $return = array();
    // 遍历数组，检查每个元素是否为对象
    foreach ($dataArray as $option_name => $value) {
        // 初始化当前选项的值数组
        $option_value = array();
        // 如果当前元素是一个非空数组，则遍历其中的每个字段
        if (is_array($value) && !empty($value)) {
            foreach ($value as $field_name => $field_value) {
                // 获取指定选项的值，如果不存在，则使用空字符串代替
                $option_value[$field_name] = get_option($field_name, '');
            }
            // 将当前选项及其值添加到返回数组中
            $return[$option_name] = $option_value;
        } else {
            // 如果当前元素非数组或数组为空，获取指定选项的值
            $return[$option_name] = get_option($option_name, '');
        }
    }
    return $return; // 返回所有选项的键值对
}

这里面进行了若干次判断，并进行对应的处理，以保证我们可以正常是使用上面提到的数据结构。

浏览器的响应结构就是这样的

数据校验

如果我们需要的是用户名，但使用者却填写了手机号，这时，会导致拿不到需要的数据，就需要在数据提交前进行数据校验，来保证数据的正确性。

代码的使用者是一匹野马，你不能指望他按照你的想法去跨红色的栏

为了便于演示，我们使用方便的正则来进行数据校验。分别是姓名和手机号

准备数据

我们修改 Option.vue 文件，准备两个变量用来存储我们的选项值

//存储选项值
const datas = reactive({
//省略
  check: {
    name: "",
    phone: "",
  },
});

这里，我使用了结构化的数据，便于数据管理。

数据获取里也得加上

//获取数据
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("连接服务器失败或后台读取出错！数据读取失败");
      console.log(error);
    });
};

这样，就能在页面初始加载时，拿到选项的默认值了

准备正则

我们准备两个计算属性，通过正则来判断，并输出对应的布尔值

//验证名称
const isName = computed(() => {
  // 正则表达式验证名字，2到6个中文字符
  const reg = /^[\u4e00-\u9fa5]{2,6}$/;
  return reg.test(datas.check.name);
});
//验证电话号码
const isPhone = computed(() => {
  // 正则表达式验证电话号码
  const reg = /^1[3456789]\d{9}$/;
  return reg.test(datas.check.phone);
});

他会持续的拿到输入的值，并进行判断输出的。

准备模版

我们在模版文件中，将对应的值用上

  <h3>数据校验</h3>
  姓名：<input type="text" v-model="datas.check.name" />
  <p v-if="!isName" class="check">格式错误 - 必须为两字到六字中文</p>
  <br />
  手机号：<input type="text" v-model="datas.check.phone" />
  <p v-if="!isPhone" class="check">格式错误 - 必须是1开头的11位手机号</p>
  <hr />