loginrequired注解_SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

一、Login校验规则

2、Login.vue页面

提交

重置

export default {

data() {

return {

// 表单数据对象

loginForm: {

username: "username",

password: "password"

},

// 验证对象

loginRules: {

//用户名

username:[

//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点

{ required: true, message: '请输入用户名称', trigger: 'blur' },

//长度验证

{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }

],

//密码

password:[

//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点

{ required: true, message: '请输入用户密码', trigger: 'blur' },

//长度验证

{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }

]

}

};

},

};

// 根节点样式

.login_container {

background-color: #2b4b6b;

height: 100%;

}

.login_box {

width: 450px;

height: 300px;

background-color: #ffffff;

border-radius: 3px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

.acator_box {

width: 130px;

height: 130px;

border: 1px solid #eeeeee;

border-radius: 50%;

padding: 10px;

box-shadow: 0 0 10px #dddddd;

position: absolute;

left: 50%;

transform: translate(-50%, -50%);

background-color: #00eeee;

img {

width: 100%;

height: 100%;

border-radius: 50%;

background-color: #eeeeee;

}

}

}

.btns {

display: flex;

justify-content: flex-end;

}

.login_form {

position: absolute;

bottom: 0%;

width: 100%;

padding: 0 10px;

box-sizing: border-box;

}

3、运行结果

思考：

Element UI作为一个CSS框架，竟然能够进行表单验证，我想这肯定内部封装了JS；

二、实现登录和重置事件

1、在main.js中导入axios

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import './plugins/element.js'

//导入全局样式

import './assets/css/global.css'

//引入图标

import './assets/font/iconfont.css'

//导入axios

import axios from 'axios'

//挂载

Vue.prototype.$http = axios

//设置访问根路径

axios.defaults.baseURL = "http://localhost:9000"

Vue.config.productionTip = false

new Vue({

router,

<