先展示成果

  • 主页🥰
  • 歌单页🥰

三天干了啥

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


  • ✨对一些数据进行格式处理(日期,毫秒转分钟,播放量)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 格式化日期
_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}秒`
}
  • ✨对每个页面所使用到的组件进行整合,方便管理

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

1
2
3
4
5
6
7
8
9
10
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 添加类名,确实针对新碟组件的分页器是可以的。虽然用户看不出来,但本质上是渲染在页面上了🤣。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 来使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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端云音乐项目专栏