Angular ブログ チュートリアル シリーズの前の部分では、ホームページにブログ投稿のリストを表示する ShowPostComponent
を作成する方法を学びました。作成した REST API エンドポイントを使用して、MongoDB シェルから挿入されたレコードを取得しました。
このチュートリアルでは、AddPostComponent
という名前の新しいコンポーネントを作成し、新しいブログ投稿を MongoDB データベースに追加するためのユーザー インターフェイスを提供します。
使い始める
このチュートリアル シリーズの前の部分からソース コードを複製することから始めましょう。
リーリープロジェクト ディレクトリに移動し、必要な依存関係をインストールします。
リーリー依存関係をインストールした後、クライアント アプリケーションとサーバー アプリケーションを再起動します。
リーリーブラウザで http://localhost:4200 を指定すると、アプリケーションが実行されるはずです。
追加ポストコンポーネントの作成
AddPostComponent
の作成を開始しましょう。 src/app
フォルダー内に add-post
という名前のフォルダーを作成します。 add-post
フォルダーに add-post.component.ts
という名前のファイルを作成し、次のコードを追加します。
リーリー
add-post.component.html という名前のファイルと次の HTML コードを作成します:
リーリー
次に、
AddPostComponent を
NgModule に追加する必要があります。
app.module.ts ファイルに
AddPostComponent をインポートします。
リーリー
NgModule
declarations リストに追加します。その外観は次のとおりです:
リーリー
home.component.html のボタンに
data-target 属性を追加しました。
リーリー
Add リンクをクリックします。 AddPostComponent がポップアップとして表示されます。
ngModel ディレクティブを
title と
description の入力要素に追加します。
リーリー
click 命令を追加して、ブログ投稿を保存するメソッドを呼び出します。
リーリー
add-post.component.ts ファイルの
src/app/models/post.model.ts から
Post モデルをインポートします。
リーリー
ファイルで post
変数を定義します。
リーリー
add-post.component.ts
addPost メソッドを定義します。
addPost メソッドでは、入力された
title と
description を検証し、サービス メソッドを呼び出して REST API を呼び出します。方法は次のとおりです。
リーリー
コンポーネント
AddPostComponent
add-post.service.ts という名前のファイルを作成し、次のコードを追加します:
リーリー
AddPostService
addPost という名前のメソッドを作成します。
リーリー
上記のコードに示すように、
HttpClient
Observable を返します。
add-post.component.ts
ファイル内の
メソッドでは、addPost
メソッド class="inline"> からサブスクライブします。 -post.service.ts ファイルを追加します。
リーリー
add-post.component.ts
ファイルは次のようになります:
リーリー
MongoDB データベースにブログ投稿を追加するための REST API エンドポイントを作成しましょう。
server/app.js
まず、
Mongoose クライアントを使用して MongoDB データベースに接続する必要があります。
リーリー
接続を確立した後、
スキーマ (server/model/post.js
ファイルで定義) を使用してモデル オブジェクトを作成する必要があります。
上記のコードに示すように、リクエスト req
オブジェクトから渡された title
と
を使用して Post オブジェクトを作成します。
Post オブジェクトの save
メソッドを呼び出して、エントリを MongoDB に保存します。
<pre class='brush:php;toolbar:false;'>post.save((err, doc) => {
if(err) throw err;
return res.status(200).json({
status: 'success',
data: doc
})
})
</pre>
<p>如上面的代码所示,一旦调用 <code class="inline">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 上获取。
到目前为止您的体验如何?请在下面的评论中告诉我您的宝贵建议。
以上がAngular と MongoDB: ブログ アプリケーションへの投稿の追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
