vue实现登录注册功能代码
时间: 2024-01-07 20:04:04 浏览: 45
好的,以下是基于 Vue 实现登录注册功能的示例代码:
```
<template>
<div class="login">
<h2>登录</h2>
<form @submit.prevent="login">
<div class="form-group">
<label>用户名:</label>
<input type="text" v-model="username" required>
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" v-model="password" required>
</div>
<div class="form-group">
<button type="submit">登录</button>
</div>
</form>
<hr>
<h2>注册</h2>
<form @submit.prevent="register">
<div class="form-group">
<label>用户名:</label>
<input type="text" v-model="regUsername" required>
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" v-model="regPassword" required>
</div>
<div class="form-group">
<button type="submit">注册</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
regUsername: '',
regPassword: '',
};
},
methods: {
login() {
// 发送登录请求
axios.post('/api/login', {
username: this.username,
password: this.password,
})
.then((response) => {
// 登录成功,跳转到主页
this.$router.push({ path: '/home' });
})
.catch((error) => {
// 登录失败,显示错误信息
alert('登录失败:' + error.response.data.message);
});
},
register() {
// 发送注册请求
axios.post('/api/register', {
username: this.regUsername,
password: this.regPassword,
})
.then((response) => {
// 注册成功,显示成功信息
alert('注册成功,请登录!');
})
.catch((error) => {
// 注册失败,显示错误信息
alert('注册失败:' + error.response.data.message);
});
},
},
};
</script>
```
希望对你有帮助!有其他问题的话,请继续提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)