使用vue写一个前端登录
时间: 2023-06-14 11:03:54 浏览: 50
首先,需要在 Vue 中安装 vue-router 来管理路由。其次,需要在组件中使用 v-model 指令绑定数据到表单元素上,并且监听登录按钮的点击事件。最后,使用 axios 库发送请求到后端进行登录验证。
代码示例:
```
<template>
<div>
<form>
<label>用户名:</label>
<input type="text" v-model="username" placeholder="请输入用户名" />
<br />
<label>密码:</label>
<input type="password" v-model="password" placeholder="请输入密码" />
<br />
<button @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
const data = {
username: this.username,
password: this.password
}
axios.post('/api/login', data).then(res => {
if (res.data.success) {
// 登录成功
this.$router.push('/home')
} else {
// 登录失败
alert(res.data.message)
}
})
}
}
}
</script>
```
请注意,这只是一个简单的示例, 生产环境中应该对密码进行加密处理,并且需要注意CORS问题.
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)