vue實戰之vue後臺管理系統（二）之登錄頁面

Login.vue頁面

elementUI

Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫.
element官網：http://element-cn.eleme.io/#/zh-CN
elementUI的快速使用：http://element-cn.eleme.io/#/zh-CN/component/quickstart

登錄頁面代碼分析（Login.vue）

<template>
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">系統登錄</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="賬號"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密碼"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">記住密碼</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登錄</el-button>
      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
    </el-form-item>
  </el-form>
</template>

  import { requestLogin } from '../api/api';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        logining: false,
        ruleForm2: {
          account: 'admin',
          checkPass: '123456'
        },
        rules2: {
          account: [
            { required: true, message: '請輸入賬號', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '請輸入密碼', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            //_this.$router.replace('/table');
            this.logining = true;
            //NProgress.start();
            var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
            requestLogin(loginParams).then(data => {
              this.logining = false;
              //NProgress.done();
              let { msg, code, user } = data;
              if (code !== 200) {
                this.$message({
                  message: msg,
                  type: 'error'
                });
              } else {
                sessionStorage.setItem('user', JSON.stringify(user));
                this.$router.push({ path: '/table' });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }

:model 表單數據對象 用於綁定數據（即date與綁定的model同名的data數據）
還需要在對應的表單中，確定賦值（v-model=“ruleForm2.checkPass”），即可。
prop 傳入 Form 組件的 model 中的字段
rules 表單驗證規則

   rules2: {
     account: [
       { required: true, message: '請輸入賬號', trigger: 'blur' },
       //{ validator: validaePass }
     ],
     checkPass: [
       { required: true, message: '請輸入密碼', trigger: 'blur' },
       //{ validator: validaePass2 }
     ]
   },

參數說明：required 是否必填，如不設置，則會根據校驗規則自動生成；message:是提示的內容；trigger：是什麼事件觸發。
這段代碼的含義：當輸入爲空的情況下，當對應的輸入框失去焦點時，會顯示報錯信息（即message的內容）。
ref 被用來給元素或者子組件註冊引用信息。是vue中的屬性，el中沒得，相關文檔：https://www.cnblogs.com/xumqfaith/p/7743387.html
label-position 表單域標籤的位置，如果值爲 left 或者 right 時，則需要設置 label-width
auto-complete on 默認。規定啓用自動完成功能。off 規定禁用自動完成功能。
http://www.w3school.com.cn/tags/att_input_autocomplete.asp
@click.native.prevent vue 裏面所有鍵盤事件都是需要加.native才能生效，如果在當前按鈕之前綁定過鍵盤點擊事件，後面的按鈕都需要加.native才能生效。prevent是阻止冒泡。
loading 加載數據時顯示效果
表單驗證： this.$refs.ruleForm2.validate((valid)=>{.....}); //不是特別理解
驗證form上的添加的表單驗證是否正確。

  if (valid) {
    //_this.$router.replace('/table');
    this.logining = true;    //顯示加載數據效果
    //NProgress.start();
    var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };       //讀取表單數據
    requestLogin(loginParams).then(data => {     //請求數據
      this.logining = false;					 //關閉數據加載效果
      //NProgress.done(); 
      let { msg, code, user } = data;           //讀取返回的值
      if (code !== 200) {                       //返回碼爲200時，報錯
        this.$message({
          message: msg,
          type: 'error'
        });
      } else {                                  //否則（即返回碼爲200時）
        sessionStorage.setItem('user', JSON.stringify(user));  
        this.$router.push({ path: '/table' });
      }
    });
  } else {
    console.log('error submit!!');
    return false;
  }

關於sessionStorage： https://www.cnblogs.com/polk6/p/5512979.html
sessionStorage是HTML5新增的會話存儲對象，用於保存保存同一窗口（標籤頁的數據），在關閉窗口或標籤頁的時候會刪除這些數據。
sessionStorage.setItem(string key, string value) 該方法接受一個鍵名(key)和值(value)作爲參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。value的值必須是字符串，如果不是也會自動轉換成字符串。
sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換爲字符串格式；讀取時，通過JSON.parse()將字符串轉換回對象。
$router.push 編程式導航，同<router-link>創建a定義導航鏈接類似。
編程式導航：https://router.vuejs.org/zh/guide/essentials/navigation.html