[JavaScript知识库]从0开始学习vue-element-admin(template)

1.登录界面

????????登录界面主要就是两个输入框和一个登录框来组成.

1.静态页面

????????用户名的登录框只需要设置ref和v-modle即可。

        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />

????????密码的input框则需要加一个enter的keyup事件来进行登录。

        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />

? ? ? ? 密码框中的点击小眼睛

        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>

2.data()

????????在data中所需要return的内容为:

return {
      //初始的账号和密码，显示在input框中
      loginForm: {
        username: 'admin',
        password: '111111'
      },
      //账号和密码的规则对象。
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      //密码输入框的类型，所对应的key值。
      passwordType: 'password',
      //跳转的路由地址
      redirect: undefined
    }

? ? ? ? 其中对于账号和密码规则的函数如下。

    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {    //如果用户名为空则弹出警告
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {    //如果密码小于6位，就弹出警告
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }

3.watch监听route变化

????????每次登录进来会进入上一次访问的界面，所以对于route要有个监听函数，将最新的路由地址给到redirect。

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },

4.methods方法

? ? ? ?1.? 密码框内容的显示与隐藏。

showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''    //改变input的类型
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()    //获取到密码的焦点。
      })
    },

? ? ? ? 2. 登录方法：利用vuex访问接口

    handleLogin() {
      this.$refs.loginForm.validate(valid => {    //通过表单验证
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {    
            this.$router.push({ path: this.redirect || '/' })    //路由跳转
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

? ? ? ? login的action：在store中的user.js

  login({ commit }, userInfo) {    //将loginForm传过来
    const { username, password } = userInfo    //在信息中将用户名和密码解构出来
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {    //login是配置的登录访问接口
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })

? ? ? ? login的访问接口，在@/api/user.js

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

? ? ? ? mutations中的SET_TOKEN如下：

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

? ? ? ? 这里的token是利用getToken()得到的。

const TokenKey = 'vue_admin_template_token'
export function getToken() {
  return Cookies.get(TokenKey)
}