标签:username vue 登录 -- db padding login password loginForm
<template> <section class="login"> <div class="login-content"> <div class="login-inner"> <div class="login-inner-left"> <img src="../../assets/images/login/icons.png" /> </div> <div class="login-inner-right"> <div class="logo"> <img src="../../assets/images/login/logo.png" /> <div>外包管理平台</div> </div> <div class="login-title">Hi~</div> <div class="login-title">欢迎使用软件工厂外包系统</div> <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="0px" > <el-form-item prop="username"> <el-input class="input-class" v-model.trim="loginForm.username" placeholder="请输入用户名" > </el-input> </el-form-item> <el-form-item prop="password"> <el-input class="input-class" :type="'password'" @keyup.enter.native="login" v-model="loginForm.password" placeholder="请输入密码" > </el-input> </el-form-item> </el-form><el-row class="operation"> <el-col align="left" :span="12"> <el-checkbox v-model="remenber"> </el-checkbox ><span style="padding-left: 5px">记住密码</span> </el-col> <el-col align="right" :span="12"> 忘记密码 </el-col> </el-row> <el-button :loading="loading" class="login-btn" type="primary" @click="login" >登 录</el-button > </div> </div> </div> </section> </template>
<script> import { mapMutations } from 'vuex' const Base64 = require('js-base64').Base64 import { loginInter, getUserInfoInter, getMenuNavInter } from '@/server/common' export default { name: 'login', components: {}, data() { return { loading: false, remenber: true, loginForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } } }, created() { // 在页面加载时从cookie获取登录信息 let username = this.$db.ls.get('username') let password = this.$db.ls.get('password') if (password) { password = Base64.decode(password) } // 如果存在赋值给表单,并且将记住密码勾选 if (username) { this.loginForm.username = username this.loginForm.password = password this.remenber = true } }, methods: { ...mapMutations([ 'changeUserInfo', 'changeMenuList', 'changePermissionList' ]), // 储存表单信息 setUserInfo: function () { if (this.remenber) { // base64加密密码 let password = Base64.encode(this.loginForm.password) this.$db.ls.set('password', password) this.$db.ls.set('username', this.loginForm.username) } else { this.$db.ls.clear() } }, login() { this.$refs.loginForm.validate(async (valid) => { if (valid) { this.loading = true let params = { username: this.loginForm.username, password: this.loginForm.password } const { code, token, msg } = await loginInter(params) if (code === 0) { this.$db.ss.set('token', token) this.getUserInfo() } else { this.$message({ message: msg, type: 'error' }) this.loading = false } } }) }, async getUserInfo() { const { code, user } = await getUserInfoInter() const { code: code1, menuList, permissions } = await getMenuNavInter()
if (code === 0) { this.changeUserInfo(user) this.setUserInfo() } if (code1 === 0) { this.$db.ss.set('menuList', menuList) this.$db.ss.set('permissionList', permissions) this.changePermissionList(permissions) this.changeMenuList(menuList) } if (this.$route.query.redirect) { this.$router.push({ path: decodeURIComponent(this.$route.query.redirect) }) } else { this.$router.push('/index') //正常登录流程进入的页面 } } } } </script> <style lang="scss" scoped> .login { height: calc(100vh); background-image: url(../../assets/images/login/bg1.png); background-repeat: no-repeat; background-size: 100% 100%;
.login-content { padding: 50px; width: 65%; height: 500px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url(../../assets/images/login/bg2.png); background-repeat: no-repeat; background-size: 100% 100%; .login-inner { display: flex; padding: 50px 80px; padding-top: 0px; align-items: flex-end; .login-inner-left { padding: 30px 10px; width: 65%; img { width: 100%; } } .login-inner-right { padding-right: 40px; width: 30%; .logo { display: flex; justify-content: start; align-items: center; font-size: 18px; font-weight: 500; color: #1a185b; margin-bottom: 20px; img { width: 35px; height: 35px; margin-right: 10px; } } .login-title { text-align: left; font-size: 20px; color: #1a185b; // padding: 10px 0 50px 0; padding: 10px 0 4px 0; font-weight: 500; } .el-form { margin-top: 30px; } .input-class { ::v-deep .el-input__inner { border: 1px solid transparent; background: rgba(114, 125, 255, 0.2); color: #888; } } .operation { padding: 20px 10px; font-size: 12px; color: #1a185b; } } } } .login-btn { margin-top: 20px; width: 100% !important; } } </style>
标签:username,vue,登录,--,db,padding,login,password,loginForm 来源: https://www.cnblogs.com/bwnnxxx123/p/15635973.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。