Axios和vue-resource put方法不起作用。

Question

我有前端vuejs和后端java。在一个组件中，我将用户从数据库中带来。

Users.vue

getUsers() {
  this.$http.get("/user")
    .then((response) => {
      this.users = response.data.users;
    })
}

在这里，我仍然使用v将所有用户引入到另一个组件User.vue中。

<app-user v-for="user in users" :user="user" :key="user.index"></app-user>

在用户组件中，我有一个路由器链接，它带我到另一个页面，在那里我可以编辑用户名。

User.vue

 <p class="user-name">{{user.firstName}}</p>
 <router-link :to="'/users/edit-user/'+user.id">
    <a ><i class="ti-pencil-alt" aria-hidden="true"></i></a>
 </router-link>

EditUser.vue

    <template>
      <input type="text" :value="user.firstName" v-model="userInfo.firstName">
    </template>
    <script>
    export default {
      data() {
        return {
          user: {},
          userInfo: {
            firstName: '',
          }
        }
      },
      created() {
        this.getUsers();
      },
      methods: {
        getUsers() {
          this.$http.get("/user/" + this.$route.params.id)
            .then((response) => {
              this.user = response.data;
            })
        },
        updateUser() {
          axios.put('/user', this.userInfo,  
            {'headers':{'X-AUTH-TOKEN':localStorage.token}},
            {'headers':{'Content-Type': 'application/json'}})
          .then((response) => {
            console.log("Success! You edited the user"); 

          })
          .catch((response) => {
            console.log('Error in edit');
          })
        }
      },
    }
    </script>

一个月前，我开始学习vuejs，但仍然必须学习:)。

在输入中，我使用:value="user.firstName"来为已经存在的firstName带来值。我尝试使用v-model="userInfo.firstName"来获取userName的新值，但是当我将其放入时，已经存在的值将从输入中消失。

用post保存数据可以很好，但只能使用axios。我不知道为什么post不适用于vue资源。所以我也尝试了使用axios，但是当我按下保存按钮时，在EditUser.vue上，我的请求不会转到服务器。

我这么说是因为我看到在后端我没有任何错误，什么也没有，但是如果我使用post或get，我可以获得或保存用户。

在我的代码中，如果我不编辑用户，我会做什么？

Answer 1

您的axios实现似乎没有什么问题。在我看来，你是在向一般/用户/路线更新。这适用于post，因为还没有用户id，因此将创建一个新的id。但是，如果使用PUT，则确实存在用户id。因此，我认为您应该将端点修改为/user/:userid，而不仅仅是/user。希望这能帮上忙。

来自restapitutorial网站com/lessons/httpmethods.html：

示例：

• POST http://www.example.com/customers
• 放置http://www.example.com/customers/12345