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

本节解决了数据量过大时的结构化传值问题,以及给出了简单的数据校验例子,通过本系列教程,相信您已经可以开发自己的设置选项了。

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

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

流程

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

多对象传值

在上一节的 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; // 返回所有选项的键值对
}

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

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

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

数据校验

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

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

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

准备数据

我们修改 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 />

这样,当拿到的值符合正则需求时,计算函数输出 true ,然后 if 反向判断为 false ,不显示警告内容。

效果

执行打包命令后,刷新 VueSpa 菜单可查看效果

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

提示信息的外观,我加了点小小的样式。

还有以下几点需要改进

  • 点击保存按钮进行数据校验
  • 校验通过才能正常报存
  • 将校验数据模块化,可复用

当然,基于 Node 生态,您还可以通过诸多现成的校验框架更方便的实现同样的功能。

总结

现在,前后端进行了分离,后端只需负责存储数据,前端负责准备和展示数据即可。大大提升了代码的可维护性和健壮性,降低了浏览器的性能开销。

当然,在前端工程化的路上,你还有无限多的可能,待您探索。

本系列章节核心内容到此为止,后续有更棒的想法,会持续分享给大家的。

教程

00:讲透WordPress 菜单开发 - 添加菜单和子菜单

2023-6-28 22:20:00

教程

第五节: Vue3 开发WordPress设置选项 - 使用Vite打包JS资源

2023-6-29 22:25:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索