vue3实现登录注册功能
时间: 2023-09-13 08:07:45 浏览: 56
首先,你需要创建一个Vue3项目,并安装相关依赖。
然后,在你的项目中创建一个登录页面(login.vue)和一个注册页面(register.vue)。
在登录页面,你需要创建一个表单,用于用户输入用户名和密码。然后,你需要为表单绑定一个submit事件,用于提交用户输入的数据。
在注册页面,你需要创建一个表单,用于用户输入用户名、密码和确认密码。然后,你需要为表单绑定一个submit事件,用于提交用户输入的数据。
接下来,你需要在你的Vue3项目中创建一个API模块,用于与后端进行交互。在API模块中,你需要创建一个login函数和一个register函数,用于向后端发送登录和注册请求。
最后,你需要在登录页面和注册页面中引入API模块,并在submit事件中调用相应的API函数,将用户输入的数据发送到后端进行验证和处理。
这是一个简单的示例代码:
login.vue:
```
<template>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="formData.username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="formData.password">
</div>
<button type="submit">Login</button>
</form>
</template>
<script>
import { login } from '@/api';
export default {
data() {
return {
formData: {
username: '',
password: ''
}
}
},
methods: {
async submitForm() {
try {
const response = await login(this.formData);
// 登录成功,跳转到首页
this.$router.push('/');
} catch (error) {
// 处理错误信息
console.error(error);
}
}
}
}
</script>
```
register.vue:
```
<template>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="formData.username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="formData.password">
</div>
<div>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" v-model="formData.confirmPassword">
</div>
<button type="submit">Register</button>
</form>
</template>
<script>
import { register } from '@/api';
export default {
data() {
return {
formData: {
username: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
async submitForm() {
try {
const response = await register(this.formData);
// 注册成功,跳转到登录页面
this.$router.push('/login');
} catch (error) {
// 处理错误信息
console.error(error);
}
}
}
}
</script>
```
这只是一个简单的示例代码,实际使用中可能需要根据具体需求进行调整。