WooCommerce使用REST API获取数据的方法

WooCommerce使用REST API获取数据的方法

WooCommerce REST API可用来构建headless woocommerce，WordPress变成数据管理者，并通过REST API将数据共享给第三方程序，使得WooCommerce有了更灵活化的应用场景。本文介绍一个用JavaScript的方法调用WC REST API的例子，要用到Nodejs、esbuild等工具。

配置REST API

根据官方文档到后台的WooCommerce->Settings->Advanced->REST API下创建一个专用的用户名和密码（Consumer Key和Consumer Secret），权限设置为可读可写，之后要用这个信息来获取访问权限。

在本地配置build环境

本文的测试环境是Windows 10和Node 19.8.1，已通过NVM安装了Nodejs，NVM是Node Version Manager，不但能随意切换Node版本，还能避免在Windows上出现文件夹权限错误，推荐使用这种方式配置Nodejs。

创建步骤和所需要的命令：

在一个文件夹下创建两个目录——src和build，src用来存放源文件，build存放编译好的文件，在src目录下创建index.html和index.js两个文件。
打开命令行，运行npm init -y创建一个package.json文件。
安装核心库，运行命令npm i @woocommerce/woocommerce-rest-api安装woocommerce rest api的package。
配置开发工具，运行命令npm i -D esbuild buffer events stream，只有esbuild是我们要用到的编译工具，类似webpack，安装buffer、events和stream是因为nodejs某个版本后这三个工具就没有了，如果不装编译时会报错。
配置package.json的scripts，要将src/index.html拷贝到build目录下，然后编译index.js并将最终文件保存到build目录下，具体怎么写看下文。
全部配置好以后，运行npm run build就会在build目录下生成index.html和index.js，然后在build目录下启动一个web server就能运行文件了，我用的python，在build目录下运行py -m http.server，就能在http://localhost:8000这个地址访问build目录下的文件。

具体文件内容：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";

const api = new WooCommerceRestApi({
    url: "https://testwc.local",
    consumerKey: "ck_8df9067595bb0e5cd6d12aeb844f99b5ff3c8d7e",
    consumerSecret: "cs_a46bf0f4571c6683f956af96348a8eff17175b86",
    version: "wc/v3",
  });

api.get("orders", {
    per_page: 20,
  })
  .then((response) => {
    if (response.status === 200) {
        console.log(response.data);
    }
  })
  .catch((error) => {
    console.log(error.response.data); 
  });

package.json

{
  "name": "testwc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "esbuild --bundle --sourcemap src/index.js --outdir=build",
    "copy": "copy src\\index.html build /y",
    "build": "npm run copy && npm run bundle"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@woocommerce/woocommerce-rest-api": "^1.0.1"
  },
  "devDependencies": {
    "buffer": "^6.0.3",
    "esbuild": "^0.18.17",
    "events": "^3.3.0",
    "stream": "^0.0.2"
  }
}

命令行里运行的所有命令

::初始化nodejs项目npm init -y

#安装依赖包npm i @woocommerce/woocommerce-rest-api
npm i -D esbuild buffer events stream

::编译源文件npm run build

::启动python web server
py -m http.server

最终效果

index.js里我们使用api.get("orders")读取订单信息，最后从console.log()函数打印获取的数据，访问http://localhost:8000/，F12打开控制台查看数据即可。

你可能喜欢

让wordpress自动转换图片为webp格式

WebP是一种类似于GIF、JPG和PNG的Web图像格式。它们都是针对Internet使用而优化的图像格式。WebP格式的图像占用的存储大小仅为同类JPG图像...

2020/07/15

如何使用 3D 翻书在 WordPress 中创建 3D PDF 查看器

3D Flipbook允许浏览PDF或HTML格式的图像，该格式通常用于展示移动对象，例如翻页杂志或书籍。由于智能手机的兴起，这种类型的内容变得更加普遍。你无...

2020/06/18

如何使用特色图片插件Featured Image Generator

你有没有遇到过一个地方，你已经写了一篇完美的文章，你需要为它找到一些图片，但你不能？查找图像有时可能是一项艰巨的任务，尤其是当您正在寻找免费使用的图像时。幸运的...

2020/06/05