我们如何在Vue.js中使用POST Axios永久添加新用户？

Question

我编写了使用axios POST添加新用户的代码，并在使用Axios POST添加新用户后设法在UI上立即显示新用户。我用来发布并获取用户的URL是http://jsonplaceholder.typicode.com/posts。但是，我看不到http://jsonplaceholder.typicode.com/posts中存在的用户列表中添加的新用户。

下面是我的POST axios代码。

Vue文件中的HTML部分：

<template>
  <div id = "app">
    <h1>This is the Dashboard"</h1>

    <!-- This is the code for taking in a username/title in a text box. This username/title will the data sent using the post request-->
    <input v-model="newUser" placeholder="edit me" @keyup.enter="addUser">
        <p>Message is: {{newUser}}</p>

    <!--Displaying the titles on the UI after the axios get request is processed-->
    <ul id="displaying">
    <li v-for="post in posts" :key="post.id">{{post.title}}
    </li></ul>
  </div>
</template>

J参与Vue：

<script>
import axios from 'axios';

export default {

  name: "app",

  data(){
        return{
            posts: [],
            newUser:'', 
        };
    },

  created(){
      this.function();
  },

  methods:{
    function(){
        axios.get('http://localhost:8080/posts')
        .then(response => this.posts = response.data)
        .catch(error => this.posts = error.data);
    },
    addUser(){
      axios.post("http://localhost:8080/posts", {

        title: this.newUser
      })
      .then((response) => {
        console.log(response.data);
        this.posts.push(response.data);
        this.newUser=""
      });
    }    
  }  
}
</script>

我从http://jsonplaceholder.typicode.com/posts获取标题列表后，可以在UI /仪表板上看到添加的新用户或标题。但是我看不到它添加到http://jsonplaceholder.typicode.com/posts的列表中。我们如何使用Vue.js实现这一目标？

下面是添加具有特定标题的新用户后的仪表板结果。

[图像1：使用titlw添加新用户-“ Hello World”

图2：您可以看到“ Hello World”作为新用户之一显示在列表的末尾（此列表是使用GET Axios请求显示的）。但是，我看不到http://jsonplaceholder.typicode.com/posts中的Hello World用户之一。

Answer 1

JSONPlaceholder服务不允许您修改其服务器上的数据（请参见the guide中的注释）。 POST请求将收到成功响应，但是新数据将不会添加。