用vue写一个登录页面包含封装axios
时间: 2024-02-22 14:29:58 浏览: 28
好的,你可以这样写一个Vue登录页面并包含封装axios:
```
<template>
<div>
<form>
<label>用户名:</label>
<input type="text" v-model="username" required>
<br>
<label>密码:</label>
<input type="password" v-model="password" required>
<br>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在这个Vue组件中,我们定义了一个表单,它包含一个用户名输入框和一个密码输入框,在点击“登录”按钮后,调用了一个名为“login”的方法。在这个方法中,我们使用封装的axios库向服务器发送POST请求,并传递了用户名和密码。在处理服务器响应时,我们在控制台中打印了响应数据或错误。当然,你需要安装axios库并将其导入到这个组件中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)