avatar.jpg.jpg
找张头像当用户头像
在写点css来美化一下头部，完善一下现在能完成的功能
header.vue
<template>
<el-row class="header">
<!-- 左边logo -->
<el-col :span="4" class="logo">
<img @click="tohome" src="../assets/logo.png" alt="">
</el-col>
<!-- 中间导航区域 -->
<el-col class="main" :span="16">
<el-menu
:default-active="$route.path"
class="menu"
router
mode="horizontal"
@select="handleSelect"
active-text-color="#000">
<!-- 循环写的路由，其中路由中有 hidden：true 的就不加入循环 -->
<template
v-for="route in $router.options.routes"
v-if="!route.hidden">
<!-- 循环没有children的路由 -->
<el-menu-item
v-if="!route.hasChild"
:key="route.path"
:index="route.path" >
<i :class="route.class"></i>
{{ route.name }}
</el-menu-item>
<!-- 循环有children的路由 -->
<el-submenu v-else :index="route.path">
<template slot="title">{{ route.name }}</template>
<el-menu-item
v-for="child in route.children"
:index="child.path"
:key="child.path">
{{ child.name }}
</el-menu-item>
</el-submenu>
</template>
</el-menu>
</el-col>
<!-- 右边用户信息以及登陆注册 -->
<el-col :span="4" class="user">
<!-- 根据logined值的真假来判断是显示登录按钮还是用户信息
以后根据登录状态来改变 -->
<el-button-group v-if="!logined" >
<el-button class="button" @click.native="tologin" type="danger" size="small" round >login</el-button>
<el-button class="button" @click.native="toregin" type="success" size="small" round >regin</el-button>
</el-button-group>
<div v-else>
<el-dropdown>
<img class="avatar" src="../assets/avatar.jpg" alt="">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>李小小</el-dropdown-item>
<el-dropdown-item>我的工作台</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
</el-row>
</template>
<script>
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')
}
}
}
</script>
<style scoped>
.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;
}
</style>效果：
Image 027.png
Image 028.png
然后写登录和注册界面
login.vue
<template>
<el-main>
<el-form
:model="LoginForm"
ref="LoginForm"
:rules="rule"
label-width="0"
class="login-form">
<h3>用户登录系统</h3>
<el-form-item prop="username">
<el-input
type="text"
v-model="LoginForm.username"
placeholder="username" >
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="LoginForm.password"
placeholder="password" >
</el-input>
</el-form-item>
<el-form-item >
<el-button
type="danger"
class="submitBtn"
round
@click.native.prevent="submit"
:loading="logining">
登录
</el-button>
<el-button
type="primary"
class="resetBtn"
round
@click.native.prevent="reset">
重置
</el-button>
<hr>
<p>还没有账号，马上去<span class="to" @click="toregin">注册</span></p>
</el-form-item>
</el-form>
</el-main>
</template>
<script>
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')
}
}
}
</script>
<style scoped>
.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;
}
</style>效果：
Image 029.png
数据验证以及重置都是写好的，但登录最重要的逻辑还没写，这个须要去数据库找数据验证，所以先把注册页面也写好，然后连个数据库在写逻辑
其实真正用的话应该写成第三方登录注册，用微信或者微博的api,这样比较安全，也可以做一个双层登录验证，但这是本地项目也只能写个简单的试一下了