回顾重做美食杰项目(二)--正在奔向你的路途之中

本篇博文开始我将带领所有玩家一起完成美食杰项目,就算是小白也能做到.

这篇将是记录今天下午完成的首页中的header部分

下面这组代码是首页template的结构:

<template>
  <el-header style="height: auto;">
    <div class="header">
      <div class="header_c">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="6">
            <a href="" class="logo">
            </a>
          </el-col>
          <el-col :span="10" :offset="2"></el-col>
          <el-col :span="6" :offset="3" class="avatar-box"  v-if="isShow">
            <router-link :to="{name:'space',query:{userId:this.$store.state.userInfo.userId}}">
              <el-avatar style="vertical-align: middle;" shape="square" size="medium" :src="this.$store.state.userInfo.avatar" ></el-avatar>
              <!--  -->
            </router-link>
            <router-link to="" class="user-name"></router-link>
            <router-link :to="{name:'create'}" class="collection">发布菜谱</router-link>
            <a href="javascript:;" class="collection" @click="remove()">退出</a>
          </el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-if="!isShow">
            <router-link :to='{name:"login"}' class="user-name">登录</router-link>
            <router-link :to="{name:'login'}" class="collection">注册</router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav_c">
        <Menus></Menus>
      </div>
    </div>
  </el-header>
</template>

CSS样式

<style lang="stylus">
.header 
  height 129px
  background-color #c90000
   
  .logo 
    display: block;
    height: 129px;
    width: 184px;
    background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;

.header_c, .nav_c
  width 990px
  margin 0 auto 
.nav-box 
  height 60px
  background-color #fff;
  box-shadow 10px 0px 10px rgba(0,0,0,0.3)


.user-name
  margin-left 5px
  color #fff

.collection 
  margin-left 5px  
  color #fff

</style>

JavaScript交互

<script>
import Menus from '@/components/menus'
import {login_out} from '@/service/api'
export default {
  name: 'headers',
  components: {Menus},
 
  computed:{
    isShow(){
      const token = localStorage.getItem('token')
      if(token){
        return true
      }else{
        return false
      }
    }
  },
  methods:{
    remove(){
      login_out().then(()=>{
        if(confirm('确定退出')){
          localStorage.removeItem('token')
          this.$store.commit('chnageUserInfo','')
          this.$router.push({
            name:'home'
          })
      }
      })
      
    }
  }
}
</script>

项目中引入的组件,可以私信我获取.以上就是首页登录注册实现.

正在奔向你的路途之中----再会!