Question

我正在使用Webpack作为模块捆绑器，并使用json：server作为模拟后端来开发CRUD应用程序。所有其他操作均正常运行，但更新将未定义的字段填充。因此，如果帖子如下...

Post 1

content for post 1

如果我尝试对其进行编辑，它将以字面形式显示为...

Undefined

Undefined

我不确定我在哪里出错了，但是我认为这是范围问题。我不是正确地引用了某些内容，或者我需要重新考虑一组花括号。至少我是这样认为的。

在我的 http.js 文件中，放置请求与所有其他请求（发布，放置，删除，获取）一起位于HTTP类中

...
    // Make an HTTP PUT Request
    async put(url, data) {
        const response = await fetch(url, {
            method: 'PUT',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(data)
        });

        const resData = await response.json();
        return resData;
    }

...

以上代码已导出到处理提交帖子功能的 app.js 文件中。

...
function submitPost() {
    const title = document.querySelector('#title').value;
    const body = document.querySelector('#body').value;
    const id = document.querySelector('#id').value;

    const data = {
        title,
        body
    }

    // Validate input
    if (title === '' || body === '') {
        ui.showAlert('Please fill in all fields', 'alert alert-danger');
    } else {
        // Check for ID
        if (id === '') {
            // Create Post
            http.post('http://localhost:3000/posts', data)
                .then(data => {
                    ui.showAlert('Post added', 'alert alert-success');
                    ui.clearFields();
                    getPosts();
                })
                .catch(err => console.log(err));
        } else {
            // Update Post
            http.put(`http://localhost:3000/posts/${ id }`, data)
                .then(data => {
                    ui.showAlert('Post updated', 'alert alert-success');
                    ui.changeFormState('add');
                    getPosts();
                })
                .catch(err => console.log(err));
        }

    }
}
...

据我所知，从ui模块导入的ui函数都正常工作。 getPosts也可以工作，但是如果有必要查看该文件或HTML文件，我将很乐意提供。任何帮助将不胜感激。

编辑：

更新后的json文件显示如下。 ID为2的帖子曾经有类似帖子之后的内容。

...
"posts": [
    {
      "id": 2
    },
    {
      "id": 3,
      "title": "Post Three",
      "body": "This is post three."
    },
...

Answer 1

由于@DDupont，我得以找到我出了错的地方。 HTTP PUT请求的标头中非常简单的粗心错字。

"Content-type": "application.json"

我在那里呆了一段时间。应该是...

"Content-type": "application/json"

如何在CRUD应用程序中正确更新

1 个答案: