Angular et MongoDB : ajouter des articles à une application de blog

Dans la partie précédente de la série de tutoriels sur les blogs angulaires, vous avez appris à créer ShowPostComponent pour afficher une liste d'articles de blog sur la page d'accueil. Vous avez récupéré les enregistrements insérés à partir du shell MongoDB à l'aide du point de terminaison de l'API REST que vous avez créé.

Dans ce didacticiel, vous allez créer un nouveau composant appelé AddPostComponent pour fournir une interface utilisateur permettant d'ajouter de nouveaux articles de blog à une base de données MongoDB.

Commencer

Commençons par cloner le code source de la partie précédente de cette série de didacticiels.

git clone https://github.com/royagasthyan/ShowPost AddPost

Accédez au répertoire du projet et installez les dépendances requises.

cd AddPost/client
npm install
cd  AddPost/server
npm install

Après avoir installé les dépendances, redémarrez les applications client et serveur.

cd AddPost/client
npm start
cd  AddPost/server
node app.js

Pointez votre navigateur sur http://localhost:4200 et l'application devrait être en cours d'exécution.

Créer un composant d'ajout de publication

Commençons à créer AddPostComponent。在 src/app 文件夹中创建一个名为 add-post 的文件夹。在 add-post 文件夹中，创建一个名为 add-post.component.ts. Créez un dossier nommé add-post dans le dossier src/app. Dans le dossier add-post, créez un fichier appelé

et ajoutez le code suivant :

import { Component } from '@angular/core';
import { Post } from '../models/post.model';

@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.css']
})
export class AddPostComponent {

  constructor() {
  
  }

}

add-post.component.htmlCréez un fichier nommé

et le code HTML suivant :

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" #closeBtn class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">


                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Title</label>
                        <input name="title" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter title">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Description</label>
                        <textarea name="description" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </textarea>
                    </div>

                   

                    <button type="button" class="btn btn-primary">Add</button>
                </form>


            </div>
        </div>
    </div>
</div>

Le composant Ajouter une publication s'affichera sous forme de fenêtre contextuelle.

AddPostComponent 添加到 NgModule。在 app.module.ts 文件中导入 AddPostComponentVous devez maintenant ajouter

à NgModule. Importez

dans le fichier app.module.ts. NgModule declarations

import { AddPostComponent } from './add-post/add-post.component';

Ajoutez le composant à la

liste. Cela ressemble à ceci : data-target 属性添加到 home.component.html

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ROUTING } from './app.routing';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { RootComponent } from './root/root.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { ShowPostComponent } from './show-post/show-post.component';
import { AddPostComponent } from './add-post/add-post.component';


