從0開始的Vue全棧項目（仿網易雲音樂App）

轉行前端一年多，以前一直忙於寫業務代碼，恰好近期不忙，就想寫一個徹底屬於本身的項目。本來打算用react來作的，可是估計邊翻api邊寫可能會花特別長的時間，因此打算這個項目完成後寫個react的項目。
本項目由於時間關係暫時只作了部分功能，可是有空會繼續更新的。

運行項目

1. 將代碼克隆到本地：git clone https://github.com/chenging/vue.git;
2. 安裝依賴：進入項目根目錄，命令行工具輸入npm install;
3. 運行前端服務器：命令行工具輸入npm start,打開http://localhost:8888便可預覽項目；
4. 安裝數據庫：能夠直接到mongodb官網下載，安裝完在C盤目錄下新建文件夾data，進入data文件夾再新建一個db文件夾，此爲mongodb默認存放數據目錄；
5. 開啓mongodb數據庫：進入mongodb安裝目錄，找到mongod.exe文件，雙擊打開；
6. 運行node.js後臺服務器：進入項目根目錄，命令行工具輸入node server，第一次運行會存入初始數據。

1、目錄結構

2、主要技術棧

1. 前端：vue+vue-router+axios+es6+webpack+canvas;
2. 後端：node.js+koa；
3. 數據庫：mongodb+mongoose

3、目前已完成的功能

1. 音樂播放：包括播放進度條、播放動畫、歌曲切換
2. 視頻播放：播放視頻時暫停音樂播放，結束後會繼續音樂播放；
3. 登陸註冊：登陸、註冊、修改資料
4. 歌曲搜索：經過歌曲名稱、演唱者名字、歌詞模糊查詢。
5. 圖片輪播：自動切換圖片及手動切換圖片

4、參考資料

1. webpack官方文檔：https://webpack.js.org/guides...
2. 廖老師nodejs教程https://www.liaoxuefeng.com/w...
3. mongoose官方文檔：http://mongoosejs.com/docs/ap...

5、在線演示及項目地址

1. 在線演示地址：https://chenging.github.io/vu...
2. github地址：https://github.com/chenging/vue

---

項目截圖和代碼部分就不放了，裏面有詳細的註釋（主要是怕本身給忘了。。。）
第一次寫文章，也是第一個我的項目，包括後臺和數據庫都是第一次。。。。
更多的是對本身的一個總結吧，也歡迎你們對代碼或者項目部分提出意見和建議。
項目未完成的部分後續會逐漸完成。