vue-cli3 + elementui 搭建后台管理界面(四)-使用font-awesome

╰半夏微凉° 2021-09-10 07:06 510阅读 0赞

> 使用font-awesome

npm install --save font-awesome

修改 **src/main.js** 增加

import 'font-awesome/scss/font-awesome.scss'

## 1 login页面增加图标 ##

<template>
      <div class="login-container">
        <el-form :model="myForm" :rules="myRule"
          status-icon
          ref="myForm" 
          label-position="left" 
          label-width="0px" 
          class="demo-ruleForm login-page">
            <h3 class="title">登录</h3>
            <el-form-item prop="username">
              <el-input type="text" 
                  v-model="myForm.username" 
                  auto-complete="off" 
                  placeholder="用户名"
                >
                <template slot="prepend">
                  <span class="fa fa-user fa-lg" style="width: 13px"></span>
                </template>
              </el-input>
            </el-form-item>
              <el-form-item prop="password">
                <el-input :type="pwdType"
                          v-model="myForm.password"
                          auto-complete="off"
                          placeholder="密码"
                  >
                  <template slot="prepend">
                    <span class="fa fa-lock fa-lg"
                          style="width: 13px"></span>
                  </template>
                  <template slot="suffix">
                    <span class="password-eye"
                          @click="showPassword"
                          :class="eyeType"
                          style="width: 13px"></span>
                  </template>
                </el-input>
              </el-form-item>
            <el-checkbox v-model="rememberme" class="rememberme">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
              <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
      </div>
    </template>

修改样式

<style lang="scss" scoped>
    .login-container {
      width: 100%;
      height: 100%;
    }
    .login-page {
      -webkit-border-radius: 5px;
      border-radius: 5px;
      margin: 180px auto;
      width: 350px;
      padding: 35px 35px 15px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
      .password-eye {
        position: absolute;
        right: 20px;
        top: 11px;
        cursor: pointer;
      }
    }
    label.el-checkbox.rememberme {
      margin: 0px 0px 15px;
      text-align: left;
    }
    </style>

效果如下

![6587214-e08b61346e12e634.png][]

image

给"眼睛"增加click事件

<script>
    export default {
      data(){
        return {
          logining: false,
          myForm: {
            username: '',
            password: '',
          },
          myRule: {
            username: [{ required: true, message: 'please enter your account', trigger: 'blur' }],
            password: [{ required: true, message: 'enter your password', trigger: 'blur' }]
          },
          rememberme: false,
          pwdType: 'password',
          eyeType: 'fa fa-eye-slash fa-lg',
        }
      },
      methods: {
        showPassword() {
          if (this.pwdType === 'password') {
            this.pwdType = ''
            this.eyeType = 'fa fa-eye fa-lg'
          } else {
            this.pwdType = 'password'
            this.eyeType = 'fa fa-eye-slash fa-lg'
          }
        },
        handleSubmit () {
          this.$refs.myForm.validate((valid) => {
            if (valid) {
              this.logining = true;
              if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
                  this.logining = false;
                  sessionStorage.setItem('user', this.myForm.username);
                  this.$router.push({path: '/'});
              }else{
                this.logining = false;
                this.$alert('账号或密码错误', '温馨提示', {
                    confirmButtonText: '确定'
                })
              }
            }else{
              console.log('error submit!');
              return false;
            }
          })
        }
      }
    };
    </script>

## 2 简单实现记住密码 ##

成功登陆后把用户名和密码存入cookie，再次进入页面时读取cookie

