Sélectionner une page


Dans ce didacticiel, vous apprendrez à travailler avec le wp-api-angulaire Bibliothèque avec laquelle vous pouvez interagir avec le API WordPress de Angle 2+ Applications. Cette bibliothèque prend en charge toutes les principales ressources WP, y compris les utilisateurs, les articles, les commentaires, les médias, les taxonomies, etc. Elle est également assez facile à utiliser, vous pouvez donc avoir l’idée en un rien de temps.

Pour voir la bibliothèque en action, les fonctions suivantes sont codées:

  • Authentification avec JWT
  • Lister les utilisateurs
  • Liste des contributions
  • Créer et modifier des messages
  • Supprimer les messages

À la fin de l’article, vous vous familiariserez avec cette bibliothèque et pourrez l’utiliser vous-même.

Le code source de ce didacticiel est disponible sur GitHub.

Je suppose que vous utilisez Angular 5, mais tous les concepts discutés devraient également s’appliquer à Angular 2.

Pose des fondations

Configurer WordPress

Avant de continuer à écrire le code, il y a quelques choses à faire. Tout d’abord, notez que le API que nous utiliserons ne fonctionne qu’avec ça Version auto-hébergée de WordPress. Pour la version Web (qui peut être configurée via le Site WordPress), il existe une API distincte qui a de nombreux concepts similaires, même si elle est encore très différente.

Vous devrez également activer les permaliens – cela est nécessaire pour que le client API fonctionne correctement. Pour Nginx, vous devez ajouter la ligne suivante à la nginx.conf Déposer:

try_files $uri $uri/ /index.php?$args;

Pour plus d’informations et d’explications sur l’activation des permaliens, consultez ce guide du Codex WordPress.

Enfin, nous devons nous en occuper Sécurité WordPress ce qui, comme on dit, est avant tout. Un plug-in spécial est appelé pour cela Authentification JWT obligatoire. Nous allons l’utiliser pour authentifier notre client API à l’aide de jetons spéciaux (une approche largement utilisée de nos jours).

C’est à peu près tout. Si vous souhaitez en savoir plus sur l’API WordPress en général, faites défiler Ce post. Lorsque vous avez terminé, passez à l’étape suivante et voyons le client Angular WordPress en action!

Amorcer une application angulaire

Maintenant que WordPress est prêt, créez une nouvelle application Angular en exécutant:

ng new wp-api

Cela crée un squelette pour l’application. Nous ne discuterons pas de la structure en profondeur, mais voir pour plus d’informations notre série angulaire.

Suivant, cd dans le répertoire et installez vous-même la bibliothèque:

cd wp-api
npm install -g typings
npm install wp-api-angular --save

Maintenant, nous devons importer les bons composants dans ce src/app/app.module.ts Déposer:


import { Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {
  WpApiModule,
  WpApiLoader,
  WpApiStaticLoader
} from 'wp-api-angular';

WpApiModule devrait également être ajouté imports Bloquer. Notez que nous devons utiliser une usine exportée pour Compilation AoT ou Ionique::



@NgModule({
  declarations: [
        
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule, 
    WpApiModule.forRoot({ 
      provide: WpApiLoader,
      useFactory: (WpApiLoaderFactory),
      deps: [Http]
    })

  ]
    
})

Voici l’usine elle-même:

export function WpApiLoaderFactory(http: Http) {
  return new WpApiStaticLoader(http, 'http://YOUR_DOMAIN_HERE/wp-json/wp/v2/', '');
}

N’oubliez pas de saisir votre propre nom de domaine ici!

Enfin, nous ajoutons quelques importations supplémentaires au app.components.ts Déposer:

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';


Nous aurons besoin NgForm pour créer des formulaires, des modules HTTP pour interagir avec l’API et Headers pour authentifier le client.

La configuration initiale est terminée et nous pouvons passer à la section suivante.

Authentification

Avant de commencer à interagir avec l’API, nous devons en introduire une Mécanisme d’authentification. Comme mentionné ci-dessus, l’authentification basée sur les jetons est utilisée. Alors ajoutons-en un token Variable pour app.components.ts::

export class AppComponent {  
    token = null;
    
}

Optimisez cela aussi app.component.html Fichier en ajoutant un nouveau bloc:

<div>
  <app-authentication [(token)]='token'></app-authentication>
</div>

Un composant séparé est nécessaire pour que cela fonctionne. Générez-les maintenant:

ng generate component authentication

Importez les modules requis dans le src/app/authentication/authentication.component.ts Déposer:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';

Le processus d’authentification sera très simple: un utilisateur doit entrer son identifiant et son mot de passe, soumettre le formulaire et un jeton spécial sera retourné si les informations d’identification sont correctes. Ce jeton est ensuite utilisé pour effectuer des requêtes API. Alors dessinons un utilisateur et ajoutons des entrées et des sorties pour le AuthenticationComponent::


export class AuthenticationComponent implements OnInit {
  user = {
    login: '',
    password: ''
  }
  @Input() token;
    @Output() tokenChange = new EventEmitter<string>();

    
}

Bien sûr, vous pouvez définir l’utilisateur comme modèle, mais pour les besoins de cette démonstration, cela n’est pas nécessaire. Passe le HttpClient à:


constructor( private http: HttpClient ) { }

Code suivant du auth Méthode. C’est aussi simple que d’envoyer une requête POST à l’URL correcte avec les informations d’identification et d’attendre la réponse:


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']) { 
      this.token = data['token'];
      this.tokenChange.emit(this.token);
    }
  });
}

