Question

我正在尝试使用post方法将数据发布到json服务器，但是不幸的是我遇到了错误，我的应用程序中有按钮跟随，喜欢等操作，我希望当用户单击时跟随数字增加并保存到json文件中，所以现在当用户单击按钮时，出现以下错误：

注意：我正在使用伪造的json服务器：Fake Json server

Error: Insert failed, duplicate id
    at Function.insert (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash-id\src\index.js:49:18)
    at C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:4374:28
    at arrayReduce (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:683:21)
    at baseWrapperValue (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:4373:14)
    at LodashWrapper.wrapperValue (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:9052:14)
    at create (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\lib\server\router\plural.js:221:52)
    at Layer.handle [as handle_request] (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\route.js:137:13)
    at next (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\route.js:131:14)
    at Route.dispatch (C:\Users\jelly\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\route.js:112:3)
POST /statuses 500 13.873 ms - -

这是服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Status } from '../model/statuses.model';
import { Comment } from '../model/comments.model';
@Injectable({
  providedIn: 'root'
})
export class UserService {
   status: Status[];
  constructor(private http: HttpClient) { }
  statusUrl = 'http://localhost:3000/statuses';
  commentsUrl = 'http://localhost:3000/comments';

  getStatuses() {
    return this.http.get<Status[]>(this.statusUrl);
  }
  addStatus(status: Status) {
   return this.http.post(this.statusUrl, status);
  }
  addComments(comment: Comment) {
    return this.http.post(this.commentsUrl, comment);
  }

}

这是ts文件：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../service/user.service';
import { Status } from '../model/statuses.model';
import { Comment } from '../model/comments.model';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {
 status: Status[];
 comment: Comment[];
  constructor(private formBuilder: FormBuilder, private http: HttpClient, private userService: UserService) { }

  addForm: FormGroup;

  ngOnInit() {
    this.addForm = this.formBuilder.group({
      id: [],
      name: ['', Validators.required],
      city: ['', Validators.required],
      description: ['', Validators.required],
    });
    this.userService.getStatuses()
      .subscribe( data => {
        this.status = data;
        console.log(data);
        console.log(this.status);
      });

  }

  addComments() {
    this.userService.addComments(this.addForm.value)
    .subscribe(data => {
      this.comment.push(this.addForm.value);
    });
  }
  followButtonClick(statusId) {
    const statusToUpdate = this.status.filter(status => status.id === statusId)[0];
    statusToUpdate.followers++;
    statusToUpdate.following++;
    this.persistStatus(statusToUpdate);
    }

    likesButtonClick(statusId) {
      const statusToUpdate = this.status.filter(status => status.id === statusId)[0];
      statusToUpdate.like++;
      this.persistStatus(statusToUpdate);
      }

  persistStatus(status) {
    this.userService.addStatus(status)
    .subscribe(data => {
      this.status = status;
    });

  }
}

这是json文件：

{
  "statuses": [
    {
      "id": 1,
      "statusId": 20,
      "likes": 121,
      "following": 723,
      "followers": 4433
    }
  ]
}

这是模特

export class Status {
    id: number;
    statusId: number;
    like: number;
    following: number;
    followers: number;
}

我的代码在做什么错？

Answer 1

从您使用的伪造json服务器的documentation中，

Id值不可更改。 PUT正文中的任何id值或 PATCH请求将被忽略。只有在POST请求中设置的值被尊重，但前提是尚未采取。

您正在尝试更新现有状态，因此您需要发出看跌期权而不是发布期权。像这样：

updateStatus(status: Status) { 
    return this.http.put(this.statusUrl + '/' + status.id, status); 
}

并在persistStatus函数中使用它。

persistStatus(status) { 
    his.userService.updateStatus(status) 
    .subscribe(data => { 
        this.status = [status]; 
    }); 
}

Json服务器：错误：插入失败，ID重复

1 个答案: