第三節(jié)：WordPress 通過(guò) REST API 和 Vue3 開發(fā)設(shè)置選項(xiàng) - 從篩選功能研究前后臺(tái)數(shù)據(jù)
承接上文，我們制作了一個(gè)簡(jiǎn)單的，帶有兩個(gè)輸入框和一個(gè)保存按鈕的設(shè)置選項(xiàng)，現(xiàn)在，他已經(jīng)能實(shí)現(xiàn)了最基礎(chǔ)的填寫信息并保存到 WordPress 后臺(tái)，供PHP調(diào)用選項(xiàng)值的功能。
現(xiàn)在，我們更進(jìn)一步，為其添加人員篩選功能，我們制作一個(gè)下列框，從中通過(guò)用戶名進(jìn)行選擇，并將選擇好的用戶 ID 通過(guò)數(shù)組提供給后端使用。大概流程如下
最終效果如下
準(zhǔn)備用戶數(shù)據(jù)
一般的網(wǎng)站用戶量較大，大部分都是“訂閱者”，為了減少傳輸數(shù)據(jù)壓力，我們?cè)讷@取用戶數(shù)據(jù)時(shí)將其排除掉
為了將拿到數(shù)據(jù)方便給 JS 使用，降低 JS 使用數(shù)據(jù)難度，我們將其整理成如下結(jié)構(gòu)
在?vue-spa.php?文件底部添加以下代碼
//整理并提供用戶信息function vuespa_get_user_meat(){? ?//獲取所有角色? ?$editable_roles = wp_roles()->roles;? ?$roles = array_keys($editable_roles);? ?//獲取除了'subscriber'(訂閱者)角色之外的所有角色的用戶數(shù)據(jù)? ?$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));? ?//轉(zhuǎn)為關(guān)聯(lián)數(shù)組? ?$user_data = array_map(function ($user) {? ? ? ?return [? ? ? ? ? ?'id' ? => $user->ID,? ? ? ? ? ?'name' => $user->display_name,? ? ? ?];? ?}, $users);? ?return $user_data;}
您可以參考此方法，做出分類篩選、文章篩選、標(biāo)簽篩選等篩選功能，只需按結(jié)構(gòu)提供數(shù)據(jù)即可。
傳遞用戶數(shù)據(jù)
我們通過(guò) PHP 將數(shù)據(jù)傳給 JS ，以供使用，我們修改?vue-spa.php?文件中的?vuespa_data()?函數(shù)，改為以下內(nèi)容
function vuespa_data(){? ?$person = [? ? ? ?"str" => "Hello, world! - Npcink",? ? ? ?"num" => 25,? ? ? ?"city" => [1, 2, 3, 4, 5],? ? ? ?"user" => vuespa_get_user_meat(),? ?];? ?return $person;}
刷新菜單頁(yè)面，我們就能看到如上圖的效果。
JS 準(zhǔn)備頁(yè)面
JS 中拿到傳來(lái)的數(shù)據(jù)，需要將其渲染至頁(yè)面上，修改index.js為以下內(nèi)容
//vite/dist/index.jsconsole.log(dataLocal.data.user);const App = {?setup() {? ?//存儲(chǔ)傳來(lái)的值? ?const siteData = dataLocal.data;? ?//存儲(chǔ)選項(xiàng)值? ?const datas = Vue.reactive({? ? ?dataOne: "",? ? ?dataTwo: "",? ? ?dataName: [],? ?});//獲取數(shù)據(jù)? ?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("連接服務(wù)器失敗或后臺(tái)讀取出錯(cuò)！數(shù)據(jù)讀取失敗");? ? ? ? ?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)按鍵即可進(jìn)行多選<hr/>? ?<button class="button button-primary" @click="vuespa_update_option">保存</button>`,};Vue.createApp(App).mount("#vuespa");
為了方便大家看出不同，我省略了部分未修改的代碼，其詳細(xì)內(nèi)容，可見(jiàn)上一節(jié)。
主要內(nèi)容如下
新建變量?
siteData?存儲(chǔ)傳來(lái)的數(shù)據(jù)新建數(shù)組變量?
dataName?存儲(chǔ)選中數(shù)組在獲取數(shù)據(jù)中，通過(guò)?
datas.dataName = data.dataName;拿到默認(rèn)值
修改保存接口
原有的保存接口無(wú)法識(shí)別數(shù)組，若您此時(shí)修改選中的值并點(diǎn)擊保存按鈕，刷新頁(yè)面后會(huì)丟失選中的值。
修改?interface.php?文章的保存選項(xiàng)功能函數(shù)?update_option_by_RestAPI()?為以下內(nèi)容
//保存Optionfunction update_option_by_RestAPI($data){? ?//判斷是否是管理員? ?if (current_user_can('manage_options')) {? ? ? ?//轉(zhuǎn)為JSON對(duì)象 - 重點(diǎn)，這里沒(méi)有true，是轉(zhuǎn)為對(duì)象? ? ? ?$dataArray = json_decode($data->get_body());? ? ? ?//存儲(chǔ)結(jié)果? ? ? ?$result = new stdClass();? ? ? ?//循環(huán)保存選項(xiàng)? ? ? ?foreach ($dataArray as $option_name => $value) {? ? ? ? ? ?//判斷，是否為對(duì)象? ? ? ? ? ?if (is_object($value)) {? ? ? ? ? ? ? ?//是非空數(shù)組，循環(huán)保存值? ? ? ? ? ? ? ?foreach ($value as $arr => $data) {? ? ? ? ? ? ? ? ? ?//更新值 ? ?? ? ? ? ? ? ? ? ? ?update_option($arr, $data);? ? ? ? ? ? ? ?}? ? ? ? ? ?} else {? ? ? ? ? ? ? ?//不是對(duì)象，則表示只有一個(gè)選項(xiàng)需要保存。? ? ? ? ? ? ? ?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));? ?}}
此函數(shù)的功能可見(jiàn)注釋，現(xiàn)在，刷新頁(yè)面，在下列列表中進(jìn)行篩選，然后點(diǎn)擊保存按鈕，刷新頁(yè)面，可看到值是正常保存的，
使用
此時(shí)，您可以使用?get_option?在PHP中拿到選項(xiàng)中的值，正如上一節(jié)中提到的。
echo get_option('dataName');
注意，這會(huì)展示數(shù)組ID
總結(jié)
這一節(jié)我們添加了下拉列表多選功能，并沒(méi)有解決上一節(jié)提到的問(wèn)題，不要急，我發(fā)現(xiàn)目前展示功能類型很方便，我準(zhǔn)備在展示完所有常見(jiàn)功能類型后，再去解決上一節(jié)提到的問(wèn)題。
最新文章
后續(xù)文章持續(xù)撰寫中，點(diǎn)個(gè)關(guān)注，獲取平臺(tái)最新文章推送。
技術(shù)有限，還望諸位協(xié)助勘誤，于評(píng)論區(qū)指出，
常一文多發(fā)，最新勘定和增補(bǔ)文章于下方鏈接給出
https://www.npc.ink/277274.html