@NgModule({
  declarations: [
    RootComponent,
    LoginComponent,
    HomeComponent,
    ShowPostComponent,
    AddPostComponent
  ],
  imports: [
    BrowserModule,
    ROUTING,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [RootComponent]
})
export class AppModule { }

Pour déclencher la fenêtre contextuelle Ajouter une publication, vous y avez placé le bouton

.

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal">
  Add
</button>

Enregistrez les modifications ci-dessus et redémarrez l'application. Connectez-vous à l'application et cliquez sur le lien AddPostComponentAjouter

sur la page d'accueil. Vous verrez

apparaître sous forme de popup.

Implémenter la fonction d'ajout de publicationsngModel 指令添加到 title 和 description

Convertir

en élément d'entrée. click

<input name="title" type="text" [(ngModel)]="post.title" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter title">
<textarea name="description" [(ngModel)]="post.description" class="form-control" id="exampleInputPassword1" placeholder="Password">
</textarea>

Ajoutez l'instruction

dans le bouton pour appeler la méthode de sauvegarde de l'article de blog. add-post.component.ts 文件中的 src/app/models/post.model.ts 导入 Post

<button (click)="addPost()" type="button" class="btn btn-primary">Add</button>

De

modèle.add-post.component.ts 文件中定义 post

import { Post } from '../models/post.model';

dans la variable

. add-post.component.ts 文件中定义 addPost 方法。在 addPost 方法中，您将验证输入的 title 和 description

public post : Post;

dans

et appelez la méthode de service pour appeler l'API REST. La méthode ressemble à ceci : AddPostComponent 创建服务文件。创建一个名为 add-post.service.ts

addPost() {
  if(this.post.title && this.post.description){
  	// call the service method to add post
  } else {
  	alert('Title and Description required');
  }
}

Créons le fichier de service pour le composant

. Créez un fichier appelé add-post.service.ts et ajoutez le code suivant : AddPostService 内，创建一个名为 addPost

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from '../models/post.model';

@Injectable()
export class AddPostService {

    constructor(private http: HttpClient){

	}

}

Méthodes dans

pour effectuer des appels API REST. HttpClient 来进行 API 调用并返回 Observable

addPost(post: Post){
	return this.http.post('/api/post/createPost',{
		title : post.title,
		description : post.description
	})
}

Comme indiqué dans le code ci-dessus, vous utilisez

. add-post.component.ts 文件内的 addPost 方法中，您将从 addPost 方法class="inline">add-post.service.ts

Dans

fichiers. add-post.component.ts

this.addPostService.addPost(this.post).subscribe(res =>{
  	// response from REST API call
});

Voici à quoi ressemble le fichier

 :

import { Component } from '@angular/core';
import { AddPostService } from './add-post.service';
import { Post } from '../models/post.model';

@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.css'],
  providers: [ AddPostService ]
})
export class AddPostComponent {

  public post : Post;

  constructor(private addPostService: AddPostService) {
      this.post = new Post();
  }

  addPost() {
  	if(this.post.title && this.post.description){
  		this.addPostService.addPost(this.post).subscribe(res =>{
  		    console.log('response is ', res)
  		});
  	} else {
  		alert('Title and Description required');
  	}
  }

}

Créez une API REST pour ajouter des publicationsserver/app.js

Créons un point de terminaison d'API REST pour ajouter des articles de blog à une base de données MongoDB. Dans le fichier

, créez un point de terminaison API comme ceci : Mongoose

app.post('/api/post/createPost', (req, res) => {
    // insert the details to MongoDB
})

Tout d'abord, vous devez vous connecter à la base de données MongoDB à l'aide du client

. Post 架构（在 server/model/post.js

mongoose.connect(url, { useMongoClient: true }, function(err){
	if(err) throw err;
	console.log('connection established ');
});

Après avoir établi la connexion, vous devez créer un objet modèle en utilisant

tel que défini dans le fichier). req 对象传入的 title 和 description

const post = new Post({
	title: req.body.title,
	description: req.body.description
})

Comme indiqué dans le code ci-dessus, vous créez un objet Post à l'aide d'une requête de

. save

Appelez la méthode 🎜 sur l'objet Post pour enregistrer l'entrée dans MongoDB. 🎜

post.save((err, doc) => {
	if(err) throw err;
	return res.status(200).json({
		status: 'success',
		data: doc
	})
})

如上面的代码所示，一旦调用 save 方法回调且没有错误，它将返回 success 消息以及返回的对象 doc。

以下是 REST API 端点的最终外观：

app.post('/api/post/createPost', (req, res) => {
    mongoose.connect(url, { useMongoClient: true }, function(err){
		if(err) throw err;
		const post = new Post({
			title: req.body.title,
			description: req.body.description
		})
		post.save((err, doc) => {
			if(err) throw err;
			return res.status(200).json({
				status: 'success',
				data: doc
			})
		})
	});
})

保存上述更改并重新启动 Angular 和 Node 服务器。登录应用程序并尝试添加新的博客文章。单击添加按钮后，检查浏览器控制台，您将记录成功响应。

当博客文章详细信息成功添加到数据库后，您需要关闭弹出窗口。为了关闭弹出窗口，您需要以编程方式单击一个关闭按钮。

