现在,我们的 interface.php 文件准备好了,我们在 vue-spa.php 中添加以下代码引入该文件, //接口 require_once plugin_dir_path(__FILE__) . 'interface.php'; 前端准备 我们需要用到 Vue3 和 Axios ,当然,只要能实现功能的,你喜欢的任何工具均可。 我们还需要在菜单页面中展示两个输入框和一个保存按钮 ...
const datas = Vue.reactive({ dataImage: "", }); 在获取选项数据时进行赋值,这里,我修改了原来的函数名为 ,更加简洁易懂。 //获取数据 const get_option = () => { axios .post(dataLocal.route + "pf/v1/get_option", datas, { headers: { "X-WP-Nonce"...
承接上文,我们将常用选项中的两个功能给实现了,这一节,我们将对 JS 资源进行打包,最终产物只有一个 JS 文件和一个 CSS 文件,可以极大的提升网页加载速度,减少依赖。 打包后的文件中,就包含了 vue3 和 Axios…
之前,Npcink 就已经使用 vue3 开发了一些简单的SPA单页,技术还是够用的。 效果预览 先看下最终效果 可以理解为一个简单的前后端分离的小项目,前端使用 vue3 和 Element Plus 给出,通过 Axios 与后端的 WordPress 的 REST API 进行通信,再让后端通过get_option函数拿到设置选项,进行功能设置。 技术流程 使用场景...
https://github.com/muze-page/vue-spa 流程 多对象传值 在上一节的文件中,有这样的代码 constdatas=reactive({ dataOne:"", dataTwo:"", dataName:[], dataImage:"", dataSelectedImage:"", }); 看起来没啥问题,但我现在需要开发2个 Tab 选项,每个选项中都有3个选项需要填写,类似这样 ...
WordPress 通过 REST API 和 Vue3 开发设置选项 · 7篇 承接上文,我们解决了PHP传递数据给JS的问题,现在,我们可以创建两个输入框和一个保存按钮。 输入框存储和修改选项值 保存按钮用于保存选项值 在页面加载的开始获取选项的值,将其作为输入框的默认值,修改输入框内容后点击保存按钮,将输入框的值通过 REST API...
书接上回,我们使用 Vue3 技术撰写前端,为了与后台进行交互,包括从前端加载的开始获取初始设置数据等,都需要从 PHP 中获取数据,但我们开发的项目打包后,只有 JS 文件,因此,开发的第一件事就是解决 PHP 传值…
书接上回,我们使用 Vue3 技术撰写前端,为了与后台进行交互,包括从前端加载的开始获取初始设置数据等,都需要从 PHP 中获取数据,但我们开发的项目打包后,只有 JS 文件,因此,开发的第一件事就是解决 PHP 传值给 JS 的问题。 为了方便我们的功能实现,我们开发一个简单的插件。简单介绍下软件环境,都是三平台通用的...
function vuespa_data() { $person =[ "str"=>"Hello, world! - Npcink", "num"=>25, "city"=>[1,2,3,4,5], "user"=> vuespa_get_user_meat(), ]; return $person; } 刷新菜单页面,我们就能看到如上图的效果。 JS 准备页面
之前,Npcink 就已经使用 vue3 开发了一些简单的SPA单页,技术还是够用的。 效果预览 先看下最终效果 技术流程 适合那些有一些设置,但又不多的主题或插件, - 用原生 Setting API 太麻烦, - 用设置框架又多余 当然,如果你是前端写后端的,就更适合了,甚至你可以将所有选项都通过此方法来实现,说不定还更顺手。