126 lines
3.6 KiB
Vue
126 lines
3.6 KiB
Vue
<script>
|
|
import {mapMutations, mapState} from "vuex";
|
|
import request, {frontendLoginUser} from "@/utils/request.js";
|
|
|
|
export default {
|
|
name: "ZooContainer",
|
|
data() {
|
|
return {
|
|
// 登录表单数据
|
|
form: {
|
|
username: 'admin',
|
|
password: '123',
|
|
},
|
|
picture: [
|
|
'https://www4.bing.com//th?id=OHR.BambooPanda_ZH-CN8455481760_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
|
|
'https://www4.bing.com//th?id=OHR.PolarBearCubs_ZH-CN2913942257_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
|
|
'https://www4.bing.com//th?id=OHR.WhiteEyes_ZH-CN1130380430_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
|
|
'https://www4.bing.com//th?id=OHR.ZebraCousins_ZH-CN8159888859_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp'
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['loginUser'])
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateLoginUser']),
|
|
// 登录
|
|
login() {
|
|
console.log('登录', this.form)
|
|
//判断表单是否为空
|
|
if (!this.form.username || !this.form.password) {
|
|
//返回提示
|
|
return ElMessage({
|
|
message: '用户名和密码不能为空',
|
|
type: 'warning',
|
|
})
|
|
}
|
|
|
|
//此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
|
|
request.login(this.form).then(response => {
|
|
if (response.data.code === 1) {
|
|
// 登录成功
|
|
this.updateLoginUser(frontendLoginUser(response.data.data, this.form.username))
|
|
localStorage.setItem('username', this.form.username);//本地存储登录用户名
|
|
// 跳转到面板首页
|
|
this.$router.push('/panel/home')
|
|
return ElMessage({
|
|
message: '登录成功',
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
return ElMessage({
|
|
message: '用户名不存在或密码错误',
|
|
type: 'error',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//重置表单
|
|
reset() {
|
|
this.form = {}
|
|
},
|
|
},
|
|
mounted() {
|
|
//清空退出登录的用户
|
|
this.updateLoginUser('');
|
|
|
|
//自动填充历史登录的用户
|
|
this.form.username = localStorage.getItem('username');
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="login-root">
|
|
<!-- 背景图片-->
|
|
<div>
|
|
<el-carousel motion-blur height="700px" style="width: auto;">
|
|
<el-carousel-item v-for="(item,index) in picture" :key="index" style="text-align: center">
|
|
<img :src="item" width="auto" height="100%"/>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
|
|
<!-- 登录表单-->
|
|
<div class="center">
|
|
<el-card style="width: 350px" shadow="always">
|
|
<template #header>
|
|
<div style="text-align: center;font-size: 25px">登录</div>
|
|
</template>
|
|
<el-form :model="form" label-width="auto" style="width: 400px">
|
|
<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: aliceblue;
|
|
}
|
|
|
|
.center {
|
|
opacity: 0.95;
|
|
}
|
|
</style> |