vue實戰——登錄頁面

一、入口文件main.js配置

（入口文件就是項目或系統被訪問時第一個訪問到的文件，所有的指令功能都是從這個文件分發出去，再找相對應的模塊進行處理，初始化vue實例、編寫全局方法、使用插件等）

  axios.interceptors.response.use(res => { // 請求攔截器，在發送請求或者響應請求之前做的一些操作或判斷，此處為請求響應攔截器
     if (res.data.code == 0) { // 如果后台響應的狀態碼為0，當后台收到正確的用戶信息，正確的用戶名和密碼就會返回狀態碼0，此時進行數據渲染
         return res.data
     } else if (res.data.code == 1) {/ /如果返回的狀態碼為1，意味着后端沒有收到正確的登錄信息，客戶如果繞過登錄頁面，則強制返回到登錄頁面。
         router.push('/login')
     } else { // 網絡異常狀況
         Message({
            type: 'error',
            message: res.data.msg || '網絡異常，請重試。'
         })
      }
    }, error => { // 請求出錯時提示錯誤信息
       return Promise.reject(error)
  })

二、路由部分router.js

路由是一個項目的靈魂，每個組件都有對應的路由，根據不同的路由地址，展示不同的內容給用戶。

routes: [{
      path: '/',
      redirect: '/home/login'　// 路由重定向，當用戶訪問根路徑時，重新跳轉到home下的login組件　
   }，

   {
      path: '/login',
      name: 'login',
      import(  './views/Login.vue') // 定義login組件的路由
    }
 }]

三、組件部分login.vue

這里為最簡單的登陸頁面，沒有注冊部分，賬號為后台生成

<！-- html部分 -->

<template>
  <div class="loginbody">
      <el-form v-model="ruleForm"  status-icon  :rules="rules"> 
        <!-- 用戶名 -->
        <el-form-item>
          <el-input v-model="ruleForm.user" prefix-icon="el-icon-user" placeholder="用戶名" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 密碼 -->
        <el-form-item label="">
          <el-input type="password" v-model="ruleForm.passwd" prefix-icon="el-icon-lock" placeholder="密碼" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 登錄按鈕 -->
        <el-form-item>
          <el-button type="primary" @click.enter="submitForm()" >登&nbsp;錄</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

注釋：1、使用的element表單組件

           2、v-model="ruleForm" 數據的雙向綁定，試圖上的數據與data里的數據保持一致

           3、autocomplete h5新增表單屬性，自動完成功能，輸入框會記錄輸入習慣，根據記憶迅速完成輸入全部內容，off閉，on開啟

           4、@click.enter：綁定個click事件，添加enter修飾符，用戶點擊按鈕或按enter鍵時都可以觸發事件

<！-- script部分 -->

data() { // 頁面的初始數據
    return {
      ruleForm: { // 存儲用戶輸入數據
        user: '',
        passwd: '',
      },
      rules: { // 可添加一些表單規則

      }
    }
  },

methods: {

    submitForm() {
      this.axios.post('url ‘, { ...this.ruleForm }).then(res => { // post請求，攜帶參數為展開運算符=user: '', passwd: '',
         if (res.code != 0) return false; // 后台根據前端傳來的數據返回對應的狀態碼，0為成功，繼續往下執行，非0即失敗（-1為用戶名或者密碼錯誤，1為空）停止往下執行

        this.$message({ // 提示成功信息
           type: 'success',
           message: '登錄成功'
         })
        this.$router.push('/home/index') //成功跳轉到首頁
      })

    }
  }