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里的信息