帮我编写一个vue2的登录注册代码
时间: 2024-03-14 22:43:50 浏览: 15
好的,下面是一个简单的 Vue2 登录注册代码:
```
<template>
<div>
<h3>{{ isLogin ? '登录' : '注册' }}</h3>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" />
</div>
<button type="submit" @click.prevent="submitForm">{{ isLogin ? '登录' : '注册' }}</button>
<div v-if="errorMessage">{{ errorMessage }}</div>
<div>{{ isLogin ? '没有账号?' : '已有账号?' }}<button @click.prevent="toggleLogin">{{ isLogin ? '去注册' : '去登录' }}</button></div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
isLogin: true,
username: '',
password: '',
errorMessage: ''
};
},
methods: {
toggleLogin() {
this.isLogin = !this.isLogin;
this.username = '';
this.password = '';
this.errorMessage = '';
},
submitForm() {
if (this.username && this.password) {
// 发送登录或注册请求
const data = {
username: this.username,
password: this.password
};
const endpoint = this.isLogin ? '/login' : '/register';
axios.post(endpoint, data)
.then(response => {
// 登录或注册成功
this.errorMessage = '';
// TODO: 处理返回结果
})
.catch(error => {
// 登录或注册失败
this.errorMessage = error.response.data.message;
});
} else {
this.errorMessage = '用户名和密码不能为空';
}
}
}
};
</script>
```
需要注意的是,上面的代码只是一个简单的示例,实际的登录注册功能还需要完善,比如输入合法性检查、密码加密、验证码验证等等。同时,后端也需要配合实现相应的接口。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)