diff --git a/.env.development b/.env.development index 5394d97..314af7e 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,4 @@ # NODE_ENV=development -VUE_APP_API_HOST=http://localhost:3000 +VUE_APP_API_HOST=http://localhost:3000/ +VUE_APP_API_BACKUP=http://localhost:3000 diff --git a/README.md b/README.md index 7989766..67b7ab1 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,21 @@ # MusicBox -A free music web app(desktop version) implemented by Vue.js, mimic of NetEase Music(https://music.163.com/), may be better, may be later ... +A free music web app(desktop version) implemented by Vue.js, mimic of NetEase Music(https://music.163.com/). ## Deployment AWS EC2: http://ec2-54-191-119-231.us-west-2.compute.amazonaws.com:5600/ -## APIs and Icons used +## Stack -- Element-UI Components: https://element.eleme.io/ -- Netease Music API: https://github.com/Binaryify/NeteaseCloudMusicApi -- Free Icons: https://www.iconfont.cn/ +- Vue + Vuex + Vue router +- Flexbox/CSS grid layout +- [Element-UI Components](https://element.eleme.io/) + +## APIs and icons used + +- [Netease Music API](https://github.com/Binaryify/NeteaseCloudMusicApi) +- [Iconfont](https://www.iconfont.cn/) ## Project setup @@ -20,7 +25,7 @@ npm install ### Prepare the backend -To run the app, you need an API server, see [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi). +To run the app, you need to build your own API server, read [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi). ### Compiles and hot-reloads for development diff --git a/src/common/session.js b/src/common/session.js new file mode 100644 index 0000000..f913597 --- /dev/null +++ b/src/common/session.js @@ -0,0 +1,24 @@ +export default { + setPageData: (key, dataObj) => { + let artist = JSON.stringify(dataObj); + sessionStorage.setItem(key, [artist]); + }, + + getPageData: (key) => { + return JSON.parse(sessionStorage.getItem(key)); + }, +}; + +// const setPageData = (key, dataObj) => { +// let artist = JSON.stringify(dataObj); +// sessionStorage.setItem(key, [artist]); +// }; + +// const getPageData = (key) => { +// return JSON.parse(sessionStorage.getItem(key)); +// }; + +// module.exports = { +// setPageData, +// getPageData, +// }; diff --git a/src/store/index.js b/src/store/index.js index 096997d..7396291 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,12 +5,14 @@ Vue.use(Vuex); export default new Vuex.Store({ state: { + // for music play song: { audioUrl: "", picUrl: "", name: "", artist: "", }, + // for search results curSearchTab: "tracks", }, mutations: {}, diff --git a/src/views/playlists/PlaylistDetail.vue b/src/views/playlists/PlaylistDetail.vue index d2a30a8..6a32a28 100644 --- a/src/views/playlists/PlaylistDetail.vue +++ b/src/views/playlists/PlaylistDetail.vue @@ -136,10 +136,9 @@ export default { commentCount, }; - this.info.tags = data.playlist.tags; //array - console.log(data.playlist.tags); - this.tracks = []; + this.info.tags = data.playlist.tags; //tags is an array + this.tracks = []; data.playlist.tracks.forEach((item) => { let { name, id, dt: duration } = item; duration = this.$helpers.convertMsToMinutes(duration);