Как сохранить данные на JSON-сервере
У меня есть простое приложение 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: исходный код
Я знаю, как получать данные из форм с помощью formBuilder, но сейчас у меня стек,
Я хочу, чтобы, когда пользователь нажимал кнопку «Нравится», лайки сохранялись на json-сервере и отображались на главной странице. сейчас просто отображается, потому что я не знаю, как сохранить эти лайки, сгенерированные в json
Не могли бы вы помочь?
Взгляните на эту статью medium.com/codingthesmartway-com-blog/…
hii dmc, я не хочу сохранять в локальное хранилище, я просто хочу хранить на json-сервере те, которые сгенерированы нажатием кнопки Like, некоторые сказали, что это невозможно, мне нужен какой-либо документ, чтобы понять это, если это правда
@Suryan, спасибо за ссылку, я использую ту же ссылку, все работает с использованием форм, я могу добавлять, удалять данные и т.д., но когда дело доходит до лайков, сгенерированных с помощью кнопки, я не могу создать метод для сохранения этих сгенерированных лайков и сохранения их в json :(
Тогда в этом случае вам просто нужно добавить свойство Like к вашему объекту и отправить его вместе с добавлением данных, как вы сказали, и в случае обновления вам просто понадобится patch для обновления свойства Like.
Можете ли вы показать мне, как добавить это свойство сюда? Я пробовал разными способами, у меня не получалось заставить его работать вот ссылка: stackblitz.com/edit/…
@ user9964622 извините, я понятия не имею о json-сервере, я просто рассказывал вам общий способ сделать это, и вот как это работает ...
спасибо братан за помощь
кто-нибудь, пожалуйста?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы не можете сделать это с помощью фиктивного сервера, вам нужен настоящий 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 (...
`
привет, невозможно просто сохранить данные в json через сервер json и получить их? я могу сохранять данные с помощью конструктора форм, но я не знаю, как это сделать с созданными лайками
Это невозможно, если вы используете внешний фиктивный json-сервер. Это поведение API, а не имитация.
есть какая-нибудь документация по этому поводу? я не могу получить документацию по этой ситуации :(
Это просто другой мир, другой язык для изучения, другая структура и так далее. Angular - это интерфейс, так что просто займитесь интерфейсом или начните учиться делать bakend.
Я немного знаком с бэкэнд-персоналом, но пока хотел бы использовать мокап. поскольку в документации предлагается использовать json-сервер, все работает, я могу сохранять и получать данные, пока я использую формы, но я борюсь с созданными подобиями, я постараюсь, но уверен, что есть способ сделать эту работу :(
Хорошо, я не понял, что вы используете не общий фиктивный сервер, а конкретный, который позволяет вам добавлять и изменять что-то. На этом этапе вам необходимо правильно настроить свой json-сервер. Прежде всего, вам нужно добавить поле Id в объект статуса, затем вы можете вызвать команду put или patch к конечной точке, чтобы обновить лайки.
Позвольте нам продолжить обсуждение в чате.
Вы можете использовать
Type s + enter at any time to create a snapshot of the database
если вы нажали s, затем входить в консоли, когда json-сервер запущен, он сохранит вам новый файл в том же каталоге, что и исходный файл db.
Если вы хотите просто «хранить вещи» для этого одного сеанса браузера, вы можете сохранить свои данные в localStorage, а затем получить их, используя это как макет для внутреннего сервера. developer.mozilla.org/en-US/docs/Web/API/Window/localStorage