vue vue-router vuex element-ui axios 寫一個代理平臺的學習筆記（四）美化頭部和登陸界面

美化頭部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,這樣比較安全，也能夠作一個雙層登陸驗證，但這是本地項目也只能寫個簡單的試一下了