在vue3中做一个登录框,有账号框和密码框有登录按钮,并实现提交表单发送请求给后端
时间: 2024-02-13 10:07:14 浏览: 33
好的,下面是一个简单的示例代码:
```
<template>
<div>
<form @submit.prevent="login">
<label for="username">账号</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">密码</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 构造请求数据
const data = {
username: this.username,
password: this.password
}
// 发送POST请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
})
.then(data => {
console.log(data)
// 处理登录成功的逻辑
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error)
// 处理登录失败的逻辑
})
}
}
}
</script>
```
这里使用了Vue 3的模板语法,使用了v-model指令来绑定数据和表单控件,使用了@submit.prevent来阻止表单默认的提交行为,在login方法中使用fetch函数发送POST请求,并在then中处理响应数据。其中的接口地址应该根据实际情况进行修改。