如何使用 Axios（VueJS、Nuxt）制作 .post答案

【问题标题】：How to make a .post with Axios (VueJS, Nuxt)如何使用 Axios（VueJS、Nuxt）制作 .post
【发布时间】：2020-12-02 16:40:40
【问题描述】：

我是网络开发的新手。想问一下如何用Axios用Nuxt创建.post。

我只需要一个向 NodeJS 应用程序发送三个输入的按钮。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Email:</strong>
                        <input type="text" class="form-control" v-model="email">
                        <strong>Password:</strong>
                        <input type="text" class="form-control" v-model="password">
                        <button class="btn btn-success">Submit</button>
                  </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
       return {
         name: '',
         email: '',
         password: ''
       };
    },

    methods: {
       //Would like to use the button to do this:
      async sendData () {
        await this.$axios.get('insert', {
          name: this.name, 
          email: this.email,
          password: this.password })
      }
     }
  }
</script>

感谢您的帮助。

【问题讨论】：

标签： vue.js axios nuxt.js

【解决方案1】：

您也可以在本地将 axios 导入到您的组件中并以这种方式使用它：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                      <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Email:</strong>
                        <input type="text" class="form-control" v-model="email">
                        <strong>Password:</strong>
                        <input type="text" class="form-control" v-model="password">
                        <button class="btn btn-success">Submit</button>
                      </form>
                  </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    };
  },

  methods: {
    //Would like to use the button to do this:
    async formSubmit() {
      await axios.post('route/url', {
        name: this.name, 
        email: this.email,
        password: this.password
      })
      .then(response => {
        console.log(response)
      })
      .catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

不要忘记调用formSubmit 方法来实际发出POST 请求。

此外，您的表单似乎没有结束标记</form>。

【讨论】：

谢谢，是的，我显然需要更多的练习。

【解决方案2】：

提交侦听器应该调用该方法：

<form @submit="sendData">

为了发送POST 请求：

this.$axios.post('insert', {
          name: this.name, 
          email: this.email,
          password: this.password 
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

欲了解更多信息，您可以访问their page。

【讨论】：