資訊專欄INFORMATION COLUMN
摘要：目前只用到和音樂(lè)的輪播圖不用說(shuō)，音樂(lè)這個(gè)網(wǎng)站的頁(yè)面我是真的挺喜歡，不光是他的設(shè)計(jì)，頁(yè)面的布局也很美觀，在控制臺(tái)調(diào)試的時(shí)候可以看看它的結(jié)構(gòu)，非常有層次而富有美感，即使加上一層也不會(huì)有違和感。由于安全原因，跨域訪問(wèn)是被各大瀏覽器所默認(rèn)禁止的。
一直想做一個(gè)vue項(xiàng)目 然后呢 我就做了
效果預(yù)覽部分地方不全部根據(jù)原版，也有自由發(fā)揮的，目前功能模塊比較簡(jiǎn)陋，如果加載太慢，可以下載下來(lái)再本地運(yùn)行
Build Setup?網(wǎng)易云音樂(lè)API
項(xiàng)目地址：github
預(yù)覽地址：demo
# install dependencies cnpm i (可以用cnpm或yarn，更方便快捷，你值得擁有) # serve with hot reload at localhost:8564 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # 網(wǎng)易云API部署 listen localhost:3000 npm run start技術(shù)棧
vue(數(shù)據(jù)綁定)
vue-router
vuex(管理組件狀態(tài)，實(shí)現(xiàn)組件通信）
webpack(打包工具)
scss（原來(lái)想用stylus,回頭看看我都快寫完了...）
axios（我等下要重點(diǎn)講這**）
組件庫(kù): element-UI(本來(lái)想用muse-UI,感覺(jué)那個(gè)更c(diǎn)ool，下次吧..)
API: 網(wǎng)易云音樂(lè)API(仿qq音樂(lè)我用網(wǎng)易云音樂(lè)的東西，你怕不怕...)
核心功能組件的實(shí)現(xiàn) 搜索功能 播放功能
? ?(播放頁(yè)面正在完善中，樣式只是大概，待細(xì)化...)
(目前子目錄只開(kāi)通歌手列表)自己挖的坑，自己埋 vuex的模塊應(yīng)用
?一開(kāi)始我并沒(méi)有使用vuex，因?yàn)槲矣X(jué)得目前這個(gè)項(xiàng)目比較小，并不需要它來(lái)管理數(shù)據(jù)，畢竟vuex針對(duì)大項(xiàng)目來(lái)說(shuō)確實(shí)很好用，但是后來(lái)考慮到如果后期該項(xiàng)目我還要 維護(hù)，數(shù)據(jù)量一大，還是要重新分類數(shù)據(jù)，所以中途某些地方插入了vuex的使用，這就很大一部分影響了項(xiàng)目進(jìn)行的進(jìn)度。（目前只用到action和state）
qq音樂(lè)的輪播圖不用說(shuō)，qq音樂(lè)這個(gè)網(wǎng)站的頁(yè)面我是真的挺喜歡，不光是他的設(shè)計(jì)，頁(yè)面的布局也很美觀，在控制臺(tái)調(diào)試的時(shí)候可以看看它的結(jié)構(gòu)，非常有層次而富有美感，即使加上 一層margin,padding也不會(huì)有違和感。這就造就了它的輪播圖結(jié)構(gòu)比較麻煩，不是說(shuō)做不出來(lái)，因?yàn)檫@是第一次上傳的項(xiàng)目，我想先將大概的結(jié)構(gòu)完善一下，后期再 維護(hù)，所以我就選用了element-UI里面的跑馬燈式輪播圖組件，大體來(lái)說(shuō)，除了部分瑕疵以外，還是高度還原了原版輪播圖的。
axios后端數(shù)據(jù)獲取時(shí)產(chǎn)生的跨域問(wèn)題?重點(diǎn)來(lái)了，這個(gè)是我在該項(xiàng)目中花了最多時(shí)間的地方，相信很多同學(xué)使用axios都碰到過(guò)我這個(gè)問(wèn)題，目前我這里使用了三種方法處理該問(wèn)題，請(qǐng)大家針對(duì)自己的項(xiàng)目問(wèn)題對(duì)號(hào)入座
? ?
跨域訪問(wèn)，簡(jiǎn)單來(lái)說(shuō)就是 A 網(wǎng)站的 javascript 代碼試圖訪問(wèn) B 網(wǎng)站，包括提交內(nèi)容和獲取內(nèi)容。由于安全原因，跨域訪問(wèn)是被各大瀏覽器所默認(rèn)禁止的。
? ?
①. 針對(duì)本地相同端口服務(wù)器之間的跨域
這是我剛開(kāi)始碰到問(wèn)題時(shí)使用的第一種，這個(gè)時(shí)候你只需要找到build文件中的dev-server，找到引用express的位置，給它加上一個(gè)頭文件：
app.all("*", function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", " 3.2.1")
res.header("Content-Type", "application/json;charset=utf-8")
next()
})
然后它就會(huì)報(bào)錯(cuò)~，具體原因是你同一個(gè)端口申請(qǐng)相同端口的東西,不好意思，那不叫跨域...
②. 針對(duì)本地不同端口的服務(wù)器之間的跨域
就是將上面的頭文件放在當(dāng)前項(xiàng)目申請(qǐng)的服務(wù)器的那個(gè)api中。
③. 針對(duì)本地服務(wù)器對(duì)域名服務(wù)器訪問(wèn)的跨域問(wèn)題
找到當(dāng)前項(xiàng)目congfig文件夾下index.js文件，然后在文件中將proxyTable內(nèi)容改為：
proxyTable: {
"/api": {
target: "[1]",
changeOrigin: true,
pathRewrite: {
"^/api": "/"
}
}
}
終于就是你當(dāng)前想訪問(wèn)的api地址，項(xiàng)目中訪問(wèn)的時(shí)候就只要用/api做反向代理即可
?這是我第一個(gè)用vue擼的項(xiàng)目，可能功能有點(diǎn)簡(jiǎn)陋，很多地方有待提高，不過(guò)這次實(shí)踐讓我對(duì)組件化的理解有了一定的提升，后期會(huì)繼續(xù)加入其它功能模塊的，文中有用詞不對(duì)的地方，歡迎大家指出，項(xiàng)目有什么bug，也希望大家多多提issue
如果對(duì)你有幫助，給個(gè)star吧
找工作中
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83456.html
摘要：庫(kù)用了魔改樣式的歌詞滾動(dòng)部分用了黃軼老大的賊爽主題換膚用的變量替換。語(yǔ)言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項(xiàng)目后端項(xiàng)目 音樂(lè)播放器雖然爛大街了，但是作為前端沒(méi)自己擼一個(gè)一直是個(gè)遺憾，而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂(lè)做的實(shí)在是太簡(jiǎn)陋了，社區(qū)仿pc客戶端的網(wǎng)易云也不多見(jiàn)，為了彌補(bǔ)這個(gè)遺憾，就用vue全家桶模仿mac客戶端的ui實(shí)現(xiàn)了一個(gè)，歡迎提出意見(jiàn)和star~ 預(yù)覽地址 源碼地址...
摘要：首先是這個(gè)地球，得看看它是真還是假因?yàn)楹芏嘈Ч悄醚┍虉D做的，比如這里的旋轉(zhuǎn)的飛機(jī)，結(jié)果找到了并且在網(wǎng)站文件中搜到了，那就是沒(méi)跑了。 上個(gè)月底，在朋友圈看到一個(gè)號(hào)稱這可能是地球上最美的h5的分享，點(diǎn)進(jìn)入后發(fā)現(xiàn)這個(gè)h5還很別致，思考了一會(huì)，決定要不高仿一個(gè)? 到今天為止，高仿基本完成， 線上地址 github地址 除了手機(jī)端的media控制沒(méi)有去兼容，其他的基本都給仿了。 那為了讓你...
摘要：高仿低配網(wǎng)頁(yè)版網(wǎng)易云音樂(lè)播放器前言沒(méi)有使用任何框架，只是想用最簡(jiǎn)單純的代碼實(shí)現(xiàn)下前臺(tái)后臺(tái)是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂(lè)移動(dòng)端，請(qǐng)查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了 HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁(yè)版網(wǎng)易云音樂(lè)播放器 showImg(https://segmentfault.com/img/remo...
摘要：高仿低配網(wǎng)頁(yè)版網(wǎng)易云音樂(lè)播放器前言沒(méi)有使用任何框架，只是想用最簡(jiǎn)單純的代碼實(shí)現(xiàn)下前臺(tái)后臺(tái)是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂(lè)移動(dòng)端，請(qǐng)查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了 HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁(yè)版網(wǎng)易云音樂(lè)播放器 showImg(https://segmentfault.com/img/remo...
閱讀 1962·2021-11-16 11:45
閱讀 3672·2021-09-06 15:02
閱讀 2021·2019-08-30 15:44
閱讀 2289·2019-08-30 11:21
閱讀 1851·2019-08-29 16:31
閱讀 3425·2019-08-29 13:55
閱讀 1898·2019-08-29 12:15
閱讀 3253·2019-08-28 18:05
