10月15號(hào)項(xiàng)目定位及搭建
第三方服務(wù)
- 使用 vercel 搭建第三方音樂(lè) API
- 使用 Github 對(duì)項(xiàng)目進(jìn)行管理
技術(shù)選型
- 主要是 Vue2 全家桶
項(xiàng)目特點(diǎn)及計(jì)劃
- PC 端云音樂(lè)項(xiàng)目（結(jié)合其他平臺(tái)的音樂(lè)項(xiàng)目）
- 項(xiàng)目資源實(shí)現(xiàn)懶加載
- Vue-Cli 對(duì)項(xiàng)目進(jìn)行接口代理轉(zhuǎn)發(fā)
- nginx 結(jié)合 pm2 阿里ECS服務(wù)器對(duì)項(xiàng)目進(jìn)行搭建（項(xiàng)目后期）
實(shí)現(xiàn)的功能
- 基本功能：聽(tīng)音樂(lè)唇牧，看MV視頻，搜索歌手疹尾，歌單詳細(xì)信息洛史，查看評(píng)論惯殊。
- 復(fù)雜功能：
- 實(shí)現(xiàn)音樂(lè)進(jìn)度條及歌詞的雙向聯(lián)動(dòng)
- 實(shí)現(xiàn)視頻的在線實(shí)時(shí)彈幕（沒(méi)有實(shí)現(xiàn)數(shù)據(jù)的保存）
- 即時(shí)通訊（設(shè)想階段）
- 拓展：加入用戶（網(wǎng)易云音樂(lè)平臺(tái)）功能（項(xiàng)目部署上線后，后期進(jìn)行拓展）
項(xiàng)目插件
目前使用到框架如下 （Element-UI 后期視情況而定）
相關(guān)插件的配置及注意事項(xiàng)
-
node-sass也殖、sass-loader目前下載的最新版本土思，在項(xiàng)目啟動(dòng)時(shí)會(huì)報(bào)錯(cuò)。建議使用node-sass^4.14.1和sass-loader^8.0.2這個(gè)版本在我的項(xiàng)目中是沒(méi)有報(bào)錯(cuò)的。 -
swiper建議下載版本5的己儒，版本6的測(cè)試出問(wèn)題崎岂。下載版本5的，相對(duì)應(yīng)下載vue-awesome-swiper ^4.1.1
目前出現(xiàn)的問(wèn)題就在這倆個(gè)地方
- 插件配置部分具體可以查看我的另外一篇博客 vue全家桶搭建前端頁(yè)面注意細(xì)節(jié)及遇到的難題
- 針對(duì)這項(xiàng)目址愿，加了一個(gè)全局接口的攔截器（對(duì)響應(yīng)的數(shù)據(jù)進(jìn)行攔截该镣，以及錯(cuò)誤的統(tǒng)一處理）冻璃，具體配置如下
// main.js
axios.interceptors.response.use(function (response) {
let status = response.status;
if (status === 200) {
return Promise.resolve(response.data);
}else {
return Promise.reject(response.status);
}
})
10月16號(hào)項(xiàng)目主頁(yè)初步完成效果
遇到的問(wèn)題
- 輪播圖組件部分：對(duì)輪播圖進(jìn)行滾動(dòng)時(shí)响谓，出現(xiàn)瀏覽器橫向滾動(dòng)條??
網(wǎng)上的解決方法是
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
確實(shí)是解決了輪播圖出現(xiàn)橫向滾動(dòng)條的問(wèn)題?。但緊接而來(lái)的是：對(duì)瀏覽器進(jìn)行縮放時(shí)省艳，當(dāng)寬度小于頁(yè)面的安全距離（1220px）時(shí)娘纷，瀏覽器滾動(dòng)條沒(méi)有出現(xiàn)??。
回去重新看了網(wǎng)上的 css 代碼跋炕，我的理解就是把?超出的部分隱藏掉赖晶，并讓瀏覽器不出現(xiàn)滾動(dòng)條?。因此辐烂，?導(dǎo)致當(dāng)頁(yè)面縮放到小于頁(yè)面的安全距離時(shí)遏插，不會(huì)出現(xiàn)滾動(dòng)條，溢出部分被隱藏掉?纠修。
?我的想法是：何不在輪播組件哪里胳嘲，溢出時(shí)就隱藏掉，看看會(huì)不會(huì)出現(xiàn)滾動(dòng)條?扣草。抱著試一試的態(tài)度
#index {
.swiper-container {
width: $min-width;
height: 460px;
margin: 12px auto;
/*增加了下面兩句*/
overflow-y: hidden;
overflow-x: hidden;
img {
width: 1220px;
height: 100%;
}
}
}
奇跡般的所有問(wèn)題都解決了了牛，但后期不知道會(huì)不會(huì)出現(xiàn)問(wèn)題，還得看最終呈現(xiàn)出來(lái)結(jié)果如何辰妙。不知道這里會(huì)不會(huì)又是個(gè)坑鹰祸！??
之前小米項(xiàng)目主頁(yè)也是使用了這個(gè)組件，配置項(xiàng)及版本也都一致密浑，都沒(méi)有出現(xiàn)這個(gè)問(wèn)題蛙婴。明天，在去看看之前小米主頁(yè)是否出現(xiàn)這個(gè)問(wèn)題 ??
使用到的技術(shù)
- vue-router （今天只是配了主頁(yè)的路徑）
- axios（數(shù)據(jù)請(qǐng)求）
- 組件（到16號(hào)為止一天干了5個(gè)組件）
- sass （將一些公共的樣式進(jìn)行抽離成方法尔破，以便后期可以重復(fù)使用）
image
初步完成：NavHeader頭部組件敬锐、NewDisc 新碟首發(fā)組件、RecommPlaylist歌單推薦組件呆瞻、SectionHeader內(nèi)容頭部組件台夺、SingAside歌手列表組件（部分）
- 數(shù)據(jù)可以動(dòng)態(tài)渲染及更新渲染
vue.config.js 接口轉(zhuǎn)發(fā)配置
module.exports = {
devServer:{
host:'localhost',
port:8080,
proxy:{
'/api':{
target:'https://cloud-music-api-sandy.vercel.app/',
changeOrigin:true,
pathRewrite:{
'/api':''
}
}
}
},
}
使用到的接口總結(jié)
| 功能 | 路徑 | 參數(shù) | 備注 |
|---|---|---|---|
| 獲取輪播圖圖片 | /banner | 無(wú) | |
| 獲取推薦歌單 | /personalized | limit（條數(shù)） | |
| 獲取指定類型的歌單 | /top/playlist/highquality | cat【華語(yǔ), 古風(fēng), 歐美, 流行】limit（條數(shù)） |
|
| 獲取指定類型的新碟 | /top/album | offset（偏移量）limit（條數(shù)）cat【ZH(華語(yǔ))，EA(歐美)痴脾，KR(韓國(guó))颤介，JP(日本)】 | cat需要傳遞英文格式 |
| 獲取歌手信息（圖片，姓名） | /top/album | offset（偏移量）limit（條數(shù)）area【ZH(華語(yǔ))，EA(歐美)滚朵，KR(韓國(guó))冤灾，JP(日本)】 | area需要傳遞英文格式 |
所有請(qǐng)求都是 get
總結(jié)
由于 Vue 我是在去年學(xué)過(guò)，搞過(guò)一個(gè)項(xiàng)目（小米項(xiàng)目）辕近。然后就沒(méi)比較正式的使用 Vue 來(lái)搭建一個(gè)前端工程化項(xiàng)目韵吨。所以這兩天主要是過(guò)一遍 Vue-Cli 搭建項(xiàng)目、組件的相互傳值移宅、以及一些組件的相關(guān)配置和使用归粉。
