Vue實戰記錄之登陸頁面的實現

阿新 • • 發佈：2021-06-15

1 前期準備

1.1 安裝Node.js

官網下載地址：https://nodejs.org/zh-cn/

Vue實戰記錄之登陸頁面的實現

安裝完成後，在終端輸入node -v來查詢版本號

Vue實戰記錄之登陸頁面的實現

檢視npm版本，npm -v

Vue實戰記錄之登陸頁面的實現

1.2 安裝webpack

終端輸入

npm install --save-dev webpack

檢視版本webpack -v

Vue實戰記錄之登陸頁面的實現

1.3 安裝vue-cli

因為建立vue專案使用vue-cli3以上才有的視覺化工具來建立，所以這裡的版本選擇的是3以上的版本

npm install -g @vue/cli

升級vue-cli

npm update -g @vue/cli

解除安裝vue-cli

npm uninstall vue-cli -g

2 搭建Vue專案

安裝好vue-cli後，使用vue提供的視覺化工具來建立一個vue專案

2.1 建立專案

在終端輸入vue ui，則會進入視覺化工具

Vue實戰記錄之登陸頁面的實現

選擇建立專案的路徑

Vue實戰記錄之登陸頁面的實現

建立專案資料夾

Vue實戰記錄之登陸頁面的實現

預設選擇手動，我們手動新增專案的配置

Vue實戰記錄之登陸頁面的實現

選擇好功能配置後，直接下一步，直接建立專案

Vue實戰記錄之登陸頁面的實現

等待專案建立好以後，在WebStore開啟專案

2.2 專案目錄

Vue實戰記錄之登陸頁面的實現

2.3 匯入ElementfjYPDLg UI

直接在ElementUI官網就可以看到匯入方式，這裡選擇全部模組的匯入

在控制檯輸入

 npm install element-ui --save

在main.js引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/*匯入ElementUI*/
import elementUI from 'elwww.cppcns.comement-ui';
/*匯入ElementUI的css樣式*/
import 'element-ui/lib/theme-chalk/index.css';
/*Vue使用ElementUI*/
Vue.use(elementUI);

new Vue({
  router,store,render: h => h(App)
}).$mount('#app')

3 實現登陸頁面

3.1 修改App.vue

這裡把全域性的設定先進行一個設定，把之前的模版的東西刪掉

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

修改全域性樣式

<template>
  <div id="app">
    <!--路由頁面-->
    <router-view/>
  </div>
</template>

<style>
/*全域性的父類高度*/
html {
  height: 100%;
}

/*重置body屬性*/
body {
  padding: 0;
  margin: 0;
  /*繼承html*/
  height: 100%;
}

/*#app的高度也需要繼承*/
#app {
  height: 100%;
}

/*全域性連結標籤去下劃線*/
a {
  text-decoration: none;
}
</style>

3.2 建立Login.vue

在views目錄下右鍵建立一個vue檔案，命名為Login

在ElementUI官網查詢佈局元件，選擇自己的佈局，複製到vue檔案中

<template>
  <!-- 一行的元素 -->
  <el-row type="flex" class="row-bg" justify="center">
    <!--第一列-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <!--第二列-->
    <el-col :span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <!--第三列-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>

</style>

複製表單，這裡複製的是帶驗證的表單，複製完以後對錶單進行修改

