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

Posted 2023-02-22

【中文标题】如何使用 Axios（VueJS、Nuxt）制作 .post

【英文标题】：How to make a .post with Axios (VueJS, Nuxt)

【发布时间】：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>

感谢您的帮助。

【参考方案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。