本文实例为大家分享了Vue实现简单登录界面的具体代码，供大家参考，具体内容如下
实现：
界面实现
表单规则校验
结合后台 api 校验
提示消息
App.vue
<template>
<div id="app">
<!--路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
登录页面login.vue
<template>
<div class="login_container">
<div class="login_box">
<div class="ava_box">
<img src="../assets/logo.webp" />
</div>
<!-- 账号 -->
<el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" show-password="true" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" round>登录</el-button>
<!-- <el-button type="success" round>成功按钮</el-button> -->
<el-button type="info" @click="resetLoginForm" round>重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
// 表单数据绑定
loginForm: {
username: 'admin',
password: '123456'
},
// 检验规则
loginFormRules: {
username: [
{required: true,message: '请输入用户名',trigger: 'blur'},
{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
],
password: [
{required: true,message: '密码不能为空',trigger: 'blur'},
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
]
}
}
},
methods:{
resetLoginForm(){
this.$refs.loginFormRef.resetFields();
},
login(){
this.$refs.loginFormRef.validate(async valid=>{
console.log(valid);
if(!valid) return;
const {data: res}= await this.$http.post('login',this.loginForm);
console.log(res)
if(res.meta.status!=200) return this.$message.error('登录失败')
this.$message.success('登录成功')
});
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
height: 300px;
width: 450px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
// 横轴，纵轴
transform: translate(-50%, -50%);
.ava_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.btns{
display: flex;
justify-content: flex-end;
}
.login_form{
position: absolute;
bottom: 0px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
}
</style>
element.js
import Vue from 'vue'
import { Button, Form, FormItem, Input,Message } from 'element-ui'
Vue.prototype.$message=Message
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Message)
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import axios from 'axios'
Vue.config.productionTip = false
axios.defaults.baseURL=''
Vue.prototype.$http=axios
new Vue({
router,
render: h => h(App)
}).$mount('#app')
