vue+axios如何写登录注册
时间: 2023-12-24 17:02:07 浏览: 28
使用Vue和Axios实现登录和注册功能的步骤如下:
1. 创建Vue实例,引入Axios库
```javascript
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$http = axios;
```
2. 创建登录和注册组件
```javascript
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<h2>注册</h2>
<form @submit.prevent="register">
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<input type="text" v-model="email" placeholder="邮箱">
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
email: ''
}
},
methods: {
login() {
this.$http.post('/api/login', {
username: this.username,
password: this.password
}).then(response => {
// 登录成功
console.log('登录成功', response.data);
}).catch(error => {
// 登录失败
console.error('登录失败', error);
});
},
register() {
this.$http.post('/api/register', {
username: this.username,
password: this.password,
email: this.email
}).then(response => {
// 注册成功
console.log('注册成功', response.data);
}).catch(error => {
// 注册失败
console.error('注册失败', error);
});
}
}
}
</script>
```
以上代码中,创建了一个包含登录和注册表单的Vue组件,通过v-model指令绑定表单元素的值,使用Axios发送POST请求来提交用户的登录信息和注册信息。
注意,在实际应用中,需要根据具体情况进行修改。