先展示成果
-
主頁(yè)??
image -
歌單頁(yè)??
image
image
三天干了啥
- ?對(duì) axios 請(qǐng)求進(jìn)行封裝，減少代碼的重復(fù)率罐旗，提高代碼利用率膳汪，并且方便項(xiàng)目管理
- ?對(duì)一些數(shù)據(jù)進(jìn)行格式處理（日期，毫秒轉(zhuǎn)分鐘九秀，播放量）
// 格式化日期
_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}`;
}
// 數(shù)據(jù)字符串化
_arrToString(arr) {
let str = "";
arr.forEach(e => {
str += e.id + ",";
});
str = str.slice(0, str.length - 1);
return str;
}
// 時(shí)長(zhǎng)轉(zhuǎn)換
_msTos(ms) {
let min = Math.floor(ms / 60000);
let sec = Math.ceil(ms % 60000 / 1000);
sec = sec > 10 ? sec : "0" + sec;
return `${min}分${sec}秒`
}
-
?對(duì)每個(gè)頁(yè)面所使用到的組件進(jìn)行整合遗嗽，方便管理
image ?歌單頁(yè)面實(shí)現(xiàn)對(duì)數(shù)據(jù)的分頁(yè)處理
<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: {
// 評(píng)論信息
commentList: [],
commentNum: 10,
commentPage: 0,
}
// 監(jiān)聽(tīng) 頁(yè)大小 改變事件
handleSizeChange(newsize) {
// 最新的條數(shù)（newsize）賦值給 動(dòng)態(tài)的 commentNum
this.commentNum = newsize;
//獲取到最新一頁(yè)顯示的數(shù)據(jù)
this.getcomment();
},
// 監(jiān)聽(tīng) 頁(yè)碼值 改變的事件
handleCurrentChange(newPage) {
//把最新的頁(yè)碼（newPage）賦值給 動(dòng)態(tài)的 commentPage
this.commentPage = newPage;
//獲取到最新顯示的頁(yè)碼值 重新發(fā)送axios請(qǐng)求
this.getcomment();
},
接著上一次的問(wèn)題
請(qǐng)求數(shù)據(jù)與渲染速度不對(duì)等
我之前想到的方法就是監(jiān)聽(tīng)請(qǐng)求回來(lái)的數(shù)據(jù)后，在給靜態(tài)的 html 添加類(lèi)名鼓蜒，確實(shí)針對(duì)新碟組件的分頁(yè)器是可以的痹换。雖然用戶看不出來(lái)，但本質(zhì)上是渲染在頁(yè)面上了??都弹。
而在下面的小例子中娇豫，就可以看出之前的方法是不可行的，需要特定條件?
<div id="app">
<div class="">靜態(tài)html</div>
<div class="">動(dòng)態(tài){{mydata}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
mydata: "",
},
// 程序創(chuàng)建后
created() {
// 獲取數(shù)據(jù)（模擬發(fā)送 ajax）
this.getmydata();
},
methods: {
getmydata() {
// 模擬后臺(tái)數(shù)據(jù)處理返回
setTimeout( () =>{
this.mydata = "后臺(tái)數(shù)據(jù)";
}, 1000);
},
},
})
</script>
所以按照之前的方法移除類(lèi)名是不可行畅厢，除非你一開(kāi)始就將文本隱藏掉锤躁，但后期會(huì)很復(fù)雜。??
?更好的解決方法就是：結(jié)合 v-if 來(lái)使用
<div id="app" v-if="flag>
<div class="">靜態(tài)html</div>
<div class="">動(dòng)態(tài){{mydata}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
mydata: "",
flag: false,
},
watch: {
mydata: function() {
this.flag = true;
}
},
// 程序創(chuàng)建后
created() {
// 獲取數(shù)據(jù)（模擬發(fā)送 ajax）
this.getmydata();
},
methods: {
getmydata() {
// 模擬后臺(tái)數(shù)據(jù)處理返回
setTimeout( () =>{
this.mydata = "后臺(tái)數(shù)據(jù)";
}, 1000);
},
},
})
</script>
這樣就可以解決，?但這種方法適用于數(shù)據(jù)量不大的地方系羞，如果數(shù)據(jù)過(guò)大，請(qǐng)求的時(shí)間過(guò)長(zhǎng)霸琴，此時(shí)程序得一直等待著椒振，造成不必要的資源浪費(fèi)?。
總結(jié)
這三天梧乘，?第一天發(fā)現(xiàn)很多代碼是可以復(fù)用的澎迎，所以第一天是對(duì)項(xiàng)目一些共有的方法進(jìn)行抽離到一個(gè)模塊中。以便后期使用時(shí)选调，直接調(diào)包即可夹供。?而第二天主要是開(kāi)發(fā)剩余的主頁(yè)和歌單的部分組件以及處理mv組件的接口。?今天就是完成歌單的所有內(nèi)容仁堪。今天晚上想將倆個(gè)頁(yè)面部署到vercel 但出現(xiàn)跨域哮洽，經(jīng)過(guò)找資料，還是沒(méi)找到解決方法弦聂。但這個(gè)也不急鸟辅，所以目前沒(méi)把精力放在這里??。而且今天發(fā)現(xiàn)莺葫，雖然18號(hào)對(duì)一些代碼有進(jìn)行抽離匪凉，但還是發(fā)現(xiàn)有一個(gè)地方出現(xiàn)重復(fù)，loading組件其實(shí)可以通過(guò) vuex 來(lái)控制即可捺檬，并且在 APP.vue引入即可再层。不用每一個(gè)頁(yè)面都引入??。
