wordpress插件使用vue+webpack開發後臺界面以及使用node-wpapi和wpdb訪問數據庫

原文鏈接：https://dsx2016.com/?p=1066

公衆號：dsx2016

一.`vue`開發插件後臺界面

wordpress本身自帶jquery環境，php也可以寫html代碼，從而展示前端頁面。

但是jquery有一些過時了，不太適合現在數據驅動開發，使用vue可以更快更好的迭代。

如上圖所示，vue-cli開發的界面可以應用在插件界面中。

二.設置管理菜單

在插件的index.php中（入口文件）

// 後臺菜單初始化時創建自定義菜單
add_action('admin_menu', 'add_diy_menu');
// 設置主菜單和子菜單的函數
function add_diy_menu() {
    // 頂級菜單標題
    add_menu_page(__('頂級菜單'),__('簡碼菜單'),8,__FILE__,'my_function_menu');
    // 子菜單標題
    add_submenu_page(__FILE__,'子菜單1','vue管理界面',8,'your-admin-sub-menu1','my_function_submenu1');
    // 子菜單標題
    add_submenu_page(__FILE__,'子菜單2','其他測試界面',8,'your-admin-sub-menu2','my_function_submenu2');
}
// 主菜單界面
function my_function_menu() {
    // 輸出div
    echo "<div style='width:100%;height:1000px;background-color:#eee'>測試菜單</div>";
}
// 子菜單界面-演示爲vue項目
function my_function_submenu1() {
    // 引入插件dist目錄下的html
    require_once("dist/index.html");
}
// 子菜單界面
function my_function_submenu2() {  
  // 獲取url方式的html
  $html = str_get_html('https://dsx2016.com');
  echo $html; 
    
  // 也可以引入php（裏面有html的內容）
  // include_once 'test.php';
}

三.放入`vue html`資源

通過require_once("dist/index.html")之後，點擊菜單就能加載html。

但是會報其他css和js等資源引用錯誤，原因是路徑找不到。

webpack打包後的文件在dist，你也可以放在插件目錄下別的文件夾

需要手動修改資源引用

根據你自己的wordpress站點目錄和插件目錄來修改對應的路徑

查看正常訪問下的目錄結構

四.使用`node-wpapi`訪問數據庫

有沒有什麼辦法，可以在獨立於wordpress之外的網頁訪問其數據庫。

wordpress提供了REST API，顧名思義，我們可以單獨開發接口和界面，來查看和設置wordpress內容。

REST API 參考地址：https://developer.wordpress.org/rest-api/using-the-rest-api/client-libraries/

NODE-WPAPI 參考地址：http://wp-api.org/node-wpapi/

使用方式

首先wordpress安裝插件（通過上傳或者插件市場等方式），這一步很重要，解鎖rest api

插件地址：https://github.com/WP-API/Basic-Auth

其次在插件的入口文件，如index.php中添加跨域設置，這一步很重要，不然無法訪問數據

add_action( 'send_headers', function() {
    if ( ! did_action('rest_api_init') && $_SERVER['REQUEST_METHOD'] == 'HEAD' ) {
        header( 'Access-Control-Allow-Origin: *' );
        header( 'Access-Control-Expose-Headers: Link' );
        header( 'Access-Control-Allow-Methods: HEAD' );
    }
} );

然後引入庫的資源文件，在vue的index.html中引入node-wpapi的js文件

注意前端網頁使用引入UMD套件即可，使用npm安裝也行。

文檔地址：http://wp-api.org/node-wpapi/installation/#download-the-umd-bundle

<script src="./static/js/wpapi.min.js"></script>

在app.vue或者其他需要使用的界面文件中，添加代碼

詳情內容參考文檔和代碼註釋

文檔地址：http://wp-api.org/node-wpapi/using-the-client/

// 建議等頁面加載完畢後再獲取window下的WPAPI
mounted(){
    // 引入全局api
    Vue.prototype.$WPAPI=window.WPAPI
    // 註冊wordpress（對應站點名： http://localhost/wordpress）（這裏獲取到的wp就是可以操作數據的變量）
    var wp = new WPAPI({ endpoint: 'http://localhost/wordpress/wp-json' });
    
    // 獲取頁面項的集合-這個操作不需要認證登錄
    let pagesData=wp.pages()
    
    // 使用登錄（同樣註冊站點名）
    var apiPromise = WPAPI.discover( 'http://localhost/wordpress/' ).then(function( site ) {
        // 使用wordpress的賬戶登錄
        return site.auth({
            username: 'short_code',
            password: '*********'
        });
    });
    // 需要權限的放在下面函數裏（site等同於上面的wp）
    apiPromise.then(function( site ) {
        // 這裏面的操作是認證才能進行的操作（獲取網站設置，更新編輯文章等都需要認證登錄）
        site.settings().then((res)=>{
            console.log(`獲取所有設置`,res)
        })
    })
  }

更多操作參考官方文檔API

