element ui登录界面_vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（四）美化头部和登录界面...

美化头部header.vue

找张头像当用户头像

在写点css来美化一下头部，完善一下现在能完成的功能

header.vue

:default-active="$route.path"

class="menu"

router

mode="horizontal"

@select="handleSelect"

active-text-color="#000">

v-for="route in $router.options.routes"

v-if="!route.hidden">

v-if="!route.hasChild"

:key="route.path"

:index="route.path" >

{{ route.name }}

{{ route.name }}

v-for="child in route.children"

:index="child.path"

:key="child.path">

{{ child.name }}

login

regin

李小小

我的工作台

退出登录

export default {

// ...

data () {

return {

logined: true

}

},

methods: {

handleSelect () {

console.log()

},

tohome () {

this.$router.push('/')

console.log('home')

},

tologin () {

this.$router.push('/login')

},

toregin () {

this.$router.push('/regin')

}

}

}

.header {

width: 100%;

height: 60px;

margin: 0;

background: #fff;

position: fixed;

top: 0;

left: 0;

box-shadow: 0 0 25px #666;

}

.logo img {

width:60px;

height: 60px;

cursor: pointer;

}

.button {

margin: 15px 0;

}

.avatar {

width: 40px;

height: 40px;

border-radius: 20px;

margin: 10px 0;

cursor: pointer;

}

效果：

写登录和注册界面

login.vue

:model="LoginForm"

ref="LoginForm"

:rules="rule"

label-width="0"

class="login-form">

用户登录系统

type="text"

v-model="LoginForm.username"

placeholder="username" >

type="password"

v-model="LoginForm.password"

placeholder="password" >

type="danger"

class="submitBtn"

round

@click.native.prevent="submit"

:loading="logining">

登录

type="primary"

class="resetBtn"

round

@click.native.prevent="reset">

重置

---

还没有账号，马上去注册

export default {

// ....

data () {

return {

LoginForm: {

username: '',

password: ''

},

logining: false,

rule: {

username: [

{

required: true,

max: 14,

min: 7,

message: '用户名是必须的，长度为7-14位',

trigger: 'blur'

}

],

password: [

{

required: true,

message: '密码是必须的！',

trigger: 'blur'

}

]

}

}

},

methods: {

// ...

submit () {

this.$refs.LoginForm.validate(valid => {

if (valid) {

this.logining = true

console.log('开始请求后台数据，验证返回之类的操作！')

} else {

console.log('submit err')

}

})

},

reset () {

this.$refs.LoginForm.resetFields()

},

toregin () {

this.$router.push('/regin')

}

}

}

.login-form {

margin: 20px auto;

width: 310px;

background: #fff;

box-shadow: 0 0 35px #B4BCCC;

padding: 30px 30px 0 30px;

border-radius: 25px;

}

.submitBtn {

width: 65%;

}

.to {

color: #67C23A;

cursor: pointer;

}

效果：

数据验证以及重置都是写好的，但登录最重要的逻辑还没写，这个须要去数据库找数据验证，所以先把注册页面也写好，然后连个数据库在写逻辑

其实真正用的话应该写成第三方登录注册，用微信或者微博的api,这样比较安全，也可以做一个双层登录验证，但这是本地项目也只能写个简单的试一下了