如何将数据保存到JSON服务器

Posted 2021-04-09

我有一个简单的角度6应用程序，我有按钮喜欢和不喜欢，我想将数据保存到JSON服务器（我用作样机）我没有API，

这是我到目前为止所拥有的

html：

<div class="container">
  <div class="row">
    <p class="col">{{numberOfLikes}}</p>
    <button class="col btn btn-success" (click)="likeButtonClick()">Like</button>
    <button class="col btn btn-danger" (click)="dislikeButtonClick()">Dislike</button>
  </div>

</div>

打字稿：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'like-box',
  templateUrl: 'like.component.html',
  styleUrls: [ './like.component.css' ]
})
export class LikeComponent  {
  numberOfLikes : number = 0;

  likeButtonClick() {
    this.numberOfLikes++;
  }

  dislikeButtonClick() {
    this.numberOfLikes--;
  }
}

services.ts：

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

  getStatuses() {
    return this.http.get<Status[]>(this.statusUrl);
  }

  addStatus(){
  }
}

JSON：

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

这是stackblitz的链接：source code

我知道如何使用formBuilder从表单中获取数据，但我现在正在堆栈，

我希望当用户点击像按钮时，喜欢应该保存到json服务器并显示在首页。现在只是显示，因为我不知道如何将生成的那些喜欢保存到json

有人可以帮忙吗？

答案

你不能用模拟服务器做这个，你需要真正的apis。然后你可以调用this.http.post(this.statusUrl, newStatusObject)在真实服务器上创建一个新的状态对象。

编辑使用json-server你可以做到，但你需要更新你的json。只需在状态中添加Id字段：

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

然后你这样更新它：

  const newLikes = { likes: 122 };
  this.http.patch(this.statusUrl, newLikes). subscribe (...

`