前言

、、打算做一個雲音樂全平臺生態

---

2020-11-21

做了什麼事情？
今晚準備做一個vue版本先吧

1.vue中sass的配置

要先下載node 再 下載sass 不然會卡住

npm install  node-sass --save-dev
npm install sass-loader  --save-dev

2.頁面佈局

我是想要好好的自適應佈局，可是el-ui中el-container佈局容器存在高度，怎麼設定才行呢？
給html、body、#app及最外層.el-container的height設定100%即可。

---

看下面的程式碼
要吧入口檔案index.html中的html ，body設定為{height：100%；marign：0；padding：0} 。 再把el-container設定為height：100%；

<template>
  <div class="index">
      <el-container class="el-container">
          <el-header class="el-header">Header</el-header>
          <el-container>
              <el-aside class="el-aside">aside</el-aside>
              <el-main class="el-main">main</el-main>    
          </el-container>
          <el-footer class="el-footer">footer</el-footer>
      </el-container>
  </div>
</template>

<script>
export default {
  name: 'index',
  
}
</script>

<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .index{
        height: 100%;
        width: 100%;
    }

    .el-container{
        height: 100%;
    }
  
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        height: 20%;
    }
  
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        width: 20%;
        height: 100%;
        
    }
  
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: 100%;
        
    }
</style>

3.引元件

太蠢了，居然在子元件的時候沒有宣告元件名稱name：‘sonbutton’ 沒有加引號

2020-11-22

做了什麼事情？
網易雲header aside footer 佈局做完了
明天準備做的的發現頁面佈局和資料掛載

1.el-menu的使用

類似與表格 分割
icon的使用 嵌入選項

2.css經驗

flex解決佈局
要給元素寬高，切記
transform 切換位置 translate
寫個

3.element-ui修改預設樣式

個人覺得這個樣式還是挺難修改的

2020-11-23

做了什麼事情？
banner圖掛載了，安裝了axios

1.el中輪播圖叫走馬燈

程式碼放在下面

<el-carousel indicator-position="outside"  :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in bannerList" :key="item.bannerId">
            
              <img :src="item.pic" alt="" class="banner-img">
            
          </el-carousel-item>
        </el-carousel>

2.vue中axios的使用

Vue.prototype.$axios = axios

this.$axios() 呼叫方法

3.選項卡

下邊容器直接有了

<el-tabs>
      <el-tab-pane label="個性推薦" name="first" class=""></el-tab-pane>
      <el-tab-pane label="歌單" name="second">歌單</el-tab-pane>
      <el-tab-pane label="主播電臺" name="third">主播電臺</el-tab-pane>
      <el-tab-pane label="排行榜" name="fourth">排行榜</el-tab-pane>
      <el-tab-pane label="歌手" name="fifth">歌手</el-tab-pane>
      <el-tab-pane label="最新音樂" name="sixth">最新音樂</el-tab-pane>
  </el-tabs>

2020-11-24

1.網易雲首頁api使用

http://localhost:3000/homepage/block/page
效果就是新版網易雲手機端效果
banner
data.blocks[0].extInfo.banners
推薦歌單
data.blocks[1].creatives

獲取歌單詳情
http://localhost:3000/playlist/detail?id=404999401

2.二級路由頁面替換

跟三級路由搞反了
二級路由是同級替換
三級路由是頁面巢狀

3.頁面間傳值

傳
this.$router.push({name:‘gdye’,params:{id:id}})

接
let id = this.$route.params.id
跟元件傳值搞反了

2020-11-24

1.雙向繫結更新audio中source的src屬性沒有

您的瀏覽器不支援 audio 元素。 在需要動態繫結的方法裡用$refs動態設定src

this.$refs.audio.src = res.data.audio_url
事實證明要修改audio的src屬性

2.eltable獲取任一行資料

<el-table  :data="gdlist.tracks"  stripe  style="width: 100%" @row-click="play">

play(row){
        console.log(row.id)
        let id = row.id

3.兄弟元件子子元件傳值

eventBus.js

import Vue from 'vue'
export default new Vue()

子1 傳

import eventBus from '@/eventBus.js'
eventBus.$emit('song',row.al,row.ar[0].name)

子2 收

import eventBus from '@/eventBus.js'

created() {
      eventBus.$on('song',(message,name)=>{
        console.log(message)
        this.footersong = message
        this.singer  = name
      })
    },

4.再寫播放/暫停功能的時候，報了promise錯誤

原來我把axios請求行在了beforeupdated週期中，每一次點選改變了圖片，觸發函式，重新掛載url，導致播放出了問題，
把axiso請求放到了點選一行接受子子元件傳值的函式裡

2020-11-30

今天寫歌單 三天打魚兩天曬網

1.axios中兩個請求，第一個請求獲取的cat=‘華語’，第二個請求url中包含第一個請求得到的引數，但是第二個拿不到

要怎麼寫啊？
換了一個思路，就是首頁預設，點選分類

2020-12-01

1.陣列的slice擷取方法

this.phbarr = res.data.list.slice(0,4)
this.qqarr = res.data.list.slice(4)
頭 尾

2.props的用法不太熟練，還有ref

vue中mounted取不到props的值
父元件向子元件傳遞引數

子元件使用props獲取

但是當子元件中程式碼非同步的時候，可能會出現mounted中取不到傳遞過來的引數的情況。

解決方式：子元件新增監聽，如下：

export default {
    props: ['itemData'],
    data () {
        return {
        }
    },
    watch:{
      itemData(newValue,oldValue){
        console.log(newValue);
      }
    }
    }

3. this.$router 和this. $route 都不太會

解決vue路由跳轉到同一頁面的重新整理問題

 geshouenter(id){
            this.$router.push({name:'gsxq',query:{id:id}})
        .catch(err => {
            console.log('輸出報錯',err)
          })
        }

問題描述：當我使用路由跳轉頁面時，如果頁面跳轉是同一個路由，傳遞的引數不同時，頁面不重新整理，
如下圖：待收定金和待收首款其實跳轉的是同一個元件 ，只是他們傳遞的引數不同而已。
在這裡插入圖片描述
當我使用路由進行跳轉時，我發現第一次是可以正確跳轉的，比如我當前在其他頁面，當我點選一個“待收定金”他可以正常的跳轉到指定元件去，此時當我再點選“待收首款”時，頁面不重新整理，還是之前的資料，查了很多資料也沒找到合適的解決辦法。
在這裡插入圖片描述
在元件中使用watch也無法監聽到路由的變化，很鬱悶
無法監聽到路由的變化
最後想試試這樣看能否可以：
在這裡插入圖片描述
沒想到將params改成query居然就可以了，頁面可以正常重新整理，雖然目前是問題解決了，也知道params與query的區別，但還沒明白為何此處用params就不能重新整理頁面，而用query就可以重新整理頁面……
params 位址列帶引數
query不帶引數

先記這兒吧，如有答案再來說明，就醬紫~~

2020-12-02

今天早上作專案，發現自己的專案檔案目錄很亂
其次是router-view和router-link用的也不好
slot也是
遇到一個問題就是一個頁面裡面切換 替換頁面元素

之前是使用標籤項

1.v-router文件去看一看

操作 History
你也許注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 實際上它們確實是效仿 window.history API 的。

因此，如果你已經熟悉 Browser History APIs，那麼在 Vue Router 中操作 history 就是超級簡單的。

還有值得提及的，Vue Router 的導航方法 (push、 replace、 go) 在各類路由模式 (history、 hash 和 abstract) 下表現一致。

2.

3.