vue3写一个登录界面
时间: 2023-05-12 07:07:24 浏览: 235
好的,下面是一个简单的 Vue3 登录界面的代码示例:
```html
<template>
<div>
<h1>登录</h1>
<form @submit.prevent="login">
<label>
用户名:
<input type="text" v-model="username" required>
</label>
<br>
<label>
密码:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">登录</button>
</form>
<p v-if="error" style="color: red;">{{ error }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const password = ref('');
const error = ref('');
const login = async () => {
try {
// 发送登录请求
const response = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username.value,
password: password.value
})
});
if (response.ok) {
// 登录成功,跳转到首页
window.location.href = '/';
} else {
// 登录失败,显示错误信息
const data = await response.json();
error.value = data.message;
}
} catch (e) {
// 发生网络错误
error.value = '网络错误,请稍后再试';
}
};
return {
username,
password,
error,
login
};
}
};
</script>
```
这个登录界面包含一个表单,用户需要输入用户名和密码才能登录。当用户点击登录按钮时,会发送一个 POST 请求到 `/api/login` 接口,接口会验证用户名和密码是否正确,如果正确则返回一个成功的响应,否则返回一个包含错误信息的响应。如果登录成功,页面会跳转到首页;如果登录失败,会显示错误信息。