10月18号19号20号三天PC端云音乐项目总结

Posted 2021-11-10 усил

先展示成果

• 主页🥰
  
• 歌单页🥰
  
  

三天干了啥

• ✨对 axios 请求进行封装，减少代码的重复率，提高代码利用率，并且方便项目管理

• ✨对一些数据进行格式处理（日期，毫秒转分钟，播放量）

  // 格式化日期
  _tranDate(str) {
    let date = new Date(str);
    let year = date.getFullYear();
    let mouths = date.getMonth() + 1;
    let day = date.getDate();
    mouths = mouths < 10 ? `0${mouths}` : mouths;
    day = day < 10 ? `0${day}` : day;
    return `${year}-${mouths}-${day}`;
  }

  // 数据字符串化
  _arrToString(arr) {
    let str = "";
    arr.forEach(e => {
      str += e.id + ",";
    });
    str = str.slice(0, str.length - 1);
    return str;
  }

  // 时长转换
  _msTos(ms) {
    let min = Math.floor(ms / 60000);
    let sec = Math.ceil(ms % 60000 / 1000);
    sec = sec > 10 ? sec : "0" + sec;
    return `${min}分${sec}秒`
  }

• ✨对每个页面所使用到的组件进行整合，方便管理
  

• ✨歌单页面实现对数据的分页处理

<el-pagination
     :background="true"
     layout="total, sizes, prev, pager, next ,jumper"
     :page-size="commentNum"
     :page-sizes="[5, 10, 20]"
     :total="total"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange" 
     >
</el-pagination>

data: {
   // 评论信息
   commentList: [],
   commentNum: 10,
   commentPage: 0,
}
 // 监听 页大小 改变事件
 handleSizeChange(newsize) {
    // 最新的条数（newsize）赋值给 动态的 commentNum
    this.commentNum = newsize;
    //获取到最新一页显示的数据
    this.getcomment();
 },
 // 监听 页码值 改变的事件
 handleCurrentChange(newPage) {
    //把最新的页码（newPage）赋值给 动态的 commentPage
    this.commentPage = newPage;
    //获取到最新显示的页码值  重新发送axios请求
    this.getcomment();
},

接着上一次的问题

请求数据与渲染速度不对等

我之前想到的方法就是监听请求回来的数据后，在给静态的 html 添加类名，确实针对新碟组件的分页器是可以的。虽然用户看不出来，但本质上是渲染在页面上了🤣。

而在下面的小例子中，就可以看出之前的方法是不可行的，需要特定条件✨

<div id="app">
    <div class="">静态html</div>
    <div class="">动态{{mydata}}</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
          mydata: "",
        },
        // 程序创建后
        created() {
          // 获取数据（模拟发送 ajax）
          this.getmydata();
        },
        methods: {  
          getmydata() {
            // 模拟后台数据处理返回
            setTimeout( () =>{
              this.mydata = "后台数据";
            }, 1000);
          },
        },
    })
</script>

所以按照之前的方法移除类名是不可行，除非你一开始就将文本隐藏掉，但后期会很复杂。🤣

✨更好的解决方法就是：结合 v-if 来使用

<div id="app" v-if="flag>
    <div class="">静态html</div>
    <div class="">动态{{mydata}}</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
          mydata: "",
          flag: false,
        },
        watch: {
             mydata: function() {
                 this.flag = true;
             }
         },
        // 程序创建后
        created() {
          // 获取数据（模拟发送 ajax）
          this.getmydata();
        },
        methods: {  
          getmydata() {
            // 模拟后台数据处理返回
            setTimeout( () =>{
              this.mydata = "后台数据";
            }, 1000);
          },
        },
    })
</script>

这样就可以解决，❤但这种方法适用于数据量不大的地方，如果数据过大，请求的时间过长，此时程序得一直等待着，造成不必要的资源浪费❤。

总结

这三天，✨第一天发现很多代码是可以复用的，所以第一天是对项目一些共有的方法进行抽离到一个模块中。以便后期使用时，直接调包即可。✨而第二天主要是开发剩余的主页和歌单的部分组件以及处理mv组件的接口。✨今天就是完成歌单的所有内容。今天晚上想将俩个页面部署到vercel 但出现跨域，经过找资料，还是没找到解决方法。但这个也不急，所以目前没把精力放在这里🥰。而且今天发现，虽然18号对一些代码有进行抽离，但还是发现有一个地方出现重复，loading组件其实可以通过 vuex 来控制即可，并且在 APP.vue引入即可。不用每一个页面都引入🤣。

PC端云音乐项目专栏