如何向 Express 应用程序发出 PUT 请求

Question

我正在尝试使用 Angular 和 Node 创建一个 Web 应用程序进行研究，但即使我的 GET 请求有效，我的 PUT 请求也无法正常工作。似乎 Node 忽略了请求，我找不到原因。在我的应用程序中，我尝试在单击按钮时编辑用户的名称，我可以看到请求一直有效，直到它到达 users-service.service.ts 中的 http 客户端。

users.component.html

<router-outlet></router-outlet>
<h3>Usuários</h3>

<table>
<tr><td>Nome</td></tr>
<tr *ngFor="let user of users"><td>{{user.first_name}}</td><td><button    (click)="showUserInfo($event, user)">Editar</button></td></tr>
</table>

<br/><br/>
<div>
<label>First Name: </label><input type="text" value="{{user.first_name}}" (input)="user.first_name = $event.target.value">
<label>Last Name: </label><input type="text" value="{{user.last_name}}" (input)="user.last_name= $event.target.value">
<button (click)="updateUser()">Salvar</button>
</div>

<br/><br/>
<button (click)="loadAllUsers()">Reload</button>

users.component.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { UsersService, User } from './../users-service.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  providers: [UsersService, HttpClient, HttpClientModule],
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.sass']
})
export class UsersComponent implements OnInit {

 private users: User[];
 private user: User = {first_name: '', last_name: '', id: null};

  constructor(private service: UsersService) {
    this.loadAllUsers();
  }

  ngOnInit() {}

  showUserInfo(event, u : User) {
    this.user = u;
  }

  loadAllUsers() {
    this.service.getAllUsers().subscribe(valor => { this.users = valor as User[] });
   } 

  updateUser() {
    console.log(this.user);
    this.service.updateUser(this.user);
  }
}

users-service.service.ts

import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';


export interface User{
    first_name: string,
    last_name: string,
    id: number
}

@Injectable()
export class UsersService{

  constructor(private http: HttpClient) { }

  getAllUsers(): Observable<User[]>{
    return this.http.get<User[]>("http://localhost:4600/api/users");
  }

  updateUser(user: User): Observable<void>{
    console.log('Updating: ' + user);
    console.log("http://localhost:4600/api/users/" + user.id);
    return this.http.put<void>("http://localhost:4600/api/users/" + user.id, user);
  }
}

server.js

const express = require('express');
app = new express();
const morgan = require('morgan');
const cors = require('cors');
const mysql = require('mysql');
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(morgan('dev'));
app.use('*', cors());

app.listen(4600, () => {
     console.log("Server listening on port 4600...");
});

//All users
app.get("/api/users", (req, res) => {
    let connection = getConnection();

    connection.query('SELECT * FROM USERS', (err, result) => {
        if(err){
            throw err;
        }
        console.log(result);
        res.json(result);
    });
});

//Specific user
app.get('/api/users/:id', (req, res) => {
    getConnection().query('SELECT * FROM USERS WHERE ID = ?', req.params.id, (err, result) => {
        if(err){
            console.log(err.message);
            throw err;
        }
        res.json(result);
    });
});

//Update user
app.put("/api/users/:id", (req, res) => {
    console.log('PUT request received...');
    getConnection().query("UPDATE USERS SET FIRST_NAME = ?, LAST_NAME = ? WHERE ID = ?", [req.body.first_name, req.body.last_name, req.body.id],     (err, result) => {
        if(err){
            console.log(err.message);
            throw err;
        }
        res.send(201, req.body); 
    });
});

//Delete user
app.delete('/api/users/:id', (req, res) => {



});

function getConnection(){
    return mysql.createConnection({
        host: 'localhost',
        user: '',
        password: '',
        database: 'test'
    }); 
}

编辑 1

根据@tadman 评论，我搜索了浏览器中可用的网络工具，我发现，正如预期的那样，POST 请求被忽略了。通过订阅 http 客户端，POST 请求开始得到应有的注意。 @KeaganFouche 在下面的问题中的回答帮助了我： Angular 4.0 http put request

Angular 服务中的新更新方法：

updateUser(user: User): void{
    console.log('Updating: ' + user);
    console.log("http://localhost:4600/api/users/" + user.id);
     this.http.put<void>("http://localhost:4600/api/users/" + user.id, user).subscribe((response) => {console.log(response)});
}

Answer 1

根据@tadman 评论，我搜索了浏览器中可用的网络工具，我发现，正如预期的那样，POST 请求被忽略了。通过订阅 http 客户端，POST 请求开始得到应有的注意。 @KeaganFouche 在下面的问题中的回答帮助了我：Angular 4.0 http put request

Angular 服务中的新更新方法：

updateUser(user: User): void{
    console.log('Updating: ' + user);
    console.log("http://localhost:4600/api/users/" + user.id);
     this.http.put<void>("http://localhost:4600/api/users/" + user.id, user).subscribe((response) => {console.log(response)});
}