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

【问题标题】：How to save data to JSON server如何将数据保存到 JSON 服务器
【发布时间】：2019-03-30 14:18:13
【问题描述】：

我有一个简单的 Angular 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

有人可以帮忙吗？

【问题讨论】：

如果您只想为这个浏览器会话“存储东西”，您可以将数据存储在 localStorage 中，然后检索它，将其用作后端服务器的模拟。 developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
看看这篇文章medium.com/codingthesmartway-com-blog/…
hii dmc，我不想保存到本地存储我只想将那些通过单击喜欢按钮生成的喜欢存储在 json 服务器中，有人说这是不可能的，我需要任何文档来理解这一点，如果它真的
@Suryan 感谢链接我使用相同的链接，使用表单输入一切正常，我可以添加、删除数据等，但是当涉及使用按钮生成的喜欢时，我无法创建保存方法那些生成的喜欢并将它们保存到 json :(
@user9964622 对不起，我对 json 服务器一无所知，我只是告诉你这样做的通用方式，这就是它的工作原理......

标签： javascript typescript angular6 typescript2.0 json-server

【解决方案1】：

你不能用模拟服务器来做到这一点，你需要真正的 api。然后你可以打电话 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 (...

【讨论】：

hii，不可能通过json服务器将数据保存到json并检索它吗？能够使用表单生成器保存数据，但我不知道如何处理生成的喜欢
这是不可能的，只要您使用的是外部模拟 json 服务器。这是 API 的行为，而不是模拟。
是否有相关文档？我无法获得有关这种情况的文档:(
那只是另一个世界，另一种要学习的语言，另一种框架等等。 Angular 是前端的东西，所以只做前端，或者开始学习如何做面包
我对后端工作人员有点了解，但我现在想使用模拟。正如文档建议使用 json 服务器，一切正常，只要我使用表单，我就能够保存和获取数据，但我正在为此苦苦挣扎，我会尝试，但我确信有办法使这项工作:(

【解决方案2】：

你可以使用

Type s + enter at any time to create a snapshot of the database

如果您按下 s 然后在 json-server 运行时在控制台中按 enter，它将在与原始 db 文件相同的目录中保存一个新文件。

console log

【讨论】：