使用wp-api-angular连接Angular和WordPress API
在本教程中，您将学习如何使用wp-api-angular库，该库允许您与Angular 2+应用程序中的WordPress API进行交互。 该库支持所有主要的WP资源，包括用户，帖子，评论，媒体，分类法等。它也非常易于使用，因此您将很快获得创意。
要查看运行中的库，我们将编写以下功能的代码：
- 使用JWT进行身份验证
- 列出用户
- 列出帖子
- 创建和编辑帖子
- 删除帖子
到本文结尾，您将熟悉该库，并准备好自己使用它。
我假设您使用的是Angular 5，但所有已解释的概念也应适用于Angular 2。
奠定基础
设置WordPress
在继续编写代码之前，需要注意以下几点。 首先，请注意， 我们将要使用的API仅适用于WordPress的自托管版本 。 对于网络版本（可以通过WordPress网站进行配置），有一个单独的API具有许多相似的概念，尽管仍然有很大的不同。
您还必须启用永久链接，这是API客户端正确运行所必需的。 对于Nginx，您需要将以下行添加到nginx.conf文件中：
try_files $uri $uri/ /index.php?$args;
可以在此WordPress Codex指南中找到有关如何启用永久链接的更多详细信息和说明。
最后，我们应该注意WordPress的安全性 ，正如他们所说的那样。 为此，需要一个名为JWT Authentication的特殊插件。 我们将使用它来在特殊令牌的帮助下对我们的API客户端进行身份验证（这种方法在当今非常普遍）。
就是这样。 如果您想进一步了解WordPress API的更多信息，请浏览本文 。 当您准备就绪时，请继续执行下一步，让我们看看实际的Angular WordPress客户端！
引导一个Angular应用程序
现在我们已经准备好WordPress，通过运行以下命令创建一个新的Angular应用程序：
ng new wp-api
这将为应用程序创建框架。 我们不会详细讨论其结构，但是您可以在Angular系列中找到更多信息。
接下来， cd到该目录中，并安装该库本身：
cd wp-api
npm install -g typings
npm install wp-api-angular --save
现在，我们需要在src/app/app.module.ts文件中导入适当的组件：
// ... other imports
import { Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {
WpApiModule,
WpApiLoader,
WpApiStaticLoader
} from 'wp-api-angular';
WpApiModule也应该添加到imports块中。 请注意，我们必须使用导出的工厂进行AoT编译或Ionic ：
// ... imports
@NgModule({
declarations: [
// ... omitted
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule, // <---
WpApiModule.forRoot({ // <---
provide: WpApiLoader,
useFactory: (WpApiLoaderFactory),
deps: [Http]
})
]
// ...
})
这是工厂本身：
export function WpApiLoaderFactory(http: Http) {
return new WpApiStaticLoader(http, 'http://YOUR_DOMAIN_HERE/wp-json/wp/v2/', '');
}
不要忘记在这里提供您自己的域名！
最后，我们还要将一些导入添加到app.components.ts文件中：
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { NgForm } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Headers } from '@angular/http';
// ...
我们需要NgForm来制作表单，需要HTTP模块来与API交互，而需要Headers来认证客户端。
初始设置已完成，我们可以继续下一部分。
认证方式
与API交互之前，我们需要引入一种身份验证机制 。 如上所述，将使用基于令牌的身份验证，因此我们将token变量添加到app.components.ts ：
export class AppComponent {
token = null;
// ...
}
另外，通过添加一个新块来调整app.component.html文件：
<div>
<app-authentication [(token)]='token'></app-authentication>
</div>
为了使它起作用，需要一个单独的组件，因此请立即生成：
ng generate component authentication
将必要的模块导入src/app/authentication/authentication.component.ts文件中：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
// ...
身份验证过程将非常简单：用户应输入其登录名和密码，提交表单，如果凭据正确，将返回一个特殊令牌。 然后，该令牌将用于执行API请求。 因此，让我们起草一个用户并为AuthenticationComponent添加输入和输出：
// ...
export class AuthenticationComponent implements OnInit {
user = {
login: '',
password: ''
}
@Input() token;
@Output() tokenChange = new EventEmitter<string>();
// ...
}
当然，您可以将用户定义为模型，但是出于本演示的目的，它不是强制性的。 对于构造函数，将HttpClient传递给它：
// ...
constructor( private http: HttpClient ) { }
接下来编写auth方法。 这就像使用凭证将POST请求发送到正确的URL并等待响应一样简单：
// ...
auth() {
this.http.post('http://YOUR_DOMAIN/wp-json/jwt-auth/v1/token', {
username: this.user.login,
password: this.user.password
}).subscribe((data) => {
if (data['token']) { // if token is returned
this.token = data['token'];
this.tokenChange.emit(this.token);
}
});
}
再一次，不要忘记将您的域名插入URL。
组件已准备就绪，本节中最后要做的就是创建相应的表单。 仅当令牌为null时才显示。 提交表单后，应调用auth方法：
<form *ngIf='token == null' (ngSubmit)='auth()'>
</form>
通过添加两个字段和一个Submit按钮来充实表单：
<form *ngIf='token == null' (ngSubmit)='auth()'>
<div class='form-group'>
<label for='login'>Login</label>
<input type='text' class='form-control' [(ngModel)]='user.login' name='login' id='login' required>
</div>
<div class='form-group'>
<label for='password'>Password</label>
<input type='password' class='form-control' [(ngModel)]='user.password' name='password' id='password' required>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
而已！ 身份验证功能已完成，我们可能会开始使用API本身。
列出用户
通常，通过API进行读取比编写更为简单，因此让我们尝试列出由WordPress驱动的我们网站的用户。 创建一个新的UserList组件：
ng generate component user-list
在src/app/user-list/user-list.component.ts您需要导入WpApiUsers模块以及其他一些模块：
import { Component, OnInit, Input } from '@angular/core';
import { WpApiUsers } from 'wp-api-angular';
import { Headers } from '@angular/http';
// ...
我们将用户存储在users数组内，该数组初始为空：
// ...
export class UserListComponent implements OnInit {
users = [];
}
将WpApiUsers传递到构造函数中，并调用getUserList方法：
// ...
constructor( private wpApiUsers: WpApiUsers ) {
this.getUserList();
}
现在我们需要对getUserList进行编码。 API客户端提供的每种方法都返回一个observable，可以使用toPromise将其转换为promise。 因此，要获取所有用户的列表，我们应该调用getList方法，将其转换为getList ，并使用返回的数组分配users变量：
// ...
getUserList() {
this.wpApiUsers.getList()
.toPromise()
.then( response => {
let json: any = response.json();
this.users = json;
})
}
如您所见，这里没有什么复杂的。 有趣的是，我们甚至不需要令牌即可执行此方法。 因此，只需按周期渲染用户即可：
<div>
<h2>Users:</h2>
<div *ngFor="let user of users">
Name: {{user.name}}
</div>
</div>
user-list组件应添加到app.component.html文件中：
<!-- ... -->
<div>
<user-list></user-list>
</div>
处理帖子
创建帖子
现在，让我们尝试实现稍微复杂一些的功能，并允许用户通过API添加新帖子。 创建一个单独post-new组件：
ng generate component post-new
将必需的模块导入filesrc/app/post-new/post-new.component.ts文件中：
import { Component, OnInit, Input } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';
// ...
WpApiPosts模块将成为这里的主要明星。
接下来，提供token作为输入并草拟post模型：
// ...
export class PostNewComponent implements OnInit {
@Input() token;
new_post = {
title: '',
content: '',
status: 'publish'
}
}
至少，每个帖子都应包含标题，一些内容和状态（我们将其硬编码为publish以便立即发布新帖子）。
构造函数应接受WpApiPosts ：
// ...
constructor( private wpApiPosts: WpApiPosts ) { }
现在，让我们设计一种添加帖子的方法。 首先，通过设置Authorization标头对身份验证逻辑进行编码：
// ...
createPost() {
let headers: Headers = new Headers({
'Authorization': 'Bearer ' + this.token
});
}
现在，我们可以简单地获取headers变量，并将其传递给WpApiPosts模块的create方法：
// ...
createPost() {
let headers: Headers = new Headers({
'Authorization': 'Bearer ' + this.token
});
this.wpApiPosts.create(this.new_post, { headers: headers })
.toPromise()
.then( response => {
console.log(response);
})
}
表格呢？ 好吧，真的很简单：
<!-- src/app/post-new/post-new.component.html -->
<div>
<h2> Post Creation </h2>
<form (ngSubmit)='createPost()'>
<div class="form-group">
<label for="title">Post title</label>
<input type="text" class="form-control" [(ngModel)]='new_post.title' name='title' id="title" required>
</div>
<div class="form-group">
<label for="content">Post content</label>
<textarea class="form-control" id="content" required [(ngModel)]='new_post.content' name='content'></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
提交表单后，我们将调用createPost方法。
不要忘记渲染post-new组件：
<!-- app.component.html -->
<!-- ... -->
<div>
<h3 *ngIf='token == null'> Please, authorize to create a post </h3>
<post-new *ngIf='token' [token]='token'></post-new>
</div>
我们检查令牌是否已设置，如果未设置，则要求用户进行身份验证。
列出帖子
好的，我们添加了创建帖子的功能。 为什么我们不在页面上也显示它们？ 创建另一个组件：
ng generate component post-list
导入必要的模块，包括WpApiPosts里面src/app/post-list/post-list.component.ts文件：
import { Component, OnInit, Input } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';
// ...
提供输入和posts数组：
// ...
export class PostListComponent implements OnInit {
@Input() token;
posts = [];
}
getPosts应调用getPosts方法的构造函数的代码：
// ...
constructor(private wpApiPosts: WpApiPosts) {
this.getPosts();
}
我们不需要进行身份验证即可获取帖子，因此我们使用与以前相同的方法：
// ...
getPosts() {
this.wpApiPosts.getList()
.toPromise()
.then( response => {
let json: any = response.json();
this.posts = json;
});
}
现在渲染帖子数组：
<!-- src/app/post-list/post-list.component.html -->
<div>
<h2>Latests Posts:</h2>
<hr>
<div *ngFor='let post of posts'>
<h1 [innerHTML]='post.title.rendered'></h1>
<p [innerHTML]='post.content.rendered'></p>
<hr>
</div>
</div>
最后，显示组件：
<!-- app.component.html -->
<!-- ... -->
<div>
<post-list [token]='token'></post-list>
</div>
销毁职位
接下来，我想添加一种破坏帖子的功能。 可以在同一PostList组件中实现此功能。 只需在每个帖子旁边添加一个删除按钮：
<!-- src/app/post-list/post-list.component.html -->
<div>
<h2>Latests Posts:</h2>
<hr>
<div *ngFor='let post of posts'>
<h1 [innerHTML]='post.title.rendered'></h1>
<p [innerHTML]='post.content.rendered'></p>
<button *ngIf='token' (click)='deletePost(post.id, $index)'>Delete</button>
<hr>
</div>
</div>
请注意，仅当存在令牌时才显示此按钮。 另外，通过添加deletePost方法来调整组件：
// src/app/post-list/post-list.component.ts
// ...
deletePost(id: number, index: number) {
let headers: Headers = new Headers({
'Authorization': 'Bearer ' + this.token
});
this.wpApiPosts.delete(id, { headers: headers })
.toPromise()
.then( response => {
if (response['ok'] == true) {
this.posts.splice(index,1);
}
})
}
基本上，这里没有新内容。 我们将令牌添加到标题中，并调用delete方法，该方法接受post的ID及其在posts数组中的索引。 如果请求成功，则从阵列中删除帖子。
编辑帖子
我们今天要介绍的最后一个功能是编辑帖子的功能。 让我们创建一个新组件：
ng generate component post-edit
该组件将从PostList引用。 具体来说，我想在每个帖子旁边添加一个“ 编辑”按钮，并在单击时渲染PostEdit模板：
<!-- src/app/post-list/post-list.component.html -->
<div>
<h2>Latests Posts:</h2>
<hr>
<div *ngFor='let post of posts'>
<div *ngIf='editingPost != post; else postEdit'>
<h1 [innerHTML]='post.title.rendered'></h1>
<p [innerHTML]='post.content.rendered'></p>
<button *ngIf='token' (click)='deletePost(post.id, $index)'>Delete</button>
<button *ngIf='token' (click)='updatePost(post)'>Edit</button>
<hr>
</div>
</div>
<ng-template #postEdit>
<post-edit [post]='editingPost' [token]='token' (finish)='editingPost = null; getPosts()'></post-edit>
</ng-template>
通过引入editingPost变量和updatePost方法来调整PostListComponent ，该方法editingPost分配适当的值：
// src/app/post-list/post-list.component.ts
// ...
export class PostListComponent implements OnInit {
@Input() token;
posts = [];
editingPost = null;
updatePost(post) {
this.editingPost = post;
}
}
进入PostEditComponent并导入所有必需的模块：
// src/app/post-edit/post-edit.component.ts
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';
// ...
该组件将有两个输入：令牌和要编辑的实际帖子。 另外，我们将有一个输出（ EventEmitter ）：
// ...
export class PostEditComponent implements OnInit {
@Input() token;
@Input() post;
@Output() finish = new EventEmitter<void>();
post_edit = {
title: '',
content: ''
}
}
组件初始化后，立即为post_edit变量分配适当的标题和内容（取自post变量）：
// ...
ngOnInit() {
this.post_edit['title'] = this.post.title.rendered;
this.post_edit['content'] = this.post.content.rendered;
}
现在编写updatePost方法，该方法将执行身份验证。 更新帖子并发出事件：
// ...
updatePost() {
let headers: Headers = new Headers({
'Authorization': 'Bearer ' + this.token
});
this.wpApiPosts.update(this.post.id, this.post_edit, { headers: headers })
.toPromise()
.then( response => {
this.finish.emit(null);
})
}
请注意， update方法同时接受帖子的ID和标题和内容的新值。
这是编辑帖子的表格：
<!-- src/app/post-edit/post-edit.component.html -->
<div>
<h2> Post Editing </h2>
<form (ngSubmit)='updatePost()'>
<div class="form-group">
<label for="title">Post title</label>
<input type="text" class="form-control" [(ngModel)]='post_edit.title' name='title' id="title" required>
</div>
<div class="form-group">
<label for="content">Post content</label>
<textarea class="form-cont rol" id="content" required [(ngModel)]='post_edit.content' name='content'></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
就是这样：编辑功能已准备就绪！ 您现在可以通过运行以下命令来引导服务器：
ng serve --open
并使用该应用程序以确保一切正常。
结论
在本文中，我们讨论了Angular的WordPress API客户端的用法。 通过引入身份验证功能，列出用户和帖子以及增加创建和操作帖子的功能，我们已经看到了它的作用。 该客户端使您可以使用其他资源，例如媒体和评论，但是所有这些交互都与我们在此讨论的非常相似。
希望您现在准备将此处介绍的信息付诸实践，但请随时向我发送您的问题！ 与往常一样，感谢您与我在一起，直到下一次。
From: https://www.sitepoint.com/angular-wordpress-wp-api-angular/