Day20 vue.js椅毒供毒之整理code

写出不乾净的code跟WEED一样 一开始写的时候可能会感到轻松快乐
但是後续的维护或修改会把自己搞得进退两难
所以今天我们来把code好好整理
由於要把整个code大整理要删除一大票东西所以完全是以毒攻毒

首先我把部分的get session 放在methods里面
再用mounted 去取得这function
以下片段取自navbar.vue

 methods:{
      logout(){
       
        sessionStorage.clear();
         alert("登出成功")  
        this.$router.push({name:'Login'})
          window.location.reload()
      },
      async GetSession(){
           let user=sessionStorage.getItem('user-info');
     if(user){  
      
       this.login=false
        }
      else{
  
        this.login=true
      }
      this.username=JSON.parse(user).username
      this.useraccount=JSON.parse(user).id

      }
    
    },
    
   async mounted(){
   
    // let user=sessionStorage.getItem('user-info');
    // this.username=JSON.parse(user).username
    //   this.useraccount=JSON.parse(user).id
    //   if(user){
    //     this.login=false
    //   }
    this.GetSession()
      
    },

这麽做的原因是让code的易读性可以高一点 把大部分东西包在function里面
再去取function

我这麽做之後 原本day15的问题也随之解除了
再来就是解决nav bar rwd的问题
之前的nav bar 只要缩小成手机比例 整个画面就会异常的壅挤看起来非常不舒服

所以接下来就好好解决这个问题
接下来到网路爬了文(https://codesandbox.io/embed/14ry9r3lll)
原本的v-tool bar 变成这样
基本上改动的地方只有 多了个class=”hidden-sm-and-down”
这样一来在只要萤幕尺寸小於960px 则会隐藏

再来则是新增一个

<v-app-bar-nav-icon @click="drawer=!drawer"  >
         </v-app-bar-nav-icon>

在data设定变数名称为 drawer:false
去设定 drawer的layout
并且给他一个v-model (drawer = true时才会显示出来)
至於这个layout 就是参考 vuetify的(感谢vuetify 赞叹vuetify)

<v-navigation-drawer app v-if="drawer" class="pa-4" color="indigo darken-1">
    <v-app-bar-nav-icon @click="drawer=!drawer" class="white--text"></v-app-bar-nav-icon> 
    <v-list>
      <v-list-item v-for="data2 in nav_bar_links" :key="data2.title" router :to="data2.routes" >
          <v-list-item-action>
              <v-icon class="white--text">{{data2.icon}}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
               <v-list-item-title class='white--text'>
                   {{data2.title}}
               </v-list-item-title>
             
          </v-list-item-content>
      </v-list-item>
 

      <v-list-item v-if="login!=true"  router :to="'/account/'+useraccount" >
          <v-list-item-action>
              <v-icon class="white--text">mdi-account</v-icon>
          </v-list-item-action>
          <v-list-item-content>
               <v-list-item-title class='white--text'>
                   帐户
               </v-list-item-title>
          </v-list-item-content>
             </v-list-item>

        <v-list-item v-if="login"  router :to="'/login'" >
          <v-list-item-action>
              <v-icon class="white--text">mdi-account</v-icon>
          </v-list-item-action>
          <v-list-item-content>
               <v-list-item-title class='white--text'>
                   登入
               </v-list-item-title>
      </v-list-item-content>
        </v-list-item>

            <v-list-item v-if="login!=true"  @click="logout" >
          <v-list-item-action>
              <v-icon class="white--text">mdi-exit-to-app</v-icon>
          </v-list-item-action>
          <v-list-item-content>
               <v-list-item-title class='white--text'>
                   登出
               </v-list-item-title>
      </v-list-item-content>
      
        </v-list-item>
    </v-list>
    </v-navigation-drawer>

这样就完成了!!

最後我在创一个 footer 让整个网站看起来比较完整
在component 创一个footer.vue
程序码如下

<template>
  <v-footer padless class="indigo lighten-5">
    <v-col
      class="text-center"
      cols="12"
    >
    <v-icon>mdi-flash</v-icon><strong>13th铁人赛</strong> <v-icon>mdi-flash</v-icon> 
    </v-col>
  </v-footer>
</template>
<script>
  export default {
  
  }
</script>

在import 到app.vue里面(位置记得要放对)

今天稍微回顾了一下前19天做了什麽
以及稍微整理了一下程序码
避免有人看到我们的code的时候说出 唉唷我没想到你是这样的人耶
明天就把我的专案的功能完善吧!
预计做出可以修改删除专案的功能
我们明天见!