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

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

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

最终效果如下

准备用户数据

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

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

1. //整理并提供用户信息
2. function vuespa_get_user_meat()
3. {
4. //获取所有角色
5. $editable_roles = wp_roles()->roles;
6. $roles = array_keys($editable_roles);
7. //获取除了'subscriber'(订阅者)角色之外的所有角色的用户数据
8. $subscriber_key = array_search('subscriber', $roles,true);
9. if(false!== $subscriber_key){
10. $roles = array_slice($roles,0, $subscriber_key);
11. }
12. $users = get_users(array('role__in'=> $roles));
13. //转为关联数组
14. $user_data = array_map(function($user){
15. return[
16. 'id'=> $user->ID,
17. 'name'=> $user->display_name,
18. ];
19. }, $users);
20. return $user_data;
21. }

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

传递用户数据

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

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

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

JS 准备页面

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

1. //vite/dist/index.js
2. console.log(dataLocal.data.user);
3. constApp={
4. setup(){
5. //存储传来的值
6. const siteData = dataLocal.data;
7. //存储选项值
8. const datas =Vue.reactive({
9. dataOne:"",
10. dataTwo:"",
11. dataName:[],
12. });
13. //获取数据
14. const vuespa_get_option =()=>{
15. axios
16. .post(dataLocal.route +"pf/v1/get_option", datas,{
17. headers:{
18. "X-WP-Nonce": dataLocal.nonce,
19. "Content-Type":"application/json",
20. },
21. })
22. .then((response)=>{
23. const data = response.data;
24. datas.dataOne = data.dataOne;
25. datas.dataTwo = data.dataTwo;
26. datas.dataName = data.dataName;
27. })
28. .catch((error)=>{
29. window.alert("连接服务器失败或后台读取出错！数据读取失败");
30. console.log(error);
31. });
32. };
33. //省略部分代码
34. return{ datas, siteData, vuespa_update_option };
35. },
36. template:`
37. 文本框1：<input type="text" v-model="datas.dataOne"><br/>
38. 文本框2：<input type="text" v-model="datas.dataTwo"><hr/>
39. 用户选择：<select v-model="datas.dataName" multiple>
40. <option v-for="option in siteData.user" :key="option.id" :value="option.id">
41. {{ option.name }}
42. </option>
43. </select>
44. <p>你选择了：{{ datas.dataName }}</p><br/>
45. 按住command(control)按键即可进行多选<hr/>
46. <button class="button button-primary" @click="vuespa_update_option">保存</button>`,
47. };
48. Vue.createApp(App).mount("#vuespa");

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

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

修改保存接口

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

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

1. //保存Option
2. function update_option_by_RestAPI($data)
3. {
4. //判断是否是管理员
5. if(current_user_can('manage_options')){
6. //转为JSON对象 - 重点，这里没有true，是转为对象
7. $dataArray = json_decode($data->get_body());
8. //存储结果
9. $result =new stdClass();
10. //循环保存选项
11. foreach($dataArray as $option_name => $value){
12. //判断，是否为对象
13. if(is_object($value)){
14. //是非空数组，循环保存值
15. foreach($value as $arr => $data){
16. //更新值
17. update_option($arr, $data);
18. }
19. }else{
20. //不是对象，则表示只有一个选项需要保存。
21. update_option($option_name, $value);
22. }
23. $result->$option_name = $value;
24. }
25. //返回成功信息
26. returnnew WP_REST_Response(array(
27. 'success'=>true,
28. 'message'=>"已保存！"
29. ),200);
30. }else{
31. //返回失败信息
32. returnnew WP_Error('save_error','保存失败！', array('status'=>500));
33. }
34. }

此函数的功能可见注释，现在，刷新页面，在下列列表中进行筛选，然后点击保存按钮，刷新页面，可看到值是正常保存的，

使用

此时，您可以使用 get_option 在PHP中拿到选项中的值，正如上一节中提到的。

1. echo get_option('dataName');

注意，这会展示数组ID

总结

这一节我们添加了下拉列表多选功能，并没有解决上一节提到的问题，不要急，我发现目前展示功能类型很方便，我准备在展示完所有常见功能类型后，再去解决上一节提到的问题。