angular 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
来认证客户端。
![](https://i-blog.csdnimg.cn/blog_migrate/8685b9817a7222c65fe9378892a68fa9.png)
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
初始设置已完成,我们可以继续下一部分。
认证方式
与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
方法的构造函数进行编码:
// ...
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客户端的用法。 通过引入身份验证功能,列出用户和帖子以及增加创建和操作帖子的功能,我们已经看到了它的作用。 该客户端允许您使用其他资源(例如媒体和评论),但是所有这些交互都与我们在此讨论的非常相似。
希望您现在已经准备好将此处介绍的信息应用于实践中,但是请随时向我发送您的问题! 与往常一样,感谢您与我在一起直到下一次。
翻译自: https://www.sitepoint.com/angular-wordpress-wp-api-angular/
angular api管理