資訊專欄INFORMATION COLUMN
摘要：轉(zhuǎn)行前端一年多，之前一直忙于寫業(yè)務(wù)代碼，剛好近期不忙，就想寫一個(gè)完全屬于自己的項(xiàng)目。本項(xiàng)目因?yàn)闀r(shí)間關(guān)系暫時(shí)只做了部分功能，但是有空會(huì)繼續(xù)更新的。項(xiàng)目未完成的部分后續(xù)會(huì)逐漸完成。
轉(zhuǎn)行前端一年多，之前一直忙于寫業(yè)務(wù)代碼，剛好近期不忙，就想寫一個(gè)完全屬于自己的項(xiàng)目。原本打算用react來(lái)做的，但是估計(jì)邊翻api邊寫可能會(huì)花特別長(zhǎng)的時(shí)間，所以打算這個(gè)項(xiàng)目完成后寫個(gè)react的項(xiàng)目。
本項(xiàng)目因?yàn)闀r(shí)間關(guān)系暫時(shí)只做了部分功能，但是有空會(huì)繼續(xù)更新的。
將代碼克隆到本地：git clone https://github.com/chenging/vue.git;
安裝依賴：進(jìn)入項(xiàng)目根目錄，命令行工具輸入npm install;
運(yùn)行前端服務(wù)器：命令行工具輸入npm start,打開(kāi)http://localhost:8888即可預(yù)覽項(xiàng)目；
安裝數(shù)據(jù)庫(kù)：可以直接到mongodb官網(wǎng)下載，安裝完在C盤目錄下新建文件夾data，進(jìn)入data文件夾再新建一個(gè)db文件夾，此為mongodb默認(rèn)存放數(shù)據(jù)目錄；
開(kāi)啟mongodb數(shù)據(jù)庫(kù)：進(jìn)入mongodb安裝目錄，找到mongod.exe文件，雙擊打開(kāi)；
運(yùn)行node.js后臺(tái)服務(wù)器：進(jìn)入項(xiàng)目根目錄，命令行工具輸入node server，第一次運(yùn)行會(huì)存入初始數(shù)據(jù)。
一、目錄結(jié)構(gòu) 二、主要技術(shù)棧前端：vue+vue-router+axios+es6+webpack+canvas;
后端：node.js+koa；
數(shù)據(jù)庫(kù)：mongodb+mongoose
三、目前已完成的功能音樂(lè)播放：包括播放進(jìn)度條、播放動(dòng)畫、歌曲切換
視頻播放：播放視頻時(shí)暫停音樂(lè)播放，結(jié)束后會(huì)繼續(xù)音樂(lè)播放；
登錄注冊(cè)：登錄、注冊(cè)、修改資料
歌曲搜索：通過(guò)歌曲名稱、演唱者名字、歌詞模糊查詢。
圖片輪播：自動(dòng)切換圖片及手動(dòng)切換圖片
四、參考資料webpack官方文檔：https://webpack.js.org/guides...
廖老師nodejs教程https://www.liaoxuefeng.com/w...
mongoose官方文檔：http://mongoosejs.com/docs/ap...
五、在線演示及項(xiàng)目地址在線演示地址：https://chenging.github.io/vu...
github地址：https://github.com/chenging/vue
項(xiàng)目截圖和代碼部分就不放了，里面有詳細(xì)的注釋（主要是怕自己給忘了。。。）
第一次寫文章，也是第一個(gè)個(gè)人項(xiàng)目，包括后臺(tái)和數(shù)據(jù)庫(kù)都是第一次。。。。
更多的是對(duì)自己的一個(gè)總結(jié)吧，也歡迎大家對(duì)代碼或者項(xiàng)目部分提出意見(jiàn)和建議。
項(xiàng)目未完成的部分后續(xù)會(huì)逐漸完成。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88599.html
摘要：轉(zhuǎn)行前端一年多，之前一直忙于寫業(yè)務(wù)代碼，剛好近期不忙，就想寫一個(gè)完全屬于自己的項(xiàng)目。本項(xiàng)目因?yàn)闀r(shí)間關(guān)系暫時(shí)只做了部分功能，但是有空會(huì)繼續(xù)更新的。項(xiàng)目未完成的部分后續(xù)會(huì)逐漸完成。 轉(zhuǎn)行前端一年多，之前一直忙于寫業(yè)務(wù)代碼，剛好近期不忙，就想寫一個(gè)完全屬于自己的項(xiàng)目。原本打算用react來(lái)做的，但是估計(jì)邊翻api邊寫可能會(huì)花特別長(zhǎng)的時(shí)間，所以打算這個(gè)項(xiàng)目完成后寫個(gè)react的項(xiàng)目。本項(xiàng)目因?yàn)?..
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁(yè)新曲等使用了做單頁(yè)應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁(yè)新曲等使用了做單頁(yè)應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁(yè)新曲等使用了做單頁(yè)應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
閱讀 897·2021-10-09 09:44
閱讀 769·2019-08-30 13:55
閱讀 3238·2019-08-29 15:07
閱讀 3344·2019-08-29 13:09
閱讀 2481·2019-08-29 11:10
閱讀 1376·2019-08-26 14:05
閱讀 3768·2019-08-26 13:57
閱讀 2275·2019-08-23 16:42
