102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<script>
|
|
|
|
import {mapMutations,mapState,mapActions} from "vuex";
|
|
|
|
export default {
|
|
name: "ZooContainer",
|
|
data() {
|
|
return {
|
|
// 登录表单数据
|
|
form: {
|
|
username: '',
|
|
password: '123456',
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['loginUser'])
|
|
},
|
|
methods: {
|
|
...mapActions(['getLoginUser']),
|
|
...mapMutations(['updateLoginUser']),
|
|
// 登录
|
|
login() {
|
|
console.log('登录',this.form)
|
|
//判断表单是否为空
|
|
if (!this.form.username || !this.form.password) {
|
|
//返回提示
|
|
return ElMessage({
|
|
message: '用户名和密码不能为空',
|
|
type: 'warning',
|
|
})
|
|
}
|
|
|
|
//此处接入后端登录接口
|
|
this.getLoginUser(this.form)//通过表单获取登录的用户
|
|
|
|
//能获取到登录后的数据，说明登录成功
|
|
if (this.loginUser) {
|
|
localStorage.setItem('username', this.loginUser.username);//本地存储登录用户名
|
|
|
|
// 跳转到面板首页
|
|
this.$router.push('/panel/home')
|
|
}
|
|
},
|
|
//重置表单
|
|
reset() {
|
|
this.form = {}
|
|
},
|
|
},
|
|
mounted() {
|
|
//清空退出登录的用户
|
|
this.updateLoginUser('');
|
|
|
|
//自动填充历史登录的用户
|
|
this.form.username = localStorage.getItem('username');
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="login-root">
|
|
<!-- 背景图片-->
|
|
<el-carousel height="400px" motion-blur>
|
|
<el-carousel-item v-for="item in 4" :key="item">
|
|
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<!-- 登录表单-->
|
|
<div class="center">
|
|
<el-card style="width: 480px" shadow="always" header="登录">
|
|
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="form.username" style="width: 240px" placeholder="请输入用户名"/>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input
|
|
v-model="form.password"
|
|
style="width: 240px"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
show-password
|
|
/>
|
|
</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>
|
|
</el-card>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#login-root {
|
|
width: 100%;
|
|
height: 700px;
|
|
background-color: skyblue;
|
|
}
|
|
</style> |