Question

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

我知道这是一个广泛的问题，但是将数据发送到后端需要采取什么步骤？

Answer 1

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

https://www.restapitutorial.com/

您需要创建一个定义数据库模式结构的模型，并通过Rest API对其进行访问，以对数据库模式进行创建/读取/更新/删除（CRUD）操作。

有很多方法可以结构化地创建用于项目需求的Rest API。它基于您的项目基础结构。

1）如果您的后端模块的API被定义为单独的项目，

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

发布方法说明： post（url：字符串，body：任意，选项？：RequestOptionsArgs）：可观察的

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

2）如果您不是后端模块项目，并且需要一个

使用Rest API创建一个项目，该项目定义了将数据插入到数据库中的逻辑。有许多易于使用的框架可用于创建Rest API，使用Express.js的此类框架之一就是Loopback https://v4.loopback.io/getting-started.html。（了解类型脚本是了解此知识的唯一先决条件）

一旦创建了后端（通常是Web层）项目，请按照步骤1插入数据。

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

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

4）如果您不需要单独的后端项目，也不需要框架，则仍可以使用运行Angular的纯node.js创建Rest API。但这可能需要很多样板代码和复杂的编码。

Answer 2

您可以通过简单的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 个答案: