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的评论，我搜索了浏览器中可用的Network工具，然后发现，正如预期的那样，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的评论，我搜索了浏览器中可用的Network工具，然后发现，正如预期的那样，POST请求被忽略了。通过订阅http客户端，POST请求开始被注意到。在下面的问题中，@ KeaganFouche的回答对我有所帮助：Angular 4.0 http put请求

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)});
}

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

1 个答案: