Vue.js Axios和vue资源放置方法不起作用

我在前端VueJ和后端java上都有。在一个组件中，我从数据库中获取用户

Users.vue

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

在这里，我仍然使用v-for将所有用户带到另一个组件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上按下save按钮时编辑的内容，我的请求不会进入服务器

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

---

如果我不编辑用户，我在代码中会犯什么错误？

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

从restapitutorial.com/lessons/httpmethods.html：

示例：

邮递 放

---

您应该决定使用axios或vue资源-我更喜欢axios，因为vue资源将不会进一步开发。put通常是对现有实体的完全更新/替换。无法将put放入/user端点，因为put将用于现有实体。使用post创建一个新的。如果您遵循默认的rest行为，我也尝试过post，但仍然没有。我仍然知道，Axios或vue资源现在已经不重要了，我的朋友，因为我看到了witch one如何在创建用户、发布和带来用户方面发挥作用。但是对于编辑用户，它们都不起作用。如果在控制器中看不到您的路由定义和/或相应的代码，很难判断问题出在哪里，我也用id尝试了my friend，但数据仍然无法使用新值editsend:。axios.put'/user/'+this.$route.params.id，this.userinfo我能想到的另一件事是定义两个头对象，如下所示：{'headers'：{'X-AUTH-TOKEN'：localStorage.TOKEN}，{'headers'：{'Content-Type'：'application/json'}。我认为您需要像这样传递1个headers对象：{'headers'：{'X-AUTH-TOKEN'：localStorage.TOKEN，'Content-Type'：'application/json'}。如果这不是问题的话，我真的看不到客户端或服务器端的错误日志。使用axios，我在控制台中不会看到任何关于成功或错误、put或post的信息。有了这个。$http资源，我得到了post，并把错误放在了：Response{url:/user/46，ok:false，status:0，statusText:，headers:headers，}好的，我能做的最后一件事就是给你一些通用的指针，希望它能起作用。1使用axios，而不是vue资源。VueJS团队实际上建议使用axios。2检查控制台中的选项卡网络，查看是否发出请求，以及它给出的响应代码。3使用类似于向后端发送put请求的工具。通常，使用代码之外的东西至少可以帮助您正确地处理请求。通过这种方式，您可以确定客户端存在错误，并从那里修复错误。正如我在上面所说，我的朋友axios.post添加新用户效果良好：axios.post'/user'，this.userInfo`，{'headers'：{'X-AUTH-TOKEN'：localStorage.TOKEN}，{'headers'：{'Content-Type'：'application/json'}。但对于put，在网络中，用户名的值与新用户名的值相同。