将输入数据从 Angular 传递到 NodeJS

Question

我目前正在学习 MEAN 堆栈，我想知道如何将数据从 .html 中的输入传递到我的 nodeJS app.js ?

假设我有一个表格：

register.component.html:

  <form>
    <input type="text" name="surname">
    <input type="text" name="name">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="Register">
  </form>

我希望在提交时调用注册函数:

resister.component.ts :

register(){
    this.http.post('http://localhost:3001/login/' // etc )

  }

所以在我的 app.js 中：

app.post('/register', function(req, res){
    db.collection('users').insertOne({
        prenom : //inputs data,
        nom: //inputs data,
        email : //inputs data,
        password : //inputs data
    })
})

我的问题是：**如何将 .html 中输入的数据传递到 app.js？ **

非常感谢，如果这个问题对你们大多数人来说都是菜鸟，我很抱歉，但我正在学习！

Answer 1

首先，您的表单应应用 two-way 绑定。

<form (ngSubmit)="register()">
    <input type="text" name="surname" [(ngModel)]="input.surname" />
    <input type="text" name="name" [(ngModel)]="input.name" />
    <input type="text" name="username" [(ngModel)]="input.username">
    <input type="password" name="password" [(ngModel)]="input.password" />
    <input type="submit" value="Register">
</form>

备选方案：与 Reactive form 合作。

在组件中，您应该为 input（表单）声明一个对象。将对象传递给 post 并确保您需要 .subsribe() 到 post API 请求并获得返回的响应以进行 success/failure 处理。

同时，根据您的 NodeJS 服务，API URL 应该是“/register”而不是“/login”。

input: any = {
    surname: "",
    name: "",
    username: "",
    password: "",
};

register(){
    this.http.post('http://localhost:3001/register', this.input)
        .subscribe(
            next => {
                // TO-DO Success event
            },
            error => {
                // TO-DO Error event
            });
}

而如果您使用 Reactive 表单，您将需要 FormBuilder 服务和 FormGroup 实例（不涉及太多，因为第一个 link 说明了使用它的流程）。

参考：Angular Post Request Example

不是 Node.JS 开发人员，但您的 back-end 服务实施应该是：

app.post('/register', function(req, res){
    db.collection('users').insertOne({
        prenom : req.body.surname,
        nom: req.body.surname,
        email : req.body.email,
        password : req.body.password
    })
})

从请求正文中获取值。

当然，在将记录保存到数据库之前，您的密码应该作为安全最佳实践进行加密。

将输入数据从 Angular 传递到 NodeJS

Pass input data from Angular to NodeJS

mongodb

node.js

angular