Vue登录页面
登录页面开发
调整项目目录结构如下
其中 src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from "./module/user";
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
modules:{
user
}
})
src\store\module\user.js
const state = {
//
}
const mutation = {
//
}
const action = {
//
}
export default {
state,
mutation,
action
}
src\router\router.js
export default [
{
// 命名路由，在router-link中，to属性 :to="{name: 'login'}"
path: '/',
name: 'login', // 路由名称
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/login/login')
},
{
path: '/login',
name: 'login', // 路由名称
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/login/login')
},
{
// 动态路由
path: '/argu/:name',
component: () => import('@/views/argu.vue')
},
{
// 嵌套路由
path: '/parent',
component: () => import('@/views/parent.vue'),
children: [
// 嵌套在 parent 里面的子页面
{
path: 'child',
component: () => import('@/views/child.vue')
}
]
}
]
在 src\router\index.js 中配置路由
import Vue from 'vue'
import Router from 'vue-router'
import routes from "./router";
Vue.use(Router)
export default new Router({
routes: routes
})
在 src\views 目录下新建 login 目录及此目录下新建文件 login.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>
<script>
export default {
name: 'app',
comments: {
}
}
</script>
<style lang="less">
body{
font-family: '微软雅黑'; /* 设置字体 */
margin: 0 auto /* 去除上下的边距*/
}
</style>
访问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下的 login.vue里的内容
添加表单验证
上面我们只是实现了登录的form表单，但是没有验证数据输入的合法性，比如空，或者长度
elementui提供给了我们校验的方法
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
校验规则：https://github.com/yiminghe/async-validator
修改 src/views/login/login.vue里的代码
<template>
<div class="login-container">
<el-form ref="form" :rules="LoginRules" :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" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></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: ""
},
LoginRules: {
username: [
{required: true, message: "用户名不能为空", trigger: "blur"},
{min: 3, max: 16, message: "用户名3-16位", trigger: "blur"}
],
password: [
{required: true, message: "密码不能为空", trigger: "blur"},
{min: 6, max: 16, message: "请输入6-16位的密码", trigger: "blur"}
]
}
};
},
methods: {
submitForm(form) {
this.$refs[form].validate(valid =>{
// let val = {
// // 定义发送给后端的输入框的值
// username: this.submitForm.username
// }
if (valid){
alert("验证通过");
} else {
console.log("验证失败");
alert("验证失败");
return false;
}
});
}
}
};
</script>
<style acoped>
.login-form {
width: 350px;
margin: 160px auto; /* 上下间距160px，左右自动居中*/
background-color: rgba(255, 255, 255, 0.8); /* 透明背景色 */
padding: 30px;
border-radius: 20px; /* 圆角 */
}
/* 背景 */
.login-container {
position: absolute;
width: 100%;
height: 100%;
background: url("../../assets/img/login.png") no-repeat;
background-size:100% 100%;
}
/* 标题 */
.login-title {
color: #303133;
text-align: center;
}
</style>
在第三行加上 :rules="LoginRules" 指定使用哪个校验规则
第五行和第八行加上 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里的信息
运行
