前期工作

首先你得有一个 Drupal 站点

进入 JSON:API 配置页面，选择【接受 JSON:API 的创建、读、更新和删除所有操作。】
配置 CORS
复制sites/default/default.services.yml到sites/default/services.yml
修改其中的配置

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['*']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['http://localhost:4200']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: true
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true

值得注意的是allowedOrigins需要设置为具体的的域名，通配符*可能会导致失败，因为提交登录表单等会携带cookie，以下是MDN的解释：

附带身份凭证的请求与通配符

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。

另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。

记得保存之后，更新缓存使之配置生效。

使用 vscode 扩展 REST Client 调式查看接口

推荐使用 REST Client，这样团队其他成员也可以一起维护，安装好扩展后，新建以.rest后缀的文件即可，一下代码且在同一个 api.rest 文件中

REST Client 定义一些常量

@base = https://nnitpai-cms.zhaobg.com
@user = test
@psw = test
@user_uuid = 15765815-07f2-4d7d-8142-cb598f82af2e
@node_uuid = 97edbdba-16a9-4e48-9285-9a2854968cf7

登录

### 登录
# @name login
POST {{base}}/user/login?_format=json HTTP/1.1
content-type: application/json

{"name": "{{user}}","pass": "{{psw}}"}

###

@logoutToken = {{login.response.body.logout_token}}

###

@csrfToken = {{login.response.body.csrf_token}}

其中 # @name login rest client 允许我们自定义变量，当点击Send Request 之后，把http返回体赋值给login变量，因为我们要使用其中诸如退出需要的logout_token和读写操作的csrf_token.

返回数据：

{
  "current_user": {
    "uid": "9",
    "name": "test"
  },
  "csrf_token": "Q3MBvFZp-ivmgsXUD-vmwO3i-2ozLx3GMtVMSh1-ZqU",
  "logout_token": "XhMPGCXYfhcYQ5d2pcPp9otv3Dag-NOcQ6U6wLcow8U"
}

查看用户登录状态

### 用户状态
GET {{base}}/user/login_status?_format=json HTTP/1.1

返回数据 1 为登录，0 为未登录

退出登录

### 用户退出
POST {{base}}/user/logout?_format=json&token={{logoutToken}} HTTP/1.1

获取根据登录返回的UID获取用户信息

### 用户信息
GET {{base}}/jsonapi/user/user?filter[drupal_internal__uid]={{login.response.body.cur

获取具体的某个node

### 下面都用到这个内容类型，定义变量方便使用
@type=recruitment
### 获取单个资源
GET {{base}}/jsonapi/node/{{type}}/97edbdba-16a9-4e48-9285-9a2854968cf7

获取该分类术语列表

在上面的的接口中，返回的数据 relationships记录了相关联的实体数据信息，可以查询该接口获取数据

### 分类
GET {{base}}/jsonapi/node/recruitment/5c67b19c-b8c4-495b-8a6f-1bea1a852a49/skill?resourceVersion=id%3A90

获取 recruitment 内容类型中分类数据为 skill 的数据。

获取某内容类型的所有数据

### 获取集合
GET {{base}}/jsonapi/node/{{type}}

通过limit条件限制返回条数

### 限制条数
GET {{base}}/jsonapi/node/{{type}}?page[limit]=10

可设置偏移量，以下等同返回第二页

### 获取偏移量
GET {{base}}//jsonapi/node/{{type}}?page[limit]=25&page[offset]=25

根据某字段排序返回数据

### 标题顺序或倒序
GET {{base}}/jsonapi/node/{{type}}?sort=title

### nid 顺序或倒序
{{base}}/jsonapi/node/{{type}}?sort=nid

只提取指定字段

### 获取指定字段
GET {{base}}/jsonapi/node/{{type}}?fields[node--{{type}}]=title,created,changed,body

以下新增、更新、删除操作前提：

准备好内容类型和具体内容的UUID，查看UUID，可以安装 devel模块，在具体的node更新页面可以查看：

@sample_type = article
@article_node_uuid = bb0617db-af29-4239-b824-4131f29d7530

设置请求头，和对应的内容，需要注意必须包含必填字段，可以使用默认的article内容类型测试。

新增内容

### 新增实体
POST {{base}}/jsonapi/node/{{sample_type}} HTTP/1.1
Accept: application/vnd.api+json
Content-Type: application/vnd.api+json
X-CSRF-Token: {{csrfToken}}

{
  "data": {
    "type": "node--{{sample_type}}",
    "attributes": {
      "title": "new article by Johnson",
      "body": {
        "value": "Hello world! Lorem ipsum dolor sit amet consectetur adipiscing elit",
        "format": "plain_text"
      }
    },
    "relationships": {
      "uid": {
        "data": {
          "type": "user--user",
          "id": "{{user_uuid}}"
        }
      }
    }
  }
}

以下为angular实践设置的请求头，withCredentials: true，此参数http请求将携带 cookie 参数，否则无权限。

httpOptions(token: string) {
    const httpOptions = {
      headers: new HttpHeaders({
        Accept: 'application/vnd.api+json',
        'Content-Type': 'application/vnd.api+json',
        'X-CSRF-Token': token,
      }),
      withCredentials: true,
    };
    return httpOptions;
  }

更新内容

### 更新指定 node
PATCH {{base}}/jsonapi/node/article/{{article_node_uuid}}
Accept: application/vnd.api+json
Content-Type: application/vnd.api+json
X-CSRF-Token: {{csrfToken}}

{
  "data": {
    "type": "node--article",
    "id": "{{article_node_uuid}}",
    "attributes": {
      "title": "update the article",
    },
    "relationships": {
      "uid": {
        "data": {
          "type": "user--user",
          "id": "{{user_uuid}}"
        }
      }
    }
  }
}

删除内容

### 删除单个内容
DELETE {{base}}/jsonapi/node/article/{{article_node_uuid}}
Accept: application/vnd.api+json
Content-Type: application/vnd.api+json
X-CSRF-Token: {{csrfToken}}

Drupal jsonapi 初级入门实践

POPULAR POSTS

CATEGORIES