Vuejs實戰項目：登陸頁面

1、在view文件夾下創建login文件夾，創建index.vue：代表登錄的組件

配置router.js,導入登錄組件

import Vue from "vue";
import Router from "vue-router";
// 導入登錄組件’
import Login from './views/login/index.vue'

Vue.use(Router);

export default new Router({
  // mode: "history",
  //base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',  //路由名稱
      component: Login  //組件對象
    }

  ]
});

2、結合Element-UI編寫index.vue,index.vue的目錄為：views/login/index.vue

<template>
    <div class="login-container">
        <bubbles-effect :options="options"></bubbles-effect>
      <el-form ref="form" :model="form" label-width="80px" class="login-form">
        <h2 class="login-title" style="center">后台管理系統登錄</h2>
        <el-form-item label="賬號" class="box">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密碼" class="box">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登錄</el-button>
          <el-button class="cancle">取消</el-button>
        </el-form-item>
      </el-form>
      
    </div>
    
    <!-- <vue-canvas-nest></!-->

</template>


<script>
import vueCanvasNest from "vue-canvas-nest";
//   import bubblesEffect from 'vue-canvas-effect'

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      options: {
        color: "rgba(225,225,225,0.5)", //Bubble color
        radius: 15, //Bubble radius
        densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
        clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
      }
    };
  },
  components: {
    vueCanvasNest
    // bubblesEffect
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>


<style scoped>
.login-form {
  width: 350px;
  /* 上下嫌隙 160px，左右自動居中 */
  margin: 160px auto;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 28px;
  border-radius: 20px;
  /* border: solid 1px black; */
  box-shadow: 0 0 30px 3px rgba(119,118,118,0.33);
}

.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-title {
  color: #303133;
  text-align: center;
}

.cancle {
    margin-left: 80px; 
}

.box {
     margin-left: 0px; 
}
</style>

---

3、表單驗證

　　1、在el-form中導入 :rules="rules"，el-form-item導入pro=“屬性名稱”

在export的data中配置rules：

 rules: {
        username: [
            { required: true, message: '密碼不能為空', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密碼不能為空', trigger: 'blur' }
        ]
      },

配置methods：

methods: {
    submitForm(formName) {
        //定位到表單，再進行校驗
        this.$refs[formName].validate(valid => {
            // console.log(valid)      //成功為true，失敗為false
            if(valid){
                // 提交表單給后台進行驗證是否正確
            }else{
                console.log('驗證失敗')
                return false
            }
        })
    },
//     onSubmit() {
//       console.log("submit!");
//     }
//   }
  }

---

4、easyMock添加系統登錄后台服務接口

　　1、修改.env.develoment文件中的目標服務接口地址---------VUE_APP_SERVICE_URL

　　2、配置 Mock.js，創建新的接口

　　　　①當登錄成功后，響應狀態碼2000和token值，token用來認證（后面請求只要是成功的，狀態碼均為2000，這個是與后台接口的約定）

　　*　　請求URL：/user/login

　　*　　請求方式：post

　　*　　描述： 登錄認證

　　*　　mock.js 接口配置：

{
  "code": 2000, //狀態碼
  "flag": true,
  "message": '驗證成功',
  "data": {
    "token": "admin"
  }
}

　　　　②通過token獲取用戶信息：

　　　　　　添加響應用戶信息模擬接口：

　　　　　　*　　請求URL：/user/info/{token}

　　　　　　*　　請求方式：get

　　　　　　*　　描述：響應用戶信息

　　　　　　*　　mock.js 配置

{
  "code": 2000,
  "flag": true,
  "message": '成功獲取用戶信息',
  "data": {
    "id|1-10000": 1,
    "name": "@cname",
    "roles": ["manager"]
  }
}

---

5、登錄邏輯實現

在src/api 下創建login.js，導出兩個方法

import request from '@/utils/request'

// 導出函數
export function login(username, password) {
    return request({
        url: '/user/login',
        method: 'post',
        data: {
            username,   //username: username
            password
        }
    })
}

// 獲取返回的用戶信息
export function getUserInfo(token) {
    return request({
        url:  `/user/info/${token}`,
        method: 'get'
    })
}

表單校驗：

methods: {
    submitForm(formName) {
        //定位到表單，再進行校驗
        this.$refs[formName].validate(valid => {
            // console.log(valid)      //成功為true，失敗為false
            if(valid){
                // 提交表單給后台進行驗證是否正確,then后面傳入回調函數
                login(this.form.username,this.form.password).then(response => {
                    const resp = response.data
                    console.log(resp,resp.flag,resp.data.token)
                    if (resp.flag) {
                        // 當resp.flag為true時，表示驗證成功
                        // 通過token獲取用戶信息
                        getUserInfo(resp.data.token).then(response => {
                            const respUser = response.data
                            console.log(respUser)
                            if (respUser.flag){
                                // 獲取到用戶的數據
                                //成功
                                console.log('userInfo',respUser.data)
                                //  1.保存token，用戶信息
                                localStorage.setItem('msm-user', JSON.stringify(respUser.data))
                                localStorage.setItem('msm-token', resp.data.token)
                                //  前往首頁
                                this.$router.push('/')
                            }else{
                                this.$message.error(respUser.message);
                            }
                            
                        })
                    }else {
                        // 未通過，彈出警告
                        this.$message.error(resp.message);
                    }
                })

            }else{
                console.log('驗證失敗')
                return false
            }
        })
    },
//     onSubmit() {
//       console.log("submit!");
//     }
//   }
  }