使用elementUI写出一个简单的登录界面,登录表单要求要在页面中间,还要有背景图片,并且配置好账号密码的ajax接口
时间: 2024-05-06 17:17:09 浏览: 13
以下是一个简单的登录页面示例,使用了 ElementUI 组件库和 Vue.js 框架:
```html
<template>
<div class="login-container">
<div class="login-form">
<h2 class="form-title">用户登录</h2>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
<el-form-item label="账号" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
axios.post('/api/login', this.loginForm).then(res => {
// 处理登录成功逻辑
}).catch(err => {
// 处理登录失败逻辑
})
}
})
}
}
}
</script>
<style>
.login-container {
background: url('./bg.jpg') no-repeat center center fixed;
background-size: cover;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-form {
width: 350px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.form-title {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
</style>
```
在这个示例中,我们将背景图片设置为登录页的背景,并使用了 `el-form` 和 `el-input` 组件来实现登录表单。我们还配置了一个 `login` 方法来处理用户提交表单的逻辑,该方法使用了 Axios 库来调用后端接口。
注意:这里的 `/api/login` 接口是一个示例,实际情况下需要根据自己的后端实现来修改。