<template>
  <div :xl="6" :lg="7" class="bg-login">
    <!--logo-->
    <el-image :src="require('@/assets/logo.png')" class="logo"/>
    <!--標題-->
    <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <!--標題-->
        <h1 class="title">xAdmin管理系統</h1>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--form表單-->
    <el-row type="flex" class="row-bg card" justify="center" align="bottom">
      <el-col :span="7" class="login-card">
        <!--loginForm-->
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm">
          <el-form-item label="賬戶" prop="username" style="width: 380px">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密碼" prop="password" style="width: 380px">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="驗證碼" prop="code" style="width: 380px">
    www.cppcns.com        <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input>
            <!--驗證碼圖片-->
            <el-image :src="codeImg" class="codeImg"></el-image>
          </el-form-item>
          <el-form-item label="記住密碼" prop="remember">
            <el-switch v-model="loginForm.remember"></el-switch>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click="submitForm('loginForm')">立即登陸</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",data() {
    return {
      // 表單資訊
      loginForm: {
        // 賬戶資料
        username: '',// 密碼資料
        password: '',// 驗證碼資料
        code: '',// 記住密碼
        remember: false,// 驗證碼的key，因為前後端分離，這裡驗證碼不能由後臺存入session，所以交給vue狀態管理
        codeToken: ''
      },// 表單驗證
      rules: {
        // 設定賬戶效驗規則
        username: [
          {required: true,message: '請輸入賬戶',trigger: 'blur'},{min: 3,max: 10,message: '長度在 3 到 10 個字http://www.cppcns.com符的賬戶',trigger: 'blur'}
        ],// 設定密碼效驗規則
        password: [
          {required: true,message: '請輸入密碼',{min: 6,max: 15,message: '長度在 6 到 15 個字元的密碼',// 設定驗證碼效驗規則
        code: [
          {required: true,message: '請輸入驗證碼',{min: 5,max: 5,message: '長度為 5 個字元',trigger: 'blur'}
        ]
      },// 繫結驗證碼圖片
      codeImg: null
    };
  },methods: {
    // 提交表單
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表單驗證成功
          alert('submit')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },// 重置表單
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },}
</script>

<style scoped>
.codeImg {
  /*讓驗證碼圖片飄在右邊*/
  float: right;
  /*設定一些圓角邊框*/
  border-radius: 3px;
  /*設定寬度*/
  width: 26%;
}

.bg-login {
  height: 100%;
  background-image: url("../assets/backgroud.jpg");
  background-size: 200%;

}

.btn-ground {
  text-align: center;
}

.logo {
  margin: 30px;
  height: 70px;
  width: 70px;
  position: fixed;
}

.title {
  text-shadow: -3px 3px 1px #5f565e;
  text-align: center;
  margin-top: 60%;
  color: #41b9a6;
  font-size: 40px;
}

.login-card {
  background-color: #ffffff;
  opacity: 0.9;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
}
</style>

3.3 配置路由

在router下的index.js中進行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',name: 'Home',component: Home
  },// 配置登陸頁面的路由
  {
    path: '/login',name: 'login',component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

效果圖：

Vue實戰記錄之登陸頁面的實現

4 實現登陸功能

4.1 匯入axios

在vue裡面，是隻負責頁面，也就是view，但是我們登陸的話肯定是需要在後臺進行驗證的，那麼vue裡面，通訊是交給了axios來處理的

在控制檯終端輸入

npm install axios --save

回車，則會自動匯入模組

在main.js中進行註冊

/*匯入axios*/
import axios from "axios";
/*全域性繫結axios*/
Vue.prototype.$axios = axios;

4.2 匯入qs和Mock

qs是在vue中提供的一個外掛，可以幫助我們把字串進行解析，也可以幫助我們把引數序列化

在控制檯終端輸入

 npm install qs --save

回車，則會自動匯入模組

在main.js中進行註冊

/*匯入qs*/
import qs from 'qs';
/*全域性繫結*/
Vue.prototype.$qs = qs;

因為現在沒有後臺的設計，我們拿不到資料庫的資料，所以使用Mock來模擬後端的資料

在控制檯終端輸入

 npm install mockjs --save-dev

回車，則會自動匯入模組

建立一個mock的js檔案，建立一個空白的js檔案，命名隨意

在main.js中進行匯入mock

/*引入mock資料*/
require('./mock/LoginService.js')

4.3 編寫提交js

獲取驗證碼：

// 獲取驗證碼方法
getVerifyCodeImg() {
  /*獲取驗證碼*/
  this.$axios.get('/getVerifyCode').then(res => {
    // 獲取驗證碼key
    this.loginForm.codeToken = res.data.data.codeToken;
    // 獲取驗證碼圖片
    this.codeImg = res.data.data.codeImg;
  })
}
// 因為在頁面渲染好以後我們就需要去獲取驗證碼，所以繫結在created下
created() {
  // 頁面渲染完成後執行獲取驗證碼方法
  this.getVerifyCodeImg();
}

表單提交：

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表單驗證成功
      this.$axios.post('/login',this.loginForm).then(res => {
        // 拿到結果
        let result = JSON.parse(res.data.data);
        let message = res.data.msg;
        // 判斷結果
        if (result) {
          /*登陸成功*/
          Element.Message.success(message);
          /*跳轉頁面*/
          router.push('/')
        } else {
          /*列印錯誤資訊*/
          Element.Message.error(message);
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}

完整的js

<script>
import Element from 'element-ui';
import router from "@/router";

export default {
  name: "Login",// 密碼資料
        password: ''fjYPDLg,message: '長度在 3 到 10 個字元的賬戶',methods: {
    // 提交表單
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表單驗證成功
          this.$axios.post('/login',this.loginForm).then(res => {
            // 拿到結果
            let result = JSON.parse(res.data.data);
            let message = res.data.msg;
            // 判斷結果
            if (result) {
              /*登陸成功*/
              Element.Message.success(message);
              /*跳轉頁面*/
              router.push('/')
            } else {
              /*列印錯誤資訊*/
              Element.Message.error(message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },// 重置表單
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },// 獲取驗證碼方法
    getVerifyCodeImg() {
      /*獲取驗證碼*/
      this.$axios.get('/getVerifyCode').then(res => {
        // 獲取驗證碼key
        this.loginForm.codeToken = res.data.data.codeToken;
        // 獲取驗證碼圖片
        this.codeImg = res.data.data.codeImg;
      })
    }
  },created() {
    // 頁面渲染完成後執行獲取驗證碼方法
    this.getVerifyCodeImg();
  }
}
</script>

4.4 編寫Mock測試資料

在之前新建的LoginService.js下寫入mock資料

/*繫結Mock*/
const Mock = require('mockjs');
const Random = Mock.Random;

/*設定一個返回資料的通用結果*/
let result = {
  msg: '',data: ''
}

/*模擬資料庫資訊*/
let username = 'xiaolong';
let password = '123456';
let verityCode = 'abcde';

/**
 * 模擬驗證碼
 */
Mock.mock('/getVerifyCode','get',() => {
  result.data = {
    codeToken: Random.string(32),codeImg: Random.dataImage('75x40',verityCode)
  }
  return result;
})

/**
 * 攔截登陸請求
 */
Mock.mock('/login','post',(req) => {
  // 獲取請求資料
  let from = JSON.parse(req.body);
  //判斷驗證碼
  if (verityCode === from.code) {
    // 驗證賬戶
    if (username === from.username) {
      // 驗證密碼
      if (password === from.password) {
        result.msg = '登陸成功'
        result.data = 'true'
      } else {
        result.msg = '密碼錯誤'
        result.data = 'false'
      }
    } else {
      result.msg = '使用者不存在'
      result.data = 'false'
    }
  } else {
    result.msg = '驗證碼錯誤'
    result.data = 'false'
  }
  return result;
})