第三节：Vue3 开发WordPress设置选项 - 从筛选功能研究前后台数据交互

Npcink

已于 2023-07-01 20:10:35 修改

阅读量374

点赞数

于 2023-06-29 09:33:45 首次发布

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

版权

WordPress REST API 与Vue3开发设置选项专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了如何在WordPress中增强设置选项功能，添加用户筛选下拉框，通过Vue.js实现多选并保存用户ID到后台。通过排除订阅者角色减少数据传输，整理用户数据结构，并调整PHP与JS交互，确保数组值能正确保存和读取。

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

承接上文，我们制作了一个简单的，带有两个输入框和一个保存按钮的设置选项，现在，他已经能实现了最基础的填写信息并保存到 WordPress 后台，供PHP调用选项值的功能。

现在，我们更进一步，为其添加人员筛选功能，我们制作一个下列框，从中通过用户名进行选择，并将选择好的用户 ID 通过数组提供给后端使用。大概流程如下

最终效果如下

准备用户数据

一般的网站用户量较大，大部分都是“订阅者”，为了减少传输数据压力，我们在获取用户数据时将其排除掉
为了将拿到数据方便给 JS 使用，降低 JS 使用数据难度，我们将其整理成如下结构

在 vue-spa.php 文件底部添加以下代码

//整理并提供用户信息
function vuespa_get_user_meat()
{
    //获取所有角色
    $editable_roles = wp_roles()->roles;
    $roles = array_keys($editable_roles);
    //获取除了'subscriber'(订阅者)角色之外的所有角色的用户数据
    $subscriber_key = array_search('subscriber', $roles, true);
    if (false !== $subscriber_key) {
        $roles = array_slice($roles, 0, $subscriber_key);
    }

    $users = get_users(array('role__in' => $roles));

    //转为关联数组
    $user_data = array_map(function ($user) {
        return [
            'id'   => $user->ID,
            'name' => $user->display_name,
        ];
    }, $users);

    return $user_data;
}

您可以参考此方法，做出分类筛选、文章筛选、标签筛选等筛选功能，只需按结构提供数据即可。

传递用户数据

我们通过 PHP 将数据传给 JS ，以供使用，我们修改 vue-spa.php 文件中的 vuespa_data() 函数，改为以下内容

function vuespa_data()
{
    $person = [
        "str" => "Hello, world! - Npcink",
        "num" => 25,
        "city" => [1, 2, 3, 4, 5],
        "user" => vuespa_get_user_meat(),
    ];
    return $person;
}

刷新菜单页面，我们就能看到如上图的效果。

JS 准备页面

JS 中拿到传来的数据，需要将其渲染至页面上，修改index.js为以下内容

//vite/dist/index.js
console.log(dataLocal.data.user);
const App = {
  setup() {
    

    //存储传来的值
    const siteData = dataLocal.data;

    //存储选项值
    const datas = Vue.reactive({
      dataOne: "",
      dataTwo: "",
      dataName: [],
    });

//获取数据
    const vuespa_get_option = () => {
      axios
        .post(dataLocal.route + "pf/v1/get_option", datas, {
          headers: {
            "X-WP-Nonce": dataLocal.nonce,
            "Content-Type": "application/json",
          },
        })
        .then((response) => {
          const data = response.data;
          datas.dataOne = data.dataOne;
          datas.dataTwo = data.dataTwo;
          datas.dataName = data.dataName;
        })
        .catch((error) => {
          window.alert("连接服务器失败或后台读取出错！数据读取失败");
          console.log(error);
        });
    };
    //省略部分代码

   

    return { datas, siteData, vuespa_update_option };
  },
  template: `
  文本框1：<input type="text" v-model="datas.dataOne"><br/>
  文本框2：<input type="text" v-model="datas.dataTwo"><hr/>
  
  用户选择：<select v-model="datas.dataName" multiple>
  <option v-for="option in siteData.user" :key="option.id" :value="option.id">
      {{ option.name }}
  </option>
</select>
<p>你选择了：{{ datas.dataName }}</p><br/>
按住command(control)按键即可进行多选<hr/>
    <button class="button button-primary" @click="vuespa_update_option">保存</button>`,
};

Vue.createApp(App).mount("#vuespa");

为了方便大家看出不同，我省略了部分未修改的代码，其详细内容，可见上一节。
主要内容如下

新建变量 siteData 存储传来的数据
新建数组变量 dataName 存储选中数组
在获取数据中，通过 datas.dataName = data.dataName;拿到默认值

修改保存接口

原有的保存接口无法识别数组，若您此时修改选中的值并点击保存按钮，刷新页面后会丢失选中的值。

修改 interface.php 文章的保存选项功能函数 update_option_by_RestAPI() 为以下内容

//保存Option
function update_option_by_RestAPI($data)
{
    //判断是否是管理员
    if (current_user_can('manage_options')) {
        //转为JSON对象 - 重点，这里没有true，是转为对象
        $dataArray = json_decode($data->get_body());
        //存储结果
        $result = new stdClass();

        //循环保存选项
        foreach ($dataArray as $option_name => $value) {

            //判断，是否为对象
            if (is_object($value)) {
                //是非空数组，循环保存值
                foreach ($value as $arr => $data) {
                    //更新值    
                    update_option($arr, $data);
                }
            } else {
                //不是对象，则表示只有一个选项需要保存。
                update_option($option_name, $value);
            }
            $result->$option_name = $value;
        }

        //返回成功信息
        return new WP_REST_Response(array(
            'success' => true,
            'message' => "已保存！"
        ), 200);
    } else {
        //返回失败信息
        return new WP_Error('save_error', '保存失败！', array('status' => 500));
    }
}