Encore une fois, n’oubliez pas d’inclure votre nom de domaine dans l’URL.

Le composant est prêt et la dernière chose que vous devez faire dans cette section est de créer le formulaire approprié. Il ne devrait apparaître que si le jeton est activé null. Lorsque le formulaire est soumis, le auth La méthode doit être appelée:

<form *ngIf='token == null' (ngSubmit)='auth()'>
</form>

Remplissez le formulaire en ajoutant deux champs et un Nous faire parvenir Bouton:

<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>

C’est ça! La fonction d’authentification est terminée et nous pouvons commencer à jouer avec l’API elle-même.

Lister les utilisateurs

En général, la lecture de l’API est plus facile que l’écriture. Essayons donc de lister les utilisateurs de notre site Web propulsé par WordPress. Créer un nouveau UserList Composant:

ng generate component user-list

Dans le src/app/user-list/user-list.component.ts Vous devez importer ça Module WpApiUsers ainsi que quelques autres modules:

import { Component, OnInit, Input } from '@angular/core';
import { WpApiUsers } from 'wp-api-angular';
import { Headers } from '@angular/http';

Nous enregistrerons les utilisateurs dans le users Tableau dont l’initialité est vide:


export class UserListComponent implements OnInit {
    users = [];
}

Consister WpApiUsers dans le constructeur et appelez un getUserList Méthode:


constructor( private wpApiUsers: WpApiUsers ) {
  this.getUserList();
}

Maintenant nous devons coder ça getUserList. Chaque méthode présentée par le client API renvoie une observable qui peut être convertie en promesse à l’aide de toPromise. Pour obtenir une liste de tous les utilisateurs, nous devons leur donner un appel getList Méthode, convertissez-la en promesse et attribuez-la users Variable avec le tableau retourné:


getUserList() {   
  this.wpApiUsers.getList()
  .toPromise()
  .then( response => {
    let json: any = response.json();
    this.users = json;
  })
}

Comme vous pouvez le voir, rien de complexe ici. Fait intéressant, nous n’avons même pas besoin d’un jeton pour exécuter cette méthode. Il suffit donc de rendre les utilisateurs en un seul cycle:

<div>
  <h2>Users:</h2>
  <div *ngFor="let user of users">
     Name: {{user.name}}
  </div>
</div>

le user-list Le composant doit être ajouté au app.component.html Déposer:


<div>
  <user-list></user-list>
</div>

Travailler avec des posts

Créer des articles

Essayons maintenant de mettre en œuvre une fonctionnalité légèrement plus complexe et de permettre aux utilisateurs d’ajouter de nouvelles publications via l’API. Créez un post-new Composant:

ng generate component post-new

Importez les modules requis dans le filesrc/app/post-new/post-new.component.ts Déposer:

import { Component, OnInit, Input } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';

le Module WpApiPosts sera la principale star ici.

Ensuite, entrez le token comme entrée et ébauche d’un post Modèle:


export class PostNewComponent implements OnInit {
  @Input() token;
  new_post = {
    title: '',
    content: '',
    status: 'publish'
    }
}

Au minimum, chaque message doit avoir un titre, du contenu et un statut (que nous codons en dur comme publish pour publier le nouveau message immédiatement).

Un constructeur devrait accepter que WpApiPosts::


constructor( private wpApiPosts: WpApiPosts ) { }

Créons maintenant une méthode pour ajouter le message. Commencez par coder la logique d’authentification en spécifiant le paramètre Authorization Entête:


createPost() {       
  let headers: Headers = new Headers({
    'Authorization': 'Bearer ' + this.token
    });
}

Maintenant nous pouvons juste prendre ça headers Variable et transmettez-la au create Méthode de WpApiPosts Module:


createPost() {       
  let headers: Headers = new Headers({
    'Authorization': 'Bearer ' + this.token
  });

  this.wpApiPosts.create(this.new_post, { headers: headers })
  .toPromise()
  .then( response => {
    console.log(response);         
  })
}

