angular api管理_使用wp-api-angular连接Angular和WordPress API

最新推荐文章于 2024-05-03 11:07:56 发布

dingshi7798

最新推荐文章于 2024-05-03 11:07:56 发布

阅读量201

点赞数

文章标签： python java web vue js ViewUI

原文链接：https://www.sitepoint.com/angular-wordpress-wp-api-angular/

版权

angular api管理

在本教程中，您将学习如何使用wp-api-angular库，该库允许您与Angular 2+应用程序中的WordPress API进行交互。 该库支持所有主要的WP资源，包括用户，帖子，评论，媒体，分类法等。它也非常易于使用，因此您将很快获得创意。

要查看实际运行的库，我们将编写以下功能的代码：

使用JWT进行身份验证
列出用户
列出帖子
创建和编辑帖子
删除帖子

到本文结尾，您将熟悉该库，并准备好自己使用它。

本教程的源代码可在GitHub上找到。

我假设您使用的是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来认证客户端。

免费学习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管理

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular api管理_使用wp-api-angular连接Angular和WordPress API

angular api管理在本教程中，您将学习如何使用wp-api-angular库，该库允许您与Angular 2+应用程序中的WordPress API进行交互。该库支持所有主要的WP资源，包括用户，帖子，评论，媒体，分类法等。它也非常易于使用，因此您将很快获得创意。要查看实际运行的库，我们将编写以下功能的代码：使用JWT进行身份验证列出用户列出帖子创建和编...
复制链接

扫一扫