Vue--登錄頁面

登錄頁面開發

先把項目根目錄下components和views目錄下的文件都刪掉

在  src\router\index.js 中配置路由（把原有的路由配置刪除），如下：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new Route({

});

在  src\views 目錄下新建  login 目錄及此目錄下新建文件  index.vue寫入如下內容

<template>
        <div>
            登錄頁面
        </div>
</template>

我們的組件寫好了，那怎么渲染到頁面呢，先在router下的index.js里配置路由

import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'

// 下面的情況，默認會導入@/views/login下的index.vue組件
import Login from '@/views/login'

Vue.use(Router);


export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名稱
          component: Login // 組件對象
        }
        
      ]
});

這樣我們的路由也就寫好了，在去App.vue里寫組件的渲染出口

<template>
  <div id="app">
    <!-- 組件渲染出口 -->
    <router-view></router-view>
  </div>
</template>

然后啟動服務，訪問login路由

 

上面的流程是先找public下的index.html文件，然后將main.js里的vue實例渲染到index.html里的id=‘app’的標簽上。

main.js導入了App.vue，所以將App.vue里的內容渲染到index.html里，當我們訪問login路由的時候，會在router下的index.js里找login路由，找到之后，找到對應的組件，然后渲染到App.vue里，所以index.html里的id=‘app'的標簽里渲染的內容就是views/login下的index.vue里的內容

使用elementUI

上面我們測試了一下路由，訪問是沒有問題的，現在來結合elementUI做個登錄頁面

在src/views/login/index.vue里寫如下代碼

<template>
  <div class="login-container">
    <el-form ref="form" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">管理系統</h2>
      <el-form-item label="用戶名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style acoped>
.login-form {
  width: 350px;
  margin: 160px auto; /* 上下間距160px，左右自動居中*/
  background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圓角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../../assets/login.png");
}

/* 標題 */
.login-title {
  color: #303133;
  text-align: center;
}
</style> -->

在App.vue里去掉上下邊距和設置字體

<template>
  <div id="app">
    <!-- 組件渲染出口 -->
    <router-view></router-view>
  </div>
</template>

<style >
  body{
    font-family: "微軟雅黑";  /*  設置字體 */
    margin: 0px auto /* 去除上下的邊距*/
  }
</style>

訪問login

 添加表單驗證

上面我們只是實現了登錄的form表單，但是沒有驗證數據輸入的合法性，比如空，或者長度

elementui提供給了我們校驗的方法

Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設置為需校驗的字段名即可

校驗規則：https://github.com/yiminghe/async-validator

修改 src/views/login/index.vue里的代碼

  <template>
    <div class="login-container">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
        <h2 class="login-title">管理系統</h2>
        <el-form-item label="用戶名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密碼" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">登錄</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
    <script>
  export default {
    data() {
      return {
        form: {
          username: "",
          password: ""
        },
        rules: {
          username: [
            {required: true, message: "用戶名不能為空", trigger: 'blur'},
            {min: 3, max: 10, message: "用戶名3-5位", trigger: 'blur'}
          ],
          password: [
            {required: true, message: "密碼不能為空", trigger: 'blur'},
            {min: 3, max: 10, message: "密碼3-5位", trigger: 'blur'}
          ]
      }
      };
    },
    methods: {
      submitForm(formName) {
          this.$refs[formName].validate(valid => {
            // console.log(valid) 驗證通過為true，有一個不通過就是false
            if (valid) {
              // 通過的邏輯
            } else {
              console.log('驗證失敗');
              return false;
            }
          });
      }
    }
  };
  </script>

  <style acoped>
  .login-form {
    width: 350px;
    margin: 160px auto; /* 上下間距160px，左右自動居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圓角 */
  }

  /* 背景 */
  .login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../assets/login.png");
  }

  /* 標題 */
  .login-title {
    color: #303133;
    text-align: center;
  }
  </style> -->

在第三行加上 :rules="rules" 第五行和第八行加上 prop="username" 后面的屬性值自定義，更改39行到47行，第十三行改為 @click="submitForm('form')"，submitForm就是method的方法名。后面的form是第三行的ref屬性。

{required: true, message: "密碼不能為空", trigger: 'blur'},表示當鼠標失去焦點后驗證，必填，如果為空則提示message里的信息

{min: 3, max: 10, message: "密碼3-5位", trigger: 'blur'}表示當鼠標失去焦點后驗證，最小為3位，最大為10位，如果不滿足則提示message里的信息