Json 服务器返回 404 并带有 "put" 或 "patch" ，"get"工作正常

Question

我在浏览器中通过几个输入来更改组件内部服务器的信息(skills: SkillSet[])。我想用两个按钮决定是否更新服务器与这些变化。无法使saveChanges函数工作

技能组件保存更改功能:

saveChanges(): void {
this.editMode = false;
this.skillsService.saveChanges(this.skills).subscribe();
}

技能服务保存更改功能:

// Update changes made by the component
saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
console.log(skills); // Proof the array is returning with the edits.
return this.http.patch<SkillSet[]>(
this.skillsUrl,
skills,
this.httpOptions
);
}

使用按钮时，控制台响应PATCH http://localhost:5000/skills 404(未找到)它也不能与put一起工作。url可以工作，否则模板一开始就无法获取数据。网络/获取/XHR如果需要更多的信息，请告诉我。

——所有代码——

技能界面

export interface SkillSet {
id: number;
type: string;
title: string;
description: string;
tools: string[];
}

Skills组件(整个代码):

import { Component, OnInit } from '@angular/core';
import { SkillSet } from 'src/app/interfaces/skill-set';
import { SkillsService } from 'src/app/services/skills.service';
@Component({
selector: 'app-skills',
templateUrl: './skills.component.html',
styleUrls: ['./skills.component.scss'],
})
export class SkillsComponent implements OnInit {
login: boolean = true;
editMode: boolean = false;
skills: SkillSet[] = [];
newTool: string = '';
constructor(private skillsService: SkillsService) {}
ngOnInit(): void {
this.getSkills();
}
getSkills() {
this.skillsService
.getSkills()
.subscribe((skills) => (this.skills = skills));
}
// Edition functions of this section
addTool(skillSet: SkillSet, tool: string) {
if (tool) {
skillSet.tools.push(tool);
}
}
deleteTool(skillSet: SkillSet, tool: string) {
skillSet.tools = skillSet.tools.filter((t) => t !== tool);
}
// Changes menu
editStart() {
this.editMode = true;
console.log('Editing skills');
}
saveChanges(): void {
this.editMode = false;
this.skillsService.saveChanges(this.skills).subscribe();
}
cancelChanges() {
this.editMode = false;
this.getSkills();
}
}

Skills服务(整个代码):

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { SkillSet } from '../interfaces/skill-set';
@Injectable({
providedIn: 'root',
})
export class SkillsService {
private skillsUrl = 'http://localhost:5000/skills';
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
};
constructor(private http: HttpClient) {}
getSkills(): Observable<SkillSet[]> {
return this.http.get<SkillSet[]>(this.skillsUrl);
}
// Update changes made by the component
saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
console.log(skills); // Proof the array is returning with the edits.
return this.http.patch<SkillSet[]>(
this.skillsUrl,
skills,
this.httpOptions
);
}
}

Answer 1

使用JSON-Server，每次http调用只能更新1项。通常你会这样使用它:

http.patch(`{this.url}/{idToUpdate}`, bodyWithUpdate)

如果Item是一个完整的结构，那么你可以更新完整的结构，但从它的外观来看，你没有。

要么改变json服务器返回的结构，要么在技能集中找到改变的项目，并多次调用补丁请求。

像这样:

skills.forEach((skill)=>{
if (skill.changed){
http.patch(`{this.url}/{skill.id}`, skill);
}
})