先展示成果
-
主页🥰
image -
歌单页🥰
image
image
image
三天干了啥
- ✨对 axios 请求进行封装，减少代码的重复率，提高代码利用率，并且方便项目管理
image
image
- ✨对一些数据进行格式处理（日期，毫秒转分钟，播放量）
// 格式化日期
_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}秒`
}
-
✨对每个页面所使用到的组件进行整合，方便管理
image ✨歌单页面实现对数据的分页处理
<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>
image
所以按照之前的方法移除类名是不可行，除非你一开始就将文本隐藏掉，但后期会很复杂。🤣
✨更好的解决方法就是：结合 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引入即可。不用每一个页面都引入🤣。
