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

二、項目開發(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ù)庫等

三、項目設(shè)計


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

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

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