一：登陸頁面
效果圖：

樣式問題：
背景頁面UI給的尺寸比較小的情況下，如何按比例不平埔背景呢？

.login {
  width: 100%;
  padding-bottom: 62.5%;
  height: 0;
  background: url('../../images/login.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: #0C1424;
  -webkit-background-size: cover;
  -moz-background-size: cover
 
;
  -o-background-size: cover;
}

首先寬度是100%。高度是0，我們使用padding-bottom來固定寬高比
最最重要的是，不平埔還能展示全屏就是使用css3的background-size: cover 屬性了，注意做一下相容。

我們使用element ui 的表單驗證，可以控制輸入的字串格式，當我們做驗證碼的時候，希望只輸入4個字元便不能輸了，當輸入大於四個字元時就擷取掉後面的，並賦值給輸入框。

        vcode: [
          {required: true, validator: validateVcode, triger: 'blur'
 
}
        ]
data () 中定義：
    var validateVcode = (rule, value, callback) => {
      // 將使用者輸入數字轉成字串，同時轉換成大寫
      value = value + ''
      if (value.length > 4) {
        value = value.substring(0, 4)
        this.$set(this.loginInfo, 'vcode', value)
      }
    }

隨機生成驗證碼，在頁面一載入完畢就執行該函式生成一個驗證碼。

  mounted () {
    this
 
.generatedCode()
  },

在methods中：
    generatedCode () {
      const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      let code = ''
      for (let i = 0; i < 4; i++) {
        let index = Math.floor(Math.random() * 36)
        code += random[index]
      }
      this.ccode = code
    }

當用戶點選生成碼可以生成一個新的驗證碼，所以給該生成碼標籤繫結一個點選事件，在點選 後執行生成驗證碼函式。

    // 點選生成驗證碼
    handleCode () {
      this.generatedCode()
    }

當我們輸入驗證碼完成之後，需要驗證輸入的和我們生成的是否一致，所以需要一個判斷輸入驗證碼是否正確的函式。

    // 判斷驗證碼是否輸入準確
    checkCode () {
      let vcode = this.loginInfo.vcode
      vcode = vcode.toUpperCase()
      let ccode = this.ccode
      ccode = ccode.toUpperCase()
      if (vcode !== ccode) {
        this.$message.error('Please enter the correct verification code!')
        this.$set(this.loginInfo, 'vcode', '')
        this.$set(this.loginInfo, 'password', '')
      } else {
        return 1
      }
    },

當點選登陸按鈕的時候，開始驗證，我們在登入按鈕上繫結驗證表單的事件<el-button @click="handleSubmit('loginFrom')">Login</el-button>
思路： 首先在驗證表單之前先驗證驗證碼是否正確，正確的話才開始驗證表單，驗證碼不正確彈出驗證碼輸入有誤！
第二步：表單如果驗證成功，那麼就傳送使用者資訊到後臺登陸，如果驗證不成功的話，彈出表單填寫不正確
第三步：傳送請求到後臺，如果使用者資訊正確登陸成功，執行登陸成功的函式，將資料儲存在本地
如果使用者名稱或者密碼不對，請求出錯，則報使用者名稱或者密碼不對！

具體程式碼如下：

    handleSubmit (formName) {
      let codestatus = this.checkCode()
      // 先驗證輸入的驗證碼是否相同，相同再做密碼和輸入框的正確與否
      if (codestatus) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.get('/rest/login.json')
              .then(this.loginInfoSucc)
          } else {
            this.$message.error('Please enter a valid username or password')
            return false
          }
        })
      } else {
        this.$message.error('Please enter the correct verification code!')
        this.$set(this.loginInfo, 'vcode', '')
        this.$set(this.loginInfo, 'password', '')
      }
    },
     loginInfoSucc (res) {
      res = res.data
      if (res.payload && !res.status) {
        // 儲存選單的配置
        const allInfo = res.payload
        this.$store.dispatch('configurationInfo', allInfo)
        // 儲存使用者名稱的配置
        let userInfo = {}
        if (this.remember) {
          this.$set(userInfo, 'employeeid', this.loginInfo.employeeid)
          this.$set(userInfo, 'password', this.loginInfo.password)
        } else {
          this.$set(userInfo, 'employeeid', '')
          this.$set(userInfo, 'password', '')
        }
        this.$store.commit('saveUserInfo', userInfo)
        // 設定資料來源的開關為SAP
        let dataswitch = false
        this.$store.commit('switchData', dataswitch)
        this.$router.push('/home')
      } else {
        this.$message.error('Incorrect user name or password')
      }
    }

現在我們實現了點選登陸，使用者體驗度做的好一點，還希望完成敲回車直接登陸，
我們輸入完驗證碼敲回車，也去執行登陸的觸發時間就可以了。
在驗證碼的輸入框中加上@keyup.enter,native ="handleSubmit('loginFrom')" 即可
ok,暫時登陸頁面的技術總結完畢，後續應該會新增localStroage的要點。

二： 註冊頁面
效果圖：

註冊頁面的技術要點沒多少，還是表單的問題
1.遇到比較麻煩的一點是，在from中select元件修改全域性樣式無效，因為select元件生成的下拉選單不在父級div中，而是在與app同級的div中，解決這個問題是給select新增一個叫prop-class的屬性，該屬性是給下拉選單定義一個類名，在該類下修改樣式就可以了。
2. password 驗證是使用自定義驗證的。

    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('please input password'))
      } else {
        if (this.registerInfo.cpassword !== '') {
          this.$refs.registerForm.validateField('cpassword')
        }
        callback()
      }
    }
    var validateCPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('input password again'))
      } else if (value.length >=this.registerInfo.password.length && value !== this.registerInfo.password) {
        callback(new Error('The two passwords do not match!'))
      } else {
        callback()
      }
    }

this.$refs.registerForm.validateField(‘cpassword’) 是當驗證密碼存在時，重新輸入密碼，我們要將根據第二次的輸入密碼作為判斷，當輸入不同時，就會觸發兩次密碼不同的提示
另外驗證密碼，不要一開始剛輸入就顯示不一樣，要在輸入長度一樣之後再判斷，給使用者比較好的體驗。