使用 WordPress REST API 做后端

网站需要后端服务，但又不想写后端，为此尝试了多个方案：

比如 OSS，但 OSS 需要后端给临时 token，列表之类的也需要后端才能实现。
nginx 文件列表。这个比较符合我的需求，搭配 KodExplorer 之类的网盘手动上传文件。
WebDAV。这个更符合我的需求，标准统一，使用方便。但目前的云盘无法从浏览器直接访问，存在诸如跨域等问题。除非自建，比如 nginx 开启 WebDAV。但因为用了 2 方案，所以这个方案就不迫切了。
WordPress REST API，这也是本文要写的。

我尽量让应用的数据结构简单，不涉及数据库，甚至不希望资源与应用网站分离，所以我把部分海报模板放到了单独的 WordPress 博客里。用户访问博客，然后通过一个文章里的按钮跳转到应用网站。

但某天我希望在应用的资源面板里访问模板，就像市面上的那些设计类网站一样。我一开始想到的是 iframe 嵌套，但后来想到 WordPress 好像是有 API 的，查了一下发现确实有。嗯……方案更优雅了。

REST API Handbook | Developer.WordPress.org

WordPress REST API 文档如上。分类、文章、媒体、tag、用户……都有了。对于简单的应用来说完全足够了。毕竟我的网站已经规划得简单到可以使用 nginx 文件列表了。

对于使用 WordPress REST API，npm 上有几个包，我目前用到的就三个：

yarn add @wordpress/api-fetch @wordpress/url wp-types

最后那个是类型包，这对于开发有很大帮助。

接口代码简单封装了下：

import { errorNotify } from '@/core/error/utils'
import apiFetch, { APIFetchOptions } from '@wordpress/api-fetch'
import { addQueryArgs } from '@wordpress/url'
import { WP_REST_API_Categories, WP_REST_API_Posts } from 'wp-types'

const rootURL = 'https://xxx.com/wp-json/wp/v2/'
apiFetch.use(apiFetch.createRootURLMiddleware(rootURL))

export function getCategories(options?: APIFetchOptions) {
  return apiFetch<WP_REST_API_Categories>({
    path: '/categories',
    ...options,
    parse: true,
  }).catch((error) => {
    errorNotify(error)
  })
}

export function getPosts(
  query?: {
    page?: number
    per_page?: number
    search?: string
    categories?: number[]
  },
  options?: APIFetchOptions
) {
  return apiFetch<WP_REST_API_Posts>({
    path: addQueryArgs('/posts', query ?? {}),
    ...options,
    parse: true,
  }).catch((error) => {
    errorNotify(error)
  })
}

目前我只用到了分类和文章列表接口。

通过 apiFetch.createRootURLMiddleware 设置根路径。这里的路径末尾要加上斜杠，下面的接口地址开头也要斜杠，否则拼接后的地址会缺少斜杠。
addQueryArgs 可以辅助 get 请求参数拼接，这比手动拼接更可靠方便。

WordPress 的插件也可以丰富 API 的功能，比如扩展数据库字段，直接在列表里返回特色图片的地址。