一、項(xiàng)目背景和目的
      “音樂(lè)”是一種為我們枯燥乏味的生活帶去樂(lè)趣的東西也是一種為我們除去煩惱 的東西。 處于現(xiàn)代社會(huì)的人們每天都身處于一個(gè)充滿硝煙的“戰(zhàn)爭(zhēng)”中，每天都要為了生 存而不斷努力。 因?yàn)槊刻烊諒?fù)一日的工作著導(dǎo)致生心日漸憔悴，這時(shí)候，你可以拿起耳機(jī)聽聽那 些優(yōu)美，婉轉(zhuǎn)的歌曲，放松放松，這時(shí)候年會(huì)感到整個(gè)人都快活多了，之前的煩 惱早已煙消云散了。 當(dāng)你心情低落，煩躁不堪的時(shí)候，你可以適當(dāng)?shù)穆犅犇切┘で樗纳涞目旄?，跟?它唱唱將心中的一切不快都盡情地唱出來(lái)，這樣你會(huì)感覺(jué)到整個(gè)人都輕松多了。

二、項(xiàng)目開發(fā)環(huán)境及相關(guān)技術(shù)
1、開發(fā)環(huán)境Vue.js
2、開發(fā)工具HBuilder、Adobe PhotoshopCS6、idea
3、開發(fā)相關(guān)技術(shù) JavaScript、css、vue、nodejs、Vant、Bootstrap前端框架
4、mysql數(shù)據(jù)庫(kù)等

三、項(xiàng)目設(shè)計(jì)


網(wǎng)站頁(yè)面設(shè)計(jì)：

（1）設(shè)計(jì)圖：利用 PS 創(chuàng)建與桌面寬度一樣的圖層，則寬度為 1920 像素， 高度則隨著內(nèi)容的多少隨之變化，將頁(yè)面分為三大模塊，即上中下三部分，利用 PS 為每個(gè)模塊的高寬及內(nèi)容進(jìn)行大致定義，再進(jìn)行主要的色彩搭配。
（2）素材：使用互聯(lián)網(wǎng)查詢德云社資料，在各大網(wǎng)站（千圖網(wǎng)、花瓣網(wǎng)等） 上進(jìn)行素材的收集，對(duì)圖片的大小進(jìn)行裁剪，改變圖片的名稱（代碼中引入圖片， 則圖片名不能有中文），根據(jù)圖片的內(nèi)容進(jìn)行分類。
（3）代碼編寫：使用 sublime text 軟件進(jìn)行代碼編寫，先寫出大致的框架， 依照從上到下順序依次完成代碼的編寫，CSS 文件則用來(lái)調(diào)整其樣式、大小和位 置，使用 JS 來(lái)完成各部分所需要的功能，整體進(jìn)行響應(yīng)式。
（4）子頁(yè)面的內(nèi)容隨著子頁(yè)面的標(biāo)題而發(fā)生變動(dòng)，大致風(fēng)格不變，頂部與底部都 跟隨首頁(yè)，內(nèi)容一致。子頁(yè)面的完成也與首頁(yè)一樣，先進(jìn)行子頁(yè)面的設(shè)計(jì)圖，進(jìn) 行分塊，色彩搭配；再尋找所需的素材及內(nèi)容，進(jìn)行裁剪，最后代碼編寫，寫出 大致的框架，將找的圖片和素材進(jìn)行填充，進(jìn)行每個(gè)頁(yè)面的交互與響應(yīng)式。

項(xiàng)目實(shí)現(xiàn)相關(guān)技術(shù)：vue、nodejs、idea、mysql