vue--登录

本文主要是介绍vue--登录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<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">&nbsp;</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>

这篇关于vue--登录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！