Qu’en est-il de la forme? Eh bien, c’est vraiment très simple:


<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>

Une fois le formulaire envoyé, nous appellerons le createPost Méthode.

N’oubliez pas de rendre ça post-new Composant:



<div>
  <h3 *ngIf='token == null'> Please, authorize to create a post </h3>
  <post-new *ngIf='token' [token]='token'></post-new>
</div>

Nous vérifions si le jeton est défini et sinon nous demandons à l’utilisateur de s’authentifier.

Liste des contributions

D’accord, nous avons ajouté la possibilité de créer les messages. Pourquoi ne les montrons-nous pas aussi sur la page? Créez un autre composant:

ng generate component post-list

Importez les modules requis, y compris WpApiPosts dans le src/app/post-list/post-list.component.ts Déposer:

import { Component, OnInit, Input } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';

Entrez dans l’entrée et le posts Déployer:


export class PostListComponent implements OnInit {
  @Input() token;
    posts = [];
}

Codez le constructeur pour l’appeler getPosts Méthode:


constructor(private wpApiPosts: WpApiPosts) {
  this.getPosts();
}

Nous n’avons pas besoin de nous authentifier pour obtenir les messages. Alors faisons la même chose qu’avant:


getPosts() {
  this.wpApiPosts.getList()
  .toPromise()
  .then( response => {
    let json: any = response.json();
    this.posts = json;
  });
}

Maintenant, affichez le tableau des articles:


<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>

Enfin, affichez le composant:



<div>
  <post-list [token]='token'></post-list>
</div>

Détruisez les messages

Ensuite, je veux ajouter un moyen de détruire les messages. Cette fonction peut être implémentée dans le même PostList Composant. Ajoutez juste un Dégager Bouton à côté de chaque message:


<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>

Notez que ce bouton n’apparaît que si le jeton est présent. Personnalisez également le composant en ajoutant le deletePost Méthode:



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);
    }       
  })
}

Fondamentalement, rien de nouveau ici. Nous ajoutons le jeton aux en-têtes et l’appelons delete Méthode qui accepte l’ID de la publication et son index dans le posts Déployer. Si la demande aboutit, supprimez la contribution du tableau.

Modifier les messages

La dernière fonctionnalité que nous allons présenter aujourd’hui est la possibilité de modifier les messages. Créons un nouveau composant:

ng generate component post-edit

Il est fait référence à ce composant à partir du PostList. En particulier, je voudrais en ajouter un Éditer Bouton à côté de chaque message et rendre le PostEdit Modèle à chaque fois que vous cliquez:


<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>

Optimiser le PostListComponent en introduisant un editingPost Variable et un updatePost Méthode qui attribuera le editingPost avec une valeur correcte:



export class PostListComponent implements OnInit {
  @Input() token;
  posts = [];
    editingPost = null;

    updatePost(post) {
      this.editingPost = post;
    }
}

Continuez avec ça PostEditComponent et importez tous les modules requis:


import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { WpApiPosts } from 'wp-api-angular';
import { Headers } from '@angular/http';

Ce composant aura deux entrées: le jeton et la contribution réelle à traiter. Nous avons également un problème (EventEmitter):


export class PostEditComponent implements OnInit {
  @Input() token;
  @Input() post;
  @Output() finish = new EventEmitter<void>();
  post_edit = {
    title: '',
    content: ''
    }
}

Une fois le composant initialisé, attribuez le post_edit Variable avec le titre et le contenu corrects de post Variable:


ngOnInit() {
  this.post_edit['title'] = this.post.title.rendered;
  this.post_edit['content'] = this.post.content.rendered;
}

Vous allez maintenant coder le updatePost Méthode qui effectuera l’authentification. Mettez à jour le message et diffusez un événement:


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);      
  })
}

Notez que le update La méthode accepte à la fois l’ID de l’article et la nouvelle valeur du titre et du contenu.

Voici le formulaire pour éditer l’article:


<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>

Voilà: la fonction d’édition est prête! Vous pouvez maintenant démarrer le serveur en procédant comme suit:

ng serve --open

et jouez avec l’application pour vous assurer que tout fonctionne correctement.

Conclusion

Dans cet article, nous avons expliqué comment utiliser le client API WordPress pour Angular. Nous l’avons vu en action en introduisant la fonction d’authentification, en répertoriant les utilisateurs et les publications, et en ajoutant la possibilité de créer et de modifier les publications. Ce client vous permet de travailler avec d’autres ressources comme les médias et les commentaires, mais toutes ces interactions sont très similaires à ce dont nous avons parlé ici.

J’espère que vous êtes maintenant prêt à mettre en pratique les informations présentées ici, mais n’hésitez pas à m’envoyer vos questions! Comme toujours, merci de rester avec moi et à la prochaine fois.



Source link

Recent Posts