用vue-element ui写一个登录页面,并添加一个重置按钮,然后完成验证代码,登陆成功则跳转到Home.vue
时间: 2024-05-12 22:19:17 浏览: 12
由于登录页面需要与后端进行交互,我们需要先定义一个接口,用于验证用户输入的账号密码是否正确。这里假设后端接口为 `/api/login`,接口参数为 `username` 和 `password`,返回值为一个布尔值,表示登录结果。
首先,我们需要安装 `vue-router` 和 `axios`:
```
npm install vue-router axios --save
```
然后在 `main.js` 中引入和配置:
```javascript
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.prototype.$http = axios.create({
baseURL: 'http://localhost:3000' // 后端接口地址
})
```
接下来,我们可以创建一个 `Login.vue` 组件,代码如下:
```html
<template>
<el-form ref="form" :model="form" label-width="80px" class="login-form">
<el-form-item label="账号" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
login() {
this.$refs.form.validate(valid => {
if (valid) {
this.$http.post('/api/login', this.form).then(res => {
if (res.data) {
this.$router.push('/home')
} else {
this.$message.error('账号或密码错误')
}
})
} else {
return false
}
})
},
reset() {
this.$refs.form.resetFields()
}
}
}
</script>
<style scoped>
.login-form {
margin: 100px auto;
width: 400px;
}
</style>
```
这里使用了 `vue-router` 和 `axios`,其中 `this.$http.post` 表示向后端发送 POST 请求,并传递参数 `this.form`,请求成功后根据返回值跳转到 `Home.vue` 或提示错误信息。
最后,我们需要在路由中定义 `/home`,代码如下:
```javascript
import Home from './views/Home.vue'
const routes = [
{ path: '/', component: Login },
{ path: '/home', component: Home }
]
const router = new VueRouter({
routes
})
```
这样,我们就完成了一个简单的登录页面,并添加了重置按钮和登录验证功能。