日韩性视频网站,亚洲免费视频网站,亚洲国产成人久久综合野外

本節中，我們實現了兩個輸入框進行獲取和修改選項，并通過保存按鈕將選項的值保存進 WordPress 中。本節代碼較多，但注釋詳細，做好準備咯

承接上文，我們解決了PHP傳遞數據給JS的問題，現在，我們可以創建兩個輸入框和一個保存按鈕。

輸入框存儲和修改選項值
保存按鈕用于保存選項值

在頁面加載的開始獲取選項的值，將其作為輸入框的默認值，修改輸入框內容后點擊保存按鈕，將輸入框的值通過 REST API 保存到 WordPress 中，并通過 get_option() 函數拿到對應的值。

流程介紹

詳細流程如下

第二節：Vue3 開發WordPress設置選項- 從輸入框開始，配置基礎設置選項

后端準備

在后端，我們要準備兩個接口，分別是

讀取選項接口，在頁面的開始獲取選項初始值
保存選項接口，點擊保存按鈕時保存選項

這兩個接口會在后續的前端開發中用到。為了方便大家理解，我們會從最簡單的函數開始，然后逐步加大難度。

我們在 vue-spa 文件夾下新建 interface.php 文件，用來放置接口相關的代碼。
填入以下代碼，創建兩個接口

//接口文件
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'); // 只有管理員才有權限修改
        },
    ));
}
add_action('rest_api_init', 'vuespa_create_api');

讀取選項接口

我們填入以下內容

//讀取Option
//僅支持一對一的數據請求
function get_option_by_RestAPI($data)
{
    //將傳遞數據轉成數組類型
    $dataArray = json_decode($data->get_body(), true);
    //新建數組
    $return = array();
    //循環獲取對應選項ID的值，并將其存儲在對應關聯數組中，若拿不到值，則為空
    foreach ($dataArray as $option_name => $value) {
        $return[$option_name] = get_option($option_name) ? get_option($option_name) : "";
    }
    return $return;
}

保存選項接口

我們填入以下內容

//保存Option
//一對一保存
function update_option_by_RestAPI($data)
{
    //判斷是否是管理員
    if (current_user_can('manage_options')) {
        //將傳遞數據轉成數組類型
        $dataArray = json_decode($data->get_body(), true);
        //循環保存選項
        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));
    }
}

引入

現在，我們的 interface.php 文件準備好了，我們在 vue-spa.php 中添加以下代碼引入該文件，

//接口
require_once plugin_dir_path(__FILE__) . 'interface.php';

前端準備

我們需要用到 Vue3 和 Axios ，當然，只要能實現功能的，你喜歡的任何工具均可。

我們還需要在菜單頁面中展示兩個輸入框和一個保存按鈕

載入資源

修改 vue-spa.php 中的 vuespa_load_vues() 函數，我們需要引入 vue3 和 Axios 資源。改為以下代碼

