第二節(jié)：WordPress 通過(guò) REST API 和 Vue3 開(kāi)發(fā)設(shè)置選項(xiàng) - 從輸入框開(kāi)始配置基礎(chǔ)選項(xiàng)
承接上文，我們解決了PHP傳遞數(shù)據(jù)給JS的問(wèn)題，現(xiàn)在，我們可以創(chuàng)建兩個(gè)輸入框和一個(gè)保存按鈕。
輸入框存儲(chǔ)和修改選項(xiàng)值
保存按鈕用于保存選項(xiàng)值
在頁(yè)面加載的開(kāi)始獲取選項(xiàng)的值，將其作為輸入框的默認(rèn)值，修改輸入框內(nèi)容后點(diǎn)擊保存按鈕，將輸入框的值通過(guò) REST API 保存到 WordPress 中，并通過(guò) get_option() 函數(shù)拿到對(duì)應(yīng)的值。
流程介紹
詳細(xì)流程如下
后端準(zhǔn)備
在后端，我們要準(zhǔn)備兩個(gè)接口，分別是
讀取選項(xiàng)接口，在頁(yè)面的開(kāi)始獲取選項(xiàng)初始值
保存選項(xiàng)接口，點(diǎn)擊保存按鈕時(shí)保存選項(xiàng)
這兩個(gè)接口會(huì)在后續(xù)的前端開(kāi)發(fā)中用到。為了方便大家理解， 我們會(huì)從最簡(jiǎn)單的函數(shù)開(kāi)始，然后逐步加大難度。
我們?cè)?vue-spa 文件夾下新建 interface.php 文件，用來(lái)放置接口相關(guān)的代碼。 填入以下代碼，創(chuàng)建兩個(gè)接口
php
復(fù)制代碼
//接口文件function vuespa_create_api(){ ? ?register_rest_route('pf/v1', '/get_option/', array( // 完整命名空間為：/wp-json/pf/v1/ ? ? ? ?'methods' => 'POST', ? ? ? ?'callback' => 'get_option_by_RestAPI', ? ?)); ? ?register_rest_route('pf/v1', '/update_option/', array( // 完整命名空間為：/wp-json/pf/v1/ ? ? ? ?'methods' => 'POST', ? ? ? ?'callback' => 'update_option_by_RestAPI', ? ? ? ?'permission_callback' => function () { ? ? ? ? ? ?return current_user_can('manage_options'); // 只有管理員才有權(quán)限修改 ? ? ? ?}, ? ?));}add_action('rest_api_init', 'vuespa_create_api');
讀取選項(xiàng)接口
我們填入以下內(nèi)容
php
復(fù)制代碼
//讀取Option//僅支持一對(duì)一的數(shù)據(jù)請(qǐng)求function get_option_by_RestAPI($data){ ? ?//將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型 ? ?$dataArray = json_decode($data->get_body(), true); ? ?//新建數(shù)組 ? ?$return = array(); ? ?//循環(huán)獲取對(duì)應(yīng)選項(xiàng)ID的值，并將其存儲(chǔ)在對(duì)應(yīng)關(guān)聯(lián)數(shù)組中，若拿不到值，則為空 ? ?foreach ($dataArray as $option_name => $value) { ? ? ? ?$return[$option_name] = get_option($option_name) ? get_option($option_name) : ""; ? ?} ? ?return $return;}
保存選項(xiàng)接口
我們填入以下內(nèi)容
php
復(fù)制代碼
//保存Option//一對(duì)一保存function update_option_by_RestAPI($data){ ? ?//判斷是否是管理員 ? ?if (current_user_can('manage_options')) { ? ? ? ?//將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型 ? ? ? ?$dataArray = json_decode($data->get_body(), true); ? ? ? ?//循環(huán)保存選項(xiàng) ? ? ? ?foreach ($dataArray as $option_name => $value) { ? ? ? ? ? ?update_option($option_name, $value); ? ? ? ?} ? ? ? ?//返回成功信息 ? ? ? ?return new WP_REST_Response(array( ? ? ? ? ? ?'success' => true, ? ? ? ? ? ?'message' => "已保存！" ? ? ? ?), 200); ? ?} else { ? ? ? ?//返回失敗信息 ? ? ? ?return new WP_Error('save_error', '保存失??！', array('status' => 500)); ? ?}}
引入
現(xiàn)在，我們的 interface.php 文件準(zhǔn)備好了，我們?cè)?vue-spa.php 中添加以下代碼引入該文件，
php
復(fù)制代碼
//接口require_once plugin_dir_path(__FILE__) . 'interface.php';
前端準(zhǔn)備
我們需要用到 Vue3 和 Axios ，當(dāng)然，只要能實(shí)現(xiàn)功能的，你喜歡的任何工具均可。
我們還需要在菜單頁(yè)面中展示兩個(gè)輸入框和一個(gè)保存按鈕
載入資源
修改 vue-spa.php 中的 vuespa_load_vues() 函數(shù)，我們需要引入 vue3 和 Axios 資源。改為以下代碼
php
復(fù)制代碼
//載入所需 JS 和 CSS 資源 并傳遞數(shù)據(jù)function vuespa_load_vues($hook){ ? ?//判斷當(dāng)前頁(yè)面是否是指定頁(yè)面，是則繼續(xù)加載 ? ?if ('toplevel_page_vuespa_id' != $hook) { ? ? ? ?return; ? ?} ? ?//版本號(hào) ? ?$ver = '53'; ? ?//加載到頁(yè)面頂部 ? ?wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false); ? ?//加載到頁(yè)面底部 ? ?wp_enqueue_script('vue', 'https://unpkg.com/vue@3/dist/vue.global.js', array(), $ver, true); ? ?wp_enqueue_script('axios', 'https://unpkg.com/axios/dist/axios.min.js', array(), $ver, true); ? ?wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, true); ? ?$pf_api_translation_array = array( ? ? ? ?'route' => esc_url_raw(rest_url()), ? ? //路由 ? ? ? ?'nonce' => wp_create_nonce('wp_rest'), //驗(yàn)證標(biāo)記 ? ? ? ?'data' => vuespa_data(), ? ? ? ? ? ? ? //自定義數(shù)據(jù) ? ?); ? ?wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項(xiàng)目}//樣式加載到后臺(tái)add_action('admin_enqueue_scripts', 'vuespa_load_vues');
在這里，為了讓我們的 vue3 的 JS 文件能正確拿到文檔節(jié)點(diǎn)，我們將 JS 的加載都從 false 改為 true ,這樣，JS 就會(huì)加載到頁(yè)面底部了。
現(xiàn)在，我們就能在菜單頁(yè)面正常使用 vue3 的功能了。
準(zhǔn)備輸入框和按鈕
我們修改 index.js 文件為以下代碼
js
復(fù)制代碼
//vite/dist/index.jsconst App = { ?setup() { ? ?//初始值 ? ?const datas = Vue.reactive({ ? ? ?dataOne: "", ? ? ?dataTwo: "", ? ?}); ? ?//獲取數(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; ? ? ? ?}) ? ? ? ?.catch((error) => { ? ? ? ? ?window.alert("連接服務(wù)器失敗或后臺(tái)讀取出錯(cuò)！數(shù)據(jù)讀取失敗"); ? ? ? ? ?console.log(error); ? ? ? ?}); ? ?}; ? ?//保存數(shù)據(jù) ? ?const vuespa_update_option = () => { ? ? ?axios ? ? ? ?.post(dataLocal.route + "pf/v1/update_option", datas, { ? ? ? ? ?headers: { ? ? ? ? ? ?"X-WP-Nonce": dataLocal.nonce, ? ? ? ? ?}, ? ? ? ?}) ? ? ? ?.then((response) => { ? ? ? ? ?alert("保存成功"); ? ? ? ?}) ? ? ? ?.catch((error) => { ? ? ? ? ?alert("保存失敗"); ? ? ? ? ?console.log(error); ? ? ? ?}); ? ?}; ? ?//頁(yè)面初始加載 ? ?Vue.onMounted(() => { ? ? ?console.log("簡(jiǎn)簡(jiǎn)單單"); ? ? ?vuespa_get_option(); ? ?}); ? ?return { datas, vuespa_update_option }; ?}, ?template: ? ?'文本框1：<input type="text" v-model="datas.dataOne"><br/>文本框2：<input type="text" v-model="datas.dataTwo"><hr/><button class="button button-primary" @click="vuespa_update_option">保存</button>',};Vue.createApp(App).mount("#vuespa");
作用如下：
創(chuàng)建了一個(gè)響應(yīng)式變量datas
創(chuàng)建了獲取數(shù)據(jù)函數(shù)
vuespa_get_option()通過(guò)上一節(jié)傳來(lái)的網(wǎng)址進(jìn)行拼接后發(fā)出post請(qǐng)求，并在標(biāo)頭中傳入驗(yàn)證信息。創(chuàng)建了保存數(shù)據(jù)函數(shù)
vuespa_update_option(),與上述函數(shù)作用類似我們?cè)陧?yè)面的開(kāi)始，就加載
vuespa_get_option()函數(shù)，將拿到的值作為輸入框的默認(rèn)值我們通過(guò) vue3 的模版，提供了兩個(gè) input輸入框和一個(gè)按鈕，
input 的值與 datas 的變量進(jìn)行雙向綁定，按鈕的點(diǎn)擊事件綁定
vuespa_get_option()函數(shù)進(jìn)行數(shù)據(jù)保存
現(xiàn)在，刷新頁(yè)面，就能看到我們創(chuàng)建的輸入框，進(jìn)行簡(jiǎn)單的修改，點(diǎn)擊保存按鈕，就能將數(shù)據(jù)保存到 WordPress 了。
wordpress 會(huì)緩存部分 JS 文件，建議您每次修改 JS 文件后，都修改函數(shù)
vuespa_load_vues()中的版本號(hào)信息
原理淺析
當(dāng)我們進(jìn)入菜單頁(yè) VusSpa 時(shí)，觀察控制臺(tái)，會(huì)有一個(gè)get_option的請(qǐng)求，內(nèi)容如下
發(fā)出了請(qǐng)求，拿到了選項(xiàng)值，并將其作為默認(rèn)值。
現(xiàn)在，我們修改輸入框中的值，點(diǎn)擊保存按鈕，會(huì)觸發(fā)update_option,內(nèi)容如下：
已將我修改的值傳出了，并返回保存成功的信息。
調(diào)用
get_option() | Function | WordPress Developer Resources
跟傳統(tǒng)方法一樣，我們使用get_option來(lái)調(diào)用對(duì)應(yīng)的選項(xiàng)值。
選項(xiàng)已準(zhǔn)備好，我們開(kāi)始調(diào)用，為了方便展示調(diào)用的數(shù)據(jù)，我們將選項(xiàng)值在菜單頁(yè)中展示，
我們修改回調(diào)函數(shù)vuespa_menu_page_display(),添加以下內(nèi)容
php
復(fù)制代碼
? echo "<h3>調(diào)用選項(xiàng)值</h3>"; ? ?echo get_option('dataOne'); ? ?echo "<br/>"; ? ?echo get_option('dataTwo');
可看到以下效果
問(wèn)題
目前的功能是可以用了，但還有些問(wèn)題
只能一對(duì)一的獲取數(shù)據(jù)，在一些復(fù)雜場(chǎng)景中，這種數(shù)據(jù)結(jié)構(gòu)很不友好
目前是手動(dòng)載入 Vue3 和 Axios文件，加載緩慢，導(dǎo)致頁(yè)面都加載好了，選項(xiàng)內(nèi)容有些許延遲，有閃動(dòng)感，體驗(yàn)不好
為了簡(jiǎn)單的功能，載入了 vue3 這個(gè)龐然大物，而且vue3的很多功能都沒(méi)用上。
沒(méi)有人員篩選、文章篩選和分類篩選之類的，與 WordPress 產(chǎn)生交互的功能，
針對(duì)以上問(wèn)題，我們將在下一節(jié)中繼續(xù)進(jìn)行優(yōu)化改進(jìn)。
最新文章
后續(xù)文章持續(xù)撰寫中，點(diǎn)個(gè)關(guān)注，獲取平臺(tái)最新文章推送。
技術(shù)有限，還望諸位協(xié)助勘誤，于評(píng)論區(qū)指出，
常一文多發(fā)，最新勘定和增補(bǔ)文章于下方鏈接給出
www.npc.ink/277264.html
