美化头部header.vue

找张头像当用户头像

在写点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>

效果：

写登录和注册界面

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>

效果：

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

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