<script>
    export default {
      data(){
        return {
          logining: false,
          myForm: {
            username: '',
            password: '',
          },
          myRule: {
            username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
          },
          rememberme: false,
          pwdType: 'password',
          eyeType: 'fa fa-eye-slash fa-lg',
          redirect: undefined,
        }
      },
      methods: {
        showPassword() {
          if (this.pwdType === 'password') {
            this.pwdType = ''
            this.eyeType = 'fa fa-eye fa-lg'
          } else {
            this.pwdType = 'password'
            this.eyeType = 'fa fa-eye-slash fa-lg'
          }
        },
        handleSubmit () {
          this.$refs.myForm.validate((valid) => {
            if (valid) {
              this.logining = true;
              if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
                  this.logining = false;
                  //sessionStorage.setItem('user', this.myForm.username);
                  if(this.rememberme){
                    //console.log(this.myForm.password)
                    this.setCookie(this.myForm.username, this.myForm.password, 7)
                  }else{
                    this.clearCookie()
                  }
                  this.$router.push({path: '/'});
              }else{
                this.logining = false;
                this.$alert('账号或密码错误', '温馨提示', {
                    confirmButtonText: '确定'
                })
              }
            }else{
              console.log('error submit!');
              return false;
            }
          })
        },
        setCookie(name, pass, days){
          let expire = new Date()
          expire.setDate(expire.getDate() + days)
          document.cookie = `C-username=${name};expires=${expire}`
          document.cookie = `C-password=${pass};expires=${expire}`
        },
        clearCookie(){
          this.setCookie('', '', -1)
        },
        getCookie(){
          if(document.cookie.length){
            let arr = document.cookie.split('; ')
            for(let i=0; i<arr.length; i++){
              let arr2 = arr[i].split('=')
              if(arr2[0] === 'C-username'){
                this.myForm.username = arr2[1]
              }else if(arr2[0] === 'C-password'){
                this.myForm.password = arr2[1]
                this.rememberme = true
              }
            }
          }
        },
      },
      mounted(){
        this.getCookie()
      }
    };
    </script>

注意修改之前写在main.js里面的路由导航守卫，先将其隐藏，后期再处理

import Vue from 'vue'
    import App from './App'
    import store from './store'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import './assets/css/index.scss'
    import 'font-awesome/scss/font-awesome.scss'
    
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    
    // router.beforeEach((to, from, next) => {
    //   if (to.path === '/login') {
    //     sessionStorage.removeItem('user')
    //   }
    //   var user = sessionStorage.getItem('user')
    //   if (!user && to.path !== '/login') {
    //     next({
    //       path: '/login'
    //     })
    //   } else {
    //     next()
    //   }
    // })
    
    new Vue({
      el: '#app',
      store,
      router,
      render: h => h(App)
    })

文章改编自大神博客：[https://www.cnblogs.com/wbjxxzx/p/9975933.html][https_www.cnblogs.com_wbjxxzx_p_9975933.html]，仅作为学习实践。

[6587214-e08b61346e12e634.png]: /images/20210804/eb49388d69cb45d3b890ac9b5cd397a8.png
[https_www.cnblogs.com_wbjxxzx_p_9975933.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fwbjxxzx%2Fp%2F9975933.html

发表评论取消回复

表情：

评论列表（有 0 条评论，510人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+elementui搭建后台管理界面-登录

1 node环境安装从 [node官网][node]下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目

痛定思痛。/ 2023年06月11日 06:27/ 0 赞/ 51 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 353 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列四）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

深藏阁楼爱情的钟/ 2022年09月05日 15:56/ 0 赞/ 206 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列四）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

拼搏现实的明天。/ 2022年09月03日 12:11/ 0 赞/ 344 阅读

相关 vue-cli3 + elementui 搭建后台管理界面(五)-递归生成侧栏路由

1 定义多级菜单修改 src/router/index.js 的 / 路由 { path: '/', redirect

电玩女神/ 2021年10月01日 09:20/ 0 赞/ 505 阅读

相关 vue+elementui搭建后台管理界面(6登录和菜单权限控制[二])

根据权限计算路由的代码 / 通过meta.role判断是否与当前用户权限匹配 @param roles @param rout

本是古典何须时尚/ 2021年10月01日 02:04/ 0 赞/ 457 阅读

相关 vue-cli3 + elementui 搭建后台管理界面(二)-首页

登录跳转-路由导航守卫修改 src/main.js 加入 router.beforeEach((to, from, next) => {

朱雀/ 2021年09月12日 08:36/ 0 赞/ 746 阅读

相关 vue-cli3 + elementui 搭建后台管理界面(四)-使用font-awesome

> 使用font-awesome npm install --save font-awesome 修改 src/main.js 增加 impo

╰半夏微凉°/ 2021年09月10日 07:06/ 0 赞/ 511 阅读

相关 vue-cli3 + elementui 搭建后台管理界面(三)-侧边栏菜单

上一节搭好了主框架，但是标签页和侧边栏只是分别展示了各自的菜单，如何将二者联动起来？定义路由规则：当有 children 属性时，从 children 里取出 path

ゞ浴缸里的玫瑰/ 2021年09月10日 06:46/ 0 赞/ 428 阅读

相关 vue-cli3 + elementui 搭建后台管理界面(一)-登录

安装vue-cli npm install vue-cli -g 创建项目 vue create myapp 选择 Manual

比眉伴天荒/ 2021年08月04日 22:15/ 0 赞/ 1016 阅读