码迷,mamicode.com
首页 > 其他好文 > 详细

Vue--登录页面

时间:2020-01-23 00:11:59      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:不能   height   containe   view   透明背景   路由配置   efault   path   http   

登录页面开发

先把项目根目录下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里的代码

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

Vue--登录页面

标签:不能   height   containe   view   透明背景   路由配置   efault   path   http   

原文地址:https://www.cnblogs.com/zouzou-busy/p/11741407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!