//載入所需 JS 和 CSS 資源 并傳遞數據
function vuespa_load_vues($hook)
{
    //判斷當前頁面是否是指定頁面，是則繼續加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '53';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    //加載到頁面底部
    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'), //驗證標記
        'data' => vuespa_data(),               //自定義數據
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

在這里，為了讓我們的 vue3 的 JS 文件能正確拿到文檔節點，我們將 JS 的加載都從 false 改為 true ,這樣，JS 就會加載到頁面底部了。

現在，我們就能在菜單頁面正常使用 vue3 的功能了。

準備輸入框和按鈕

我們修改 index.js 文件為以下代碼

//vite/dist/index.js
const App = {
  setup() {
    //初始值
    const datas = Vue.reactive({
      dataOne: "",
      dataTwo: "",
    });

    //獲取數據
    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("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
          console.log(error);
        });
    };

    //保存數據
    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);
        });
    };

    //頁面初始加載
    Vue.onMounted(() => {
      console.log("簡簡單單");
      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");

作用如下：

創建了一個響應式變量datas
創建了獲取數據函數vuespa_get_option()通過上一節傳來的網址進行拼接后發出post請求，并在標頭中傳入驗證信息。
創建了保存數據函數vuespa_update_option(),與上述函數作用類似
我們在頁面的開始，就加載vuespa_get_option()函數，將拿到的值作為輸入框的默認值
我們通過 vue3 的模版，提供了兩個 input輸入框和一個按鈕，
input 的值與 datas 的變量進行雙向綁定，按鈕的點擊事件綁定vuespa_get_option()函數進行數據保存

現在，刷新頁面，就能看到我們創建的輸入框，進行簡單的修改，點擊保存按鈕，就能將數據保存到 WordPress 了。

wordpress 會緩存部分 JS 文件，建議您每次修改 JS 文件后，都修改函數 vuespa_load_vues() 中的版本號信息

原理淺析

當我們進入菜單頁 VusSpa 時，觀察控制臺，會有一個get_option的請求，內容如下

發出了請求，拿到了選項值，并將其作為默認值。

現在，我們修改輸入框中的值，點擊保存按鈕，會觸發update_option,內容如下：

已將我修改的值傳出了，并返回保存成功的信息。

調用

get_option() | Function | WordPress Developer Resources

跟傳統方法一樣，我們使用get_option來調用對應的選項值。

選項已準備好，我們開始調用，為了方便展示調用的數據，我們將選項值在菜單頁中展示，
我們修改回調函數vuespa_menu_page_display(),添加以下內容

    echo "<h3>調用選項值</h3>";
    echo get_option('dataOne');
    echo "<br/>";
    echo get_option('dataTwo');

可看到以下效果

完整代碼

vue-spa.php

<?php
/*
Plugin Name: Vue - SPA 
Plugin URI: http://www.kartiktrivedi.com
Description: 將vue構建的頁面嵌入WordPress 中并產生交互
Author: Muze
Author URI: http://www.kartiktrivedi.com
Version: 1.0.0
*/


//接口
require_once plugin_dir_path(__FILE__) . 'interface.php';
//創建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項',                   // 此菜單對應頁面上顯示的標題
        'VueSpa',                      // 要為此實際菜單項顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現此頁面的菜單時要調用的函數的名稱
        'dashicons-admin-customizer',  //圖標 - 默認圖標
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

//菜單回調 - 展示的內容
function vuespa_menu_page_display()
{
?>

    <!--在默認WordPress“包裝”容器中創建標題-->
    <div class="wrap">
        <!--標題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點-->
        <div id="vuespa">此內容將在掛載Vue后被替換{{data}}</div>
    </div>



<?php

    //展示準備的數據
    echo "<pre>";
    print_r(vuespa_data());
    echo "</pre>";

    echo "<h3>調用選項值</h3>";
    echo get_option('dataOne');
    echo "<br/>";
    echo get_option('dataTwo');
} // vuespa_menu_page_display



//載入所需 JS 和 CSS 資源 并傳遞數據
function vuespa_load_vues($hook)
{
    //判斷當前頁面是否是指定頁面，是則繼續加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '53';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    //加載到頁面底部
    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'), //驗證標記
        'data' => vuespa_data(),               //自定義數據
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');


//準備待傳輸的數據
function vuespa_data()
{
    $person = [
        "str" => "Hello, world! - Npcink",
        "num" => 25,
        "city" => [1, 2, 3, 4, 5],
    ];
    return $person;
}

interface.php

<?php
//interface.php
//接口文件
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'); // 只有管理員才有權限修改
        },
    ));
}
add_action('rest_api_init', 'vuespa_create_api');


//讀取Option
//僅支持一對一的數據請求
function get_option_by_RestAPI($data)
{
    //將傳遞數據轉成數組類型
    $dataArray = json_decode($data->get_body(), true);
    //新建數組
    $return = array();
    //循環獲取對應選項ID的值，并將其存儲在對應關聯數組中，若拿不到值，則為空
    foreach ($dataArray as $option_name => $value) {
        $return[$option_name] = get_option($option_name) ? get_option($option_name) : "";
    }
    return $return;
}


//保存Option
//一對一保存
function update_option_by_RestAPI($data)
{
    //判斷是否是管理員
    if (current_user_can('manage_options')) {
        //將傳遞數據轉成數組類型
        $dataArray = json_decode($data->get_body(), true);
        //循環保存選項
        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));
    }
}

index.js

//vite/dist/index.js

const App = {
  setup() {
    //初始值
    const datas = Vue.reactive({
      dataOne: "",
      dataTwo: "",
    });

    //獲取數據
    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("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
          console.log(error);
        });
    };

    //保存數據
    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);
        });
    };

    //頁面初始加載
    Vue.onMounted(() => {
      console.log("簡簡單單");
      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");

問題

目前的功能是可以用了，但還有些問題

只能一對一的獲取數據，在一些復雜場景中，這種數據結構很不友好
目前是手動載入 Vue3 和 Axios文件，加載緩慢，導致頁面都加載好了，選項內容有些許延遲，有閃動感，體驗不好
為了簡單的功能，載入了 vue3 這個龐然大物，而且vue3的很多功能都沒用上。
沒有人員篩選、文章篩選和分類篩選之類的，與 WordPress 產生交互的功能，

針對以上問題，我們將在下一節中繼續進行優化改進。

{{userData.name}}已認證

第二節：Vue3 開發WordPress設置選項- 從輸入框開始，配置基礎設置選項