Express 无法从后端读取未定义的属性'name'

Question

我正在尝试使用Node JS和Angular（Material UI）开发全栈应用程序。

我遇到了以下问题。

我正在制作一个小型的Web资源管理应用程序。 我目前正在将数据注册并发送到Mysql数据库中。

我遇到了以下错误：

TypeError：无法读取未定义的属性“name”

以下是我的代码：

const express = require('express');
const app = express();
var cors = require('cors');
var mysql      = require('mysql');
const body = require("body-parser");

var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'totale',
});

app.use(cors());

app.get('/', function (req, res) {
  res.send('Hello World!');
  console.log(req);
});

app.get("/inscription",(req,res)=>{
  var nom = req.body.name;
  var prenom = req.body.prenom;
  var mail = req.body.email;
  var password = req.body.password;
  connection.connect();
  connection.query('INNSERT INTO inscription set nom = ?, prenom = ? ,mail = ? ,password = ? ',[nom,prenom,mail,password],function(err, rows) {
    if (err) throw err;
    console.log('The solution is: ', rows[0].solution);
    });
  //res.send('iok');
  //connection.end();
});


app.listen(3000, function () {
  console.log('app listening on port 3000!');
});

这是我的代码：TypeScript

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { User } from './../User';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {tap} from 'rxjs/operators';


@Component({
  selector: 'app-inscription',
  templateUrl: './inscription.component.html',
  styleUrls: ['./inscription.component.css']
})

export class InscriptionComponent implements OnInit {
  signupForm;
  results;
  //email = new FormControl('', [Validators.required, Validators.email]);

  constructor (private http: HttpClient, private formBuilder: FormBuilder)
  {}
  ngOnInit() {
    this.signupForm = this.formBuilder.group({
      email:"",
      name: "",
      lastname: "",
      password : "",
    });
  }
  public onFormSubmit() {

    const configUrl = 'http://localhost:3000/inscription';

    this.http.post(configUrl,this.signupForm.value)
    .pipe(
      tap(
        data => console.log(configUrl, data),
        error => console.log(configUrl, error)
      )
    )
    .subscribe(results => this.results = results);
 }
}

- abdel

---

app.get("/inscription")，应该是post而不是get。 - Hameed Syed

Answer 1

您需要更改

标签。

app.get("/inscription",(req,res)=>{

至

app.post("/inscription",(req,res)=>{

- Subburaj

---

谢谢您的回复，但错误仍然存在，我不理解。 - abdel

Answer 2

你需要使用body parser来获取请求正文对象。

app.use(cors());
app.use(express.json()); //Used to parse JSON bodies  Express 4.16+

你需要使用POST方法。

app.post("/inscription",(req,res)=>{
 ...
}

阅读更多关于此 这里的内容

- Muhammed Albarmavi

Answer 3

你需要添加

。

app.use(body.urlencoded({ extended: false }));
app.use(body.json());

在 app.use(cors()); 之后。

- ItsMyLife

Answer 4

它可以工作，但我不明白为什么这一次我无法恢复表单数据

<form [formGroup]="signupForm" class="example-form" (ngSubmit)="onFormSubmit(signupForm)"   novalidate>
  <mat-form-field class="example-full-width">
    <input type="text" ngModel id='email' name='email' matInput placeholder="Enter your email"/>
  </mat-form-field>

  <mat-form-field class="example-full-width">
          <input type="text" ngModel id='name' name='name' matInput placeholder="Nom">
  </mat-form-field>



  <mat-form-field class="example-full-width">
           <input  type="text" ngModel id='lastname' name='lastname' matInput placeholder="Prenom" >
  </mat-form-field>


  <mat-form-field class="example-full-width">
          <input type="text" ngModel id='password' name='password' type="password" matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">

          </button>
  </mat-form-field>


  <div class="example-button-row">
    <button type="submit" mat-raised-button>Inscription</button>
  </div>
</form>

- abdel