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><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">el-form-item</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">el-button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> @click</span><span style="color: rgba(0, 0, 255, 1)">="onSubmit"</span><span style="color: rgba(0, 0, 255, 1)">></span>登录<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">el-button</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">el-form-item</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">el-form</span><span style="color: rgba(0, 0, 255, 1)">></span></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 里的信息