vue mysql登录界面_17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-登录页面

我这里的页面一般分为三部分：html、js和css。接下来开启我们的页面构建之旅。

一、 想实现的效果

登录页面

二、 页面实现

1. html

首先我们想将登录的布局写出来。

周报管理系统登录

登录

重置

2. css

然后来写一下登录页面的样式，我一些共用的样式，统一放在了全局的scss文件里，页面里只放一些这个页面独有的样式。

.login-container{position: relative; width: 100vw; height: 100vh;background-image:url('../assets/images/login_bg.png'); background-size: cover; overflow: hidden;

.login-main{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-clip: padding-box; width: 350px; padding: 35px 35px 15px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6;

h3{text-align: center;}

.btn-box{text-align: center;}

}

}

3. JS

接下来就是我们的重中之重JS了，在这个页面里我用js主要实现一下功能：登录表单验证、登录请求和登录成功之后的跳转。

import { userLogin } from '@/config/interface'

export default {

data () {

// 用户名和密码的验证规则

const validate = (rule, value, callback) => {

const reg = /^[0-9a-zA-Z]*$/g

if (!value) {

callback(new Error('请输入内容'))

} else if (value.length < 3 || value.length > 6) {

callback(new Error('内容长度需在 3 到 6 个字符'))

} else if (!reg.test(value)) {

callback(new Error('内容需为字母或数字'))

} else {

callback()

}

}

return {

formData: {

name: null,

password: null

},

formRules: {

name: [

{ validator: validate, trigger: 'blur' }

],

password: [

{ validator: validate, trigger: 'blur' }

]

},

reqFlag: {

login: true

}

}

},

methods: {

// 登录请求

submitLogin (formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

const url = userLogin

if (this.reqFlag.login) {

this.reqFlag.login = false

let params = {

name: this.formData.name,

password: this.$md5(this.formData.password)

}

this.$http(url, params)

.then(res => {

if (res.code == 1) {

let data = res.data

localStorage.setItem('userInfo', JSON.stringify(data))

this.$store.dispatch('saveUserInfo', data)

this.$common.toast('登陆成功', 'success', false)

// 登陆成功后跳转到用户管理页面

this.$router.push({

path: '/home/user',

query: {}

})

}

this.reqFlag.login = true

})

}

} else {

console.log('error submit!!')

return false

}

})

},

// 重置登录填写的信息

resetForm (formName) {

this.$refs[formName].resetFields()

}

}

}

至此，我的登录界面就算是完成了。

三、项目体验链接