云音乐vue开发日记

前言

、、打算做一个云音乐全平台生态

---

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.