如何从角度组件使用我的节点端点插入数据？

Posted 2023-03-11

【中文标题】如何从角度组件使用我的节点端点插入数据？

【英文标题】：How to insert data with my node endpoint from an angular component?

【发布时间】：2019-09-19 13:37:07

【问题描述】：

我对 Angular 很陌生，我正在尝试设计一个简单的网页。我在 node.js 中准备好了我的后端。现在我创建了一个端点，我将数据插入到我的数据库中。它基本上是创建帖子的端点。

这是我的猫鼬模式：

const trackingPostSchema = new Schema(
    uuid: 
        type: String,
        unique: true,
      ,
    post: [
        foodUuid: String,
        pictureUrl: String,
        foodName: String,
        description: String,
        calories: Number,
        eatenAt: 
            type: Date,
            default: Date.now()
        ,
        mealTime: String, //breakfast, lunch, dinner
    ],
  );

我正在尝试使用此组件插入数据：

<nz-card style="width:300px;" nzTitle="Track what you ate today!">

  <div class="content">

    <input nz-input placeholder="Food Name" [(ngModel)]="foodName" style="max-width: 100px; min-width: 100px;" class="data"/>

    <input nz-input placeholder="Food Description" [(ngModel)]="description" style="max-width: 200px; min-width: 100px;" class="data"/>

    <label for="calories" style="margin-left: 10px">Calories: </label>
    <nz-input-number [(ngModel)]="calories" [nzMin]="1" [nzMax]="10000" [nzStep]="1" style="min-width: 100px;" class="data" id="calories"></nz-input-number>

    <nz-select
        style="width: 100px;"
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="Select a meal time"
        [(ngModel)]="mealTime"
        class="data"
      >
        <nz-option nzLabel="Breakfast" nzValue="Breakfast"></nz-option>
        <nz-option nzLabel="Lunch" nzValue="Lunch"></nz-option>
        <nz-option nzLabel="Dinner" nzValue="Dinner"></nz-option>
    </nz-select>

    <button nz-button nzType="primary" class="data">Post</button>

  </div>

</nz-card>

我知道这是一个广泛的问题，但我需要遵循哪些步骤才能将此数据发送到我的后端？

【参考方案1】：

您可以通过一个简单的 http 请求将数据发送到后端。你需要攻击一个点击处理程序到你的POST 按钮，它将调用一个函数。该函数可以将值作为对象发送到后端。

在 component.html 文件中，执行以下操作： <button nz-button nzType="primary" (click)="sendDataToBackend()" class="data">Post</button>

在 component.ts 文件中，这样做：

import HttpClientModule, HttpClient, HttpHeaders from '@angular/common/http';

httpOptions = 
headers: new HttpHeaders(
  'Content-Type': 'application/json'
  //'Authorization': 'Bearer ' + YOUR_AUTHENTICATION_TOKEN // Enable this if using authentication
)
;

在你的component.ts文件的类中，创建一个函数sendDataToBackend：

sendDataToBackend()
this.http.post(YOUR_ENDPOINT,foodName, description,calories,mealTime , 
this.httpOptions).toPromise().then((res) => console.log(res));

【参考方案2】：

基本上，您可能需要 Rest API 来从前端到后端进行通信。

https://www.restapitutorial.com/

您需要创建一个模型来定义您的数据库架构的结构，并通过 Rest API 访问该模型以对您的数据库架构执行创建/读取/更新/删除 (CRUD) 操作。

有很多方法可以根据项目需求从结构上创建 Rest API。它基于您的项目基础架构。

1) 如果您有一个带有 API 的后端模块被定义为一个单独的项目，

您可以编写一个中间件组件，使用 http.Post 函数导入 angular 的 HTTP 模块。

发布方法说明： post(url: string, body: any, options?: RequestOptionsArgs) : Observable

有关 Angular HTTP 的更多详细信息：https://angular.io/guide/http

2) 如果您没有后端模块项目，并且需要一个

使用 Rest API 创建一个项目，该项目定义了将数据插入数据库的逻辑。 有许多现成的框架可以创建 Rest API，其中一个使用 Express.js 的框架是 Loopback https://v4.loopback.io/getting-started.html。 （了解字体脚本是学习这个的唯一前提）

创建后端（一般来说是网络层）项目后，按照步骤 1 插入数据。

还有许多其他现成的框架可以在不同的技术上创建您的 Rest API。您可以根据自己的堆栈选择一个。

3) 如果您不想要一个单独的后端项目，请将 Rest API 节点模块安装到您的 Angular 项目中（著名的结构化模块是 express.js）并创建 Rest API 以连接到您的数据库。按照步骤 1 通过调用这些 API 插入数据。

4) 如果您不想要一个单独的后端项目，也不想要一个框架，您仍然可以使用运行 Angular 的普通 node.js 来创建 Rest API。但它可能需要大量的样板和复杂的编码。