vue使用axios发送post请求的一个案例
时间: 2023-11-27 18:57:57 浏览: 72
好的,以下是一个使用axios发送post请求的vue案例:
```vue
<template>
<div>
<form @submit.prevent="submitForm">
<label>用户名:</label>
<input type="text" v-model="username" />
<br />
<label>密码:</label>
<input type="password" v-model="password" />
<br />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submitForm() {
axios
.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
在上面的代码中,我们使用axios发送一个POST请求到`/api/login`路径,并且将用户名和密码作为请求体发送。
当表单提交时,`submitForm`方法将被调用。在这个方法中,我们使用axios发送POST请求,并且传递一个包含用户名和密码的对象作为请求体。如果请求成功,我们将打印响应对象到控制台。如果请求失败,我们将打印错误对象到控制台。
注意,在实际开发中,我们需要根据后端API的要求来设置请求头、请求体等参数。
阅读全文