vue怎么写登录页面加上mysql_【Vue-Element-Template】添加自己的登录页面（一）

后台登录系统

ref="username"v-model="myLoginForm.username"tabindex="1"placeholder="请输入用户名"name="username"auto-complete="on"type="text"

/>

:key="passwordType"ref="password"v-model="myLoginForm.password"tabindex="2"placeholder="请输入密码"name="password"auto-complete="on":type="passwordType"@keyup.enter.native="handleLogin"

/>

登 录

username: admin

password: any

name:'MyLogin2',

data() {

const validatePassword= (rule, value, callback) =>{if (value.length < 6) {

callback(new Error('输入密码不能太短'))

}else{

callback()

}

}

const validateUsername= (rule, value, callback) =>{if (value.length <= 0) {

callback(new Error('请输入用户名'))

}else{

callback()

}

}return{//表单元素绑定的初始mode值

myLoginForm: {

username:'admin',

password:'123456'},//表单元素的验证规则

myLoginRole: {

username: [{ required:true, trigger: 'blur', validator: validateUsername }],

password: [{ required:true, trigger: 'blur', validator: validatePassword }]

},

loading:false,

passwordType:'password',

redirect: undefined

}

},

watch: {

$route: {

handler:function(route) {

console.log(route.query)

console.log(route.query.redirect)this.redirect = route.query &&route.query.redirect

},//立即执行

immediate: true}

},

methods: {

showPwd() {if (this.passwordType === 'password') {this.passwordType = ''}else{this.passwordType = 'password'}//如果你在数据改变之后的操作跟改变之后的DOM有关

this.$nextTick(() =>{this.$refs.password.focus() //设置password控件被聚焦

})

},

handleLogin() {this.$refs.myLoginForm.validate(valid =>{//如果验证通过返回true，直接将提交按钮置为加载中，同时提交数据

if(valid) {this.loading = true

this.$store

.dispatch('user/Mylogin', this.myLoginForm)

.then(()=>{this.$router.push({ path: this.redirect || '/' }) //路由传值，用于导航到下一个页面 登录成功之后重定向this.redirect或者'/'首页

this.loading = false})

.catch(err =>{this.$message.error(err) //登录失败提示错误

this.loading = false})

}else { //如果验证失败打印日志，同时返回false

console.log('error submit!!')return false}

})

}

}

}

/*修复input 背景不协调 和光标变色*/

/*Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927*/$bg:#283443;

$light_gray:#fff;

$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {

.login-container .el-input input {

color: $cursor;

}

}/*reset element-ui css*/.login-container {

.el-input {

display: inline-block;

height: 47px;

width:85%;

input {

background: transparent;

border: 0px;-webkit-appearance: none;

border-radius: 0px;

padding: 12px 5px 12px 15px;

color: $light_gray;

height: 47px;

caret-color: $cursor;&:-webkit-autofill {

box-shadow: 0 0 0px 1000px $bg inset !important;-webkit-text-fill-color: $cursor !important;

}

}

}

.el-form-item {

border: 1px solid rgba(255, 255, 255, 0.1);

background: rgba(0, 0, 0, 0.1);

border-radius: 5px;

color: #454545;

}

}

$dark_gray:#889aa4;

$light_gray:#eee;

.login-container {

min-height: 100%;

width:100%;

background-color: $bg;

overflow: hidden;

.login-form {

position: relative;

width: 520px;

max-width: 100%;

padding: 160px 35px0;

margin:0auto;

overflow: hidden;

}

.tips {

font-size: 14px;

color: #fff;

margin-bottom: 10px;

span {&:first-of-type {

margin-right: 16px;

}

}

}

.svg-container {

padding: 6px 5px 6px 15px;

color: $dark_gray;

vertical-align: middle;

width: 30px;

display: inline-block;

}

.title-container {

position: relative;

.title {

font-size: 26px;

color: $light_gray;

margin: 0px auto 40px auto;

text-align: center;

font-weight: bold;

}

}

.show-pwd {

position: absolute;

right: 10px;

top: 7px;

font-size: 16px;

color: $dark_gray;

cursor: pointer;

user-select: none;

}

}