您将使用 @ViewChild 装饰器来访问关闭按钮。

在 AddPostComponent 中导入 ViewChild 和 ElementRef。

import { Component, ViewChild, ElementRef } from '@angular/core';

在 AddPostComponent 内，定义以下变量：

@ViewChild('closeBtn') closeBtn: ElementRef;

使用以下代码启动 closeBtn 单击：

this.closeBtn.nativeElement.click();

将上述代码添加到addPost方法的成功回调中。这是 addPost 方法，来自 add-post.component.ts。

addPost() {
  if(this.post.title && this.post.description){
  	this.addPostService.addPost(this.post).subscribe(res =>{
  		this.closeBtn.nativeElement.click();
  	});
  } else {
  	alert('Title and Description required');
  }
}

保存更改并重新启动客户端服务器。登录应用程序并尝试添加新的博客文章。成功保存博客文章详细信息后，弹出窗口将关闭。

刷新博客列表

需要注意的一件事是，新添加的博客文章不会显示在博客文章列表中。所以需要添加一个触发器来通知何时更新ShowPostComponent。您将使用通用服务在两个组件之间进行通信。

在 src/app 文件夹中创建一个名为 service 的文件夹。使用以下代码创建一个名为 common.service.ts 的文件：

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class CommonService {

    public postAdded_Observable = new Subject();

	constructor(){

	}

	notifyPostAddition(){
		this.postAdded_Observable.next();
	}

}

如上面的代码所示，您已声明一个名为 postAdded_Observable 的 Subject 来跟踪添加到数据库中的新博客文章。每当新的博客文章添加到数据库时，您将调用 notifyPostAddition 方法，该方法将通知订阅者有关更新的信息。

在 app.module.ts 中导入 CommonService 并将其包含在 NgModule 提供商列表中。其外观如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ROUTING } from './app.routing';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { RootComponent } from './root/root.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { ShowPostComponent } from './show-post/show-post.component';
import { AddPostComponent } from './add-post/add-post.component';
import { CommonService } from './service/common.service';


@NgModule({
  declarations: [
      RootComponent,
    LoginComponent,
    HomeComponent,
    ShowPostComponent,
    AddPostComponent
  ],
  imports: [
    BrowserModule,
    ROUTING,
    FormsModule,
    HttpClientModule
  ],
  providers: [CommonService],
  bootstrap: [RootComponent]
})
export class AppModule { }

在 show-post.component.ts 文件中导入 CommonService 并在构造方法中初始化。

import { CommonService } from '../service/common.service';

constructor(private showPostService: ShowPostService, private commonService: CommonService) {
      
}

在 ngOnInit 方法内，订阅 postAdded_Observable 变量并加载 getAllPost 方法。以下是 ngOnInit 方法的外观：

ngOnInit(){
    this.getAllPost();

    this.commonService.postAdded_Observable.subscribe(res => {
      this.getAllPost();
    });
}

在 add-post.component.ts 文件中导入 CommonService，并在添加博客文章后调用 notifyPostAddition 方法。以下是 AddPostComponent 中的 addPost 方法的外观：

addPost() {
  if(this.post.title && this.post.description){
  	this.addPostService.addPost(this.post).subscribe(res =>{
  	this.closeBtn.nativeElement.click();
    this.commonService.notifyPostAddition();
  	});
  } else {
  	alert('Title and Description required');
  }
}

保存以上更改并重新启动客户端服务器。登录到应用程序并添加新的博客文章。添加后，博客文章列表将更新为新的博客文章。

总结

在本教程中，您创建了 AddPostComponent 以将博客文章详细信息添加到 MongoDB 数据库。您使用 Mongoose 客户端创建了 REST API，用于将博客文章保存到 MongoDB 数据库。

在本系列的下一部分中，您将实现编辑和更新博客文章详细信息的功能。

本教程的源代码可在 GitHub 上获取。

到目前为止您的体验如何？请在下面的评论中告诉我您的宝贵建议。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!