五.php使用wpdb操作自定義數據庫

使用上述node-wpapi優點是，所有的方法都按規範寫好了，拿來即用。

但是對於數據庫操作，沒辦法自定義表和插入自定義字段和數據。

所以如果想把插件，如字體base64數據存入到單獨的mysql表中，就需要wordpress提供的wpdb

官方文檔：https://codex.wordpress.org/Class_Reference/wpdb

代碼如下，test.php

<?php
// 允許跨域
header('Access-Control-Allow-Origin:*'); // *代表允許任何網址請求
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允許請求的類型
header('Access-Control-Allow-Credentials: true'); // 設置是否允許發送 cookies
header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin'); // 設置允許自定義請求頭的字段
// 獲取根目錄路徑-很重要-根據自己的插件和php文件路徑來寫
define('PATH', dirname(dirname(dirname(dirname(dirname(dirname(__FILE__)))))).'/');  
// 引入配置文件才能使用wpdb-必須
require_once(PATH . 'wp-config.php');
// 獲取全局wpdb-必須
global $wpdb;
// 使用wpdb操作數據庫（當前爲獲取用戶數）
$user_count = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->users" );
// 要返回的json數據
$ret = array(
  'data' => '456',
  'user_count' => $user_count, // 獲取到的wordpress用戶數
  'permalink'=> $permalink,
  'code' => 0,
  'msg' => 'fail',
);
// 設置返回的數據格式爲json
header('content-type:application/json;charset=utf8');
// 返回解碼後的數據
echo json_encode($ret);
?>

寫好的php放在插件目錄下，即可。

值得注意的是，因爲php在插件目錄中，也就是在wordpress環境中。

無論是php寫前端界面，還是使用wpdb操作數據庫，都不需要驗證登錄，因爲本身就處於當前賬戶狀態，共享cookie。

六.在`vue`中訪問插件中的`php api`

可以看到訪問的api地址爲 http://localhost/wordpress/wp-content/plugins/short_code/api/test/index2.php

基本等同於網站的目錄結構和文件路徑

在vue中訪問該php文件即可

api文件

// 通用url前綴
const BASE_URL = `/wordpress/wp-content/plugins/short_code/api/test`;
// testPhp
export let testPhp = `${BASE_URL}/index2.php`;

使用axios封裝的$http訪問接口

this.$http({
    method: `get`,
    url: API.testPhp,
    params: {}
}).then(res => {
    console.log(`獲取php api的json數據`, res);
},(err)=>{
    console.log(`獲取php數據錯誤`,err)
});

注意vue-cli的訪問一定要設置跨域處理，在config的index.js文件中設置

關於proxyTable搜索網絡文檔即可

proxyTable: {
    '/api': {
        // 本地環境
        // target: 'http://127.0.0.1:8089',
        // 測試環境
        target: 'http://localhost/wordpress/wp-content/api/test',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
           '^/api': '',
        }
     }
},

如果沒有使用過vue或者react，那麼使用jquery也能很快開發插件界面和交互

Tips

本片文章是《wordpress插件嵌入webFont自定義字體》的下篇，主要講字體插件的界面編寫和數據庫設置方式

要把python的字體轉化精簡接口寫出來又是另外不止一篇文章了，涉及到flask框架，api設計，服務器部署和token驗證等

哪怕是一個小小的wordpress字體插件，也涉及到以下知識體系：

Html、Css、Js三件套等
Webpack+Vue+Element等
Php、Pyhon、Node、Mysql、Nginx、Apache等
產品和Ui設計，最小MVP，任務分解等

多學，多做，多思考，多整理，多沉澱，打造和維護一個屬於自己的感興趣有價值的產品。

wordpress插件使用vue+webpack開發後臺界面以及使用node-wpapi和wpdb訪問數據庫

一.`vue`開發插件後臺界面

二.設置管理菜單

三.放入`vue html`資源

四.使用`node-wpapi`訪問數據庫

五.php使用wpdb操作自定義數據庫

六.在`vue`中訪問插件中的`php api`

Tips

微信小程序python flask發送訂閱消息(服務端使用urllib發起post請求)

vue控制檯報錯Cannot read property ‘_withTask’ of undefined問題

微信內測邀請:公衆號個人認證的過程和注意事項

微信公衆號第三方登錄window.open打開新窗口和url攜帶http網址參數base64轉碼傳參

一鍵替換wordpress圖牀域名

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

wordpress插件使用vue+webpack開發後臺界面以及使用node-wpapi和wpdb訪問數據庫

一.vue開發插件後臺界面

二.設置管理菜單

三.放入vue html資源

四.使用node-wpapi訪問數據庫

五.php使用wpdb操作自定義數據庫

六.在vue中訪問插件中的php api

Tips

一.`vue`開發插件後臺界面

三.放入`vue html`資源

四.使用`node-wpapi`訪問數據庫

六.在`vue`中訪問插件中的`php api`