vue-登錄頁面的實現

准備：axios elementUI  vue-router

 

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

 

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

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

Vue.use(Router);

export default new Router({

});

在  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里的代碼

 1   <template>
 2     <div class="login-container">
 3       <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
 4         <h2 class="login-title">管理系統</h2>
 5         <el-form-item label="用戶名" prop="username">
 6           <el-input v-model="form.username"></el-input>
 7         </el-form-item>
 8         <el-form-item label="密碼" prop="password">
 9           <el-input v-model="form.password"></el-input>
10         </el-form-item>
11 
12         <el-form-item>
13           <el-button type="primary" @click="submitForm('form')">登錄</el-button>
14         </el-form-item>
15       </el-form>
16     </div>
17   </template>
18     <script>
19   export default {
20     data() {
21       return {
22         form: {
23           username: "",
24           password: ""
25         },
26         rules: {
27           username: [
28             {required: true, message: "用戶名不能為空", trigger: 'blur'},
29             {min: 3, max: 10, message: "用戶名3-5位", trigger: 'blur'}
30           ],
31           password: [
32             {required: true, message: "密碼不能為空", trigger: 'blur'},
33             {min: 3, max: 10, message: "密碼3-5位", trigger: 'blur'}
34           ]
35       }
36       };
37     },
38     methods: {
39       submitForm(formName) {
40           this.$refs[formName].validate(valid => {
41             // console.log(valid) 驗證通過為true，有一個不通過就是false
42             if (valid) {
43               // 通過的邏輯
44             } else {
45               console.log('驗證失敗');
46               return false;
47             }
48           });
49       }
50     }
51   };
52   </script>
53 
54   <style acoped>
55   .login-form {
56     width: 350px;
57     margin: 160px auto; /* 上下間距160px，左右自動居中*/
58     background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
59     padding: 30px;
60     border-radius: 20px; /* 圓角 */
61   }
62 
63   /* 背景 */
64   .login-container {
65     position: absolute;
66     width: 100%;
67     height: 100%;
68     background: url("../../assets/login.png");
69   }
70 
71   /* 標題 */
72   .login-title {
73     color: #303133;
74     text-align: center;
75   }
76   </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里的信息