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 属性设置为需校验的字段名即可修改 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() {
21return {
22 form: {
23 username: "",
24 password: ""
25 },
html怎么实现登录验证功能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) {
40this.$refs[formName].validate(valid => {
41// console.log(valid) 验证通过为true，有⼀个不通过就是false
42if (valid) {
43// 通过的逻辑
44 } else {
45 console.log('验证失败');
46return 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⾥的信息
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论