Angular et MongoDB : ajouter des articles à une application de blog-js tutoriel-php.cn

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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() {
  
  }

}

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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. Angular 和 MongoDB：向博客应用程序添加帖子

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>

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

dans la variable

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

public post : Post;

Copier après la connexion

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

Copier après la connexion

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

	}

}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

< /p>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
	})
})

Copier après la connexion

如上面的代码所示，一旦调用 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
			})
		})
	});
})

Copier après la connexion

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

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

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

在 AddPostComponent 中导入 ViewChild 和 ElementRef。

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

Copier après la connexion

在 AddPostComponent 内，定义以下变量：

@ViewChild('closeBtn') closeBtn: ElementRef;

Copier après la connexion

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

this.closeBtn.nativeElement.click();

Copier après la connexion

将上述代码添加到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');
  }
}

Copier après la connexion

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

刷新博客列表

需要注意的一件事是，新添加的博客文章不会显示在博客文章列表中。所以需要添加一个触发器来通知何时更新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();
	}

}

Copier après la connexion

如上面的代码所示，您已声明一个名为 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 { }

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

ngOnInit(){
    this.getAllPost();

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

Copier après la connexion

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

Copier après la connexion

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