将内容发布到mockapi然后获取它们

Question

我正在尝试实现一个功能，使用

POST

请求将数据提交到我的模拟 API，但在尝试获取我发布的数据时遇到了挑战。我的目标是临时存储发布的数据，然后使用

GET

请求检索它以模拟简单的后端交互。但是，我遇到了以下问题：

1. 数据存储：在发出

   POST

   请求后，我需要帮助正确存储数据。我正在使用模拟 API 设置，但我不确定如何暂时保留这些数据，以便稍后检索。
2. 获取数据：我在实现

   GET

   请求来获取之前发布的数据时遇到问题。我想确保准确获取数据并反映最初发布的内容。
3. 模拟 API：我希望模拟 API 表现得像真正的后端，可以在其中发布数据然后检索数据。我不确定我当前的设置是否正确模拟了这种行为。

我正在寻找有关如何使用

POST

正确存储数据，然后在模拟 API 环境中使用

GET

获取数据的示例或指南。

我想将它们放入容器中

Answer 1

我有这个例子，看一下：

let tit = document.getElementById("tit");
let txt = document.getElementById("txtarea");
let imgUrl = document.getElementById("imgUrl");
let btn = document.getElementById("addb");
let blogsContainer = document.getElementById("blogsContainer");

function renderCard(data) {
    let container = document.createElement('div');
    container.classList.add('col-md-4', 'mb-4');

    let card = document.createElement('div');
    card.classList.add('card');

    if (data.imageUrl) {
        let image = document.createElement('img');
        image.classList.add('card-img-top');
        image.src = data.imageUrl;
        image.alt = 'Blog Image';
        card.appendChild(image);
    }

    let cardBody = document.createElement('div');
    cardBody.classList.add('card-body');

    let title = document.createElement('h5');
    title.classList.add('card-text');
    title.innerText = data.title;

    let content = document.createElement('p');
    content.classList.add('card-text');
    content.innerText = data.blog;

    let deleteBtn = document.createElement('button');
    deleteBtn.classList.add('btn', 'btn-danger');
    deleteBtn.innerText = 'Delete';

    deleteBtn.addEventListener('click', () => {
        fetch(`https://66e7e68bb17821a9d9da6e50.mockapi.io/blog/${data.id}`, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application/json; charset=UTF-8',
            }
        })
        .then(response => response.json())
        .then(() => container.remove());
    });

    cardBody.appendChild(title);
    cardBody.appendChild(content);
    cardBody.appendChild(deleteBtn);
    card.appendChild(cardBody);
    container.appendChild(card);
    blogsContainer.appendChild(container);
}

window.addEventListener('DOMContentLoaded', () => {
    fetch("https://66e7e68bb17821a9d9da6e50.mockapi.io/blog")
        .then(response => response.json())
        .then(data => data.forEach(item => renderCard(item)));
});

btn.addEventListener("click", () => {
    if (tit.value.trim() === "" || txt.value.trim() === "") {
        alert("Title and content are required.");
        return;
    }

    let imageUrlValue = imgUrl.value.trim();

    fetch("https://66e7e68bb17821a9d9da6e50.mockapi.io/blog", {
        method: 'POST',
        body: JSON.stringify({
            title: tit.value,
            blog: txt.value,
            imageUrl: imageUrlValue
        }),
        headers: {
            'Content-type': 'application/json; charset=UTF-8',
        }
    })
    .then(response => response.json())
    .then(data => renderCard(data));

    txt.value = '';
    tit.value = '';
    imgUrl.value = '';
});