├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── cry.png
    │   ├── logo.png
    │   └── img
    │   │   ├── latest.png
    │   │   ├── ranking.png
    │   │   ├── singer.png
    │   │   ├── recommend.png
    │   │   ├── songMenu.png
    │   │   ├── singerDetail.png
    │   │   └── songMenuDetail.png
    ├── css
    │   ├── theme
    │   │   └── fonts
    │   │   │   ├── element-icons.ttf
    │   │   │   └── element-icons.woff
    │   └── common.css
    ├── App.vue
    ├── main.js
    ├── axios
    │   └── axios.js
    ├── components
    │   ├── songOutline 
    │   │   ├── singerOutline.vue
    │   │   ├── highOutline.vue
    │   │   ├── musicOutline.vue
    │   │   ├── albumOutline.vue
    │   │   └── songOutline.vue
    │   ├── commentsTable
    │   │   └── commentsTable.vue
    │   ├── songTable
    │   │   ├── songmenu.vue
    │   │   ├── song.vue
    │   │   ├── songs.vue
    │   │   └── songTable.vue
    │   ├── lyric
    │   │   ├── lyric.vue
    │   │   └── playlist
    │   │   │   ├── lyrics.vue
    │   │   │   └── playlist.vue
    │   ├── Login
    │   │   └── phoneLogin.vue
    │   ├── musicPlayer
    │   │   └── musicPlayer.vue
    │   └── register
    │   │   └── register.vue
    ├── views
    │   ├── songMenu
    │   │   ├── highquality
    │   │   │   └── highquality.vue
    │   │   ├── songMenu.vue
    │   │   └── detail
    │   │   │   └── detail.vue
    │   ├── ranking
    │   │   └── ranking.vue
    │   ├── search
    │   │   └── search.vue
    │   ├── latest
    │   │   └── latest.vue
    │   ├── recommend
    │   │   └── recommend.vue
    │   ├── singer
    │   │   ├── singer.vue
    │   │   └── singerInformation
    │   │   │   └── singerInformation.vue
    │   ├── mv
    │   │   ├── videos.vue
    │   │   └── mv.vue
    │   ├── album
    │   │   └── album.vue
    │   ├── myMusic
    │   │   └── myMusic.vue
    │   └── index.vue
    ├── elementUi
    │   └── element.js
    ├── router
    │   └── index.js
    └── store
    │   └── index.js
├── .editorconfig
├── babel.config.js
├── .gitignore
├── SECURITY.md
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/cry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/cry.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/img/latest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/latest.png


--------------------------------------------------------------------------------
/src/assets/img/ranking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/ranking.png


--------------------------------------------------------------------------------
/src/assets/img/singer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/singer.png


--------------------------------------------------------------------------------
/src/assets/img/recommend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/recommend.png


--------------------------------------------------------------------------------
/src/assets/img/songMenu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/songMenu.png


--------------------------------------------------------------------------------
/src/assets/img/singerDetail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/singerDetail.png


--------------------------------------------------------------------------------
/src/assets/img/songMenuDetail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/assets/img/songMenuDetail.png


--------------------------------------------------------------------------------
/src/css/theme/fonts/element-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/css/theme/fonts/element-icons.ttf


--------------------------------------------------------------------------------
/src/css/theme/fonts/element-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xhysah/xhymusic/HEAD/src/css/theme/fonts/element-icons.woff


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="stylus">
 8 | 
 9 | </style>
10 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset'
 4 |   ],
 5 |   plugins: [
 6 |     [
 7 |       'component',
 8 |       {
 9 |         libraryName: 'element-ui',
10 |         styleLibraryName: 'theme-chalk'
11 |       }
12 |     ]
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import axios from 'axios'
 6 | import './elementUi/element'
 7 | import './css/common.css'
 8 | import './axios/axios'
 9 | Vue.prototype.$http = axios
10 | Vue.config.productionTip = false
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/src/axios/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | axios.defaults.baseURL = 'http://localhost:3000'
 4 | axios.defaults.withCredentials = true// 跨域请求
 5 | // axios.interceptors.request.use(config => {
 6 | //   // const token = window.localStorage.getItem('token')
 7 | //   // return config
 8 | // })
 9 | axios.interceptors.response.use(config => {
10 |   if (config.status === 200) {
11 |     return config.data
12 |   } else {
13 |     return Promise.reject(config)
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # Security Policy
 2 | 
 3 | ## Supported Versions
 4 | 
 5 | Use this section to tell people about which versions of your project are
 6 | currently being supported with security updates.
 7 | 
 8 | | Version | Supported          |
 9 | | ------- | ------------------ |
10 | | 5.1.x   | :white_check_mark: |
11 | | 5.0.x   | :x:                |
12 | | 4.0.x   | :white_check_mark: |
13 | | < 4.0   | :x:                |
14 | 
15 | ## Reporting a Vulnerability
16 | 
17 | Use this section to tell people how to report a vulnerability.
18 | 
19 | Tell them where to go, how often they can expect to get an update on a
20 | reported vulnerability, what to expect if the vulnerability is accepted or
21 | declined, etc.
22 | 


--------------------------------------------------------------------------------
/src/css/common.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   width: 100%;
 5 |   height: 100%;
 6 |   background-color: black;
 7 |   color: white;
 8 |   min-height: 660px;
 9 |   min-width: 1200px;
10 | }
11 | .line{
12 |   border: 1px solid #ff0000
13 | }
14 | img{
15 |   width:100%;
16 |   height:100%;
17 |   cursor: pointer;
18 | }
19 | .flex{
20 |   display: flex;
21 |   justify-content: space-between;
22 |   flex-wrap: wrap;
23 | }
24 | li{
25 |   list-style: none;
26 |   margin: 3px 0;
27 | }
28 | audio{
29 |   width: 100%
30 | }
31 | .simLine{
32 |   border: .5px solid #888888
33 | }
34 | .grid-5{
35 |   display: grid;
36 |   grid-template-columns: 20% 20% 20% 20% 20%;
37 |   justify-items: center;
38 | }
39 | .grid-4{
40 |   display: grid;
41 |   grid-template-columns: 25% 25% 25% 25%;
42 |   justify-items: center;
43 | }
44 | .grid-2{
45 |   display: grid;
46 |   grid-template-columns: 50% 50%;
47 |   justify-items: center;
48 | }
49 | .grid-3{
50 |   display: grid;
51 |   grid-template-columns: 33.3% 33.3% 33.3%;
52 |   justify-items: center;
53 | }
54 | .el-main{
55 |   padding: 10px;
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/songOutline /singerOutline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="img-item">
 3 |     <div :style="{width:newLength, height:newHeight}" class="img">
 4 |       <slot name="img"></slot>
 5 |     </div>
 6 |     <div class="sentence" :style="{width:newLength}">
 7 |       <slot name="sentence"></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'singerOutline',
15 |   props: {
16 |     length: {
17 |       type: String,
18 |       default: '100%'
19 |     },
20 |     height: {
21 |       type: String,
22 |       default: 'auto'
23 |     }
24 |   },
25 |   data () {
26 |     return {
27 |       newLength: this.length,
28 |       newHeight: this.height
29 |     }
30 |   },
31 |   methods: {
32 |   },
33 |   computed: {
34 |   }
35 | }
36 | </script>
37 | 
38 | <style lang="stylus" scoped>
39 |   .img-item
40 |     display inline-block
41 |     padding 0 20px
42 |     .img
43 |       position relative
44 |     .sentence
45 |       color white
46 |       font-size 10px
47 |       cursor pointer
48 |       div
49 |         overflow hidden
50 |         text-overflow ellipsis
51 |         white-space nowrap
52 |   .img:hover
53 |     img
54 |       box-shadow 0 0 10px red
55 |     +.sentence
56 |       visibility hidden
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/views/songMenu/highquality/highquality.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="grid-2">
 4 |       <template v-for="item in highqualityList">
 5 |         <!--      <img  :src="item.coverImgUrl" alt="">-->
 6 |         <!--        <music-outline :key="item.id" :music="item"></music-outline>-->
 7 |         <high-outline :key="item.id" :music="item"></high-outline>
 8 |       </template>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import highOutline from '../../../components/songOutline /highOutline'
15 | export default {
16 |   name: 'highuality',
17 |   components: {
18 |     highOutline
19 |   },
20 |   created () {
21 |     this.$store.commit('editActiveName', 'songMenu')
22 |     this.getHighQuality()
23 |   },
24 |   data () {
25 |     return {
26 |       highqualityList: []
27 |     }
28 |   },
29 |   methods: {
30 |     getHighQuality () {
31 |       this.$http.get(`/top/playlist/highquality?cat=${this.name}`).then(data => {
32 |         console.log(data.playlists)
33 |         this.highqualityList = data.playlists
34 |       })
35 |     }
36 |   },
37 |   computed: {
38 |     name () {
39 |       return this.$route.query.name
40 |     }
41 |   }
42 | }
43 | </script>
44 | 
45 | <style lang="stylus" scoped>
46 |   .grid-2
47 |     cursor pointer
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/elementUi/element.js:
--------------------------------------------------------------------------------
 1 | import '../css/theme/index.css'
 2 | import Vue from 'vue'
 3 | import {
 4 |   Form,
 5 |   FormItem,
 6 |   Input,
 7 |   Card,
 8 |   Button,
 9 |   Row,
10 |   Message,
11 |   Carousel,
12 |   CarouselItem,
13 |   Link,
14 |   Image,
15 |   Pagination,
16 |   Menu,
17 |   MenuItem,
18 |   Container,
19 |   Aside,
20 |   Main,
21 |   Table,
22 |   TableColumn,
23 |   Dialog,
24 |   Col,
25 |   Divider,
26 |   Tabs,
27 |   TabPane,
28 |   Popover,
29 |   Progress,
30 |   Collapse,
31 |   CollapseItem,
32 |   MessageBox,
33 |   Loading,
34 |   Header
35 | } from 'element-ui'
36 | 
37 | Vue.use(Loading.directive)
38 | Vue.use(Form)
39 | Vue.use(FormItem)
40 | Vue.use(Input)
41 | Vue.use(Card)
42 | Vue.use(Button)
43 | Vue.use(Row)
44 | Vue.use(Carousel)
45 | Vue.use(CarouselItem)
46 | Vue.use(Link)
47 | Vue.use(Image)
48 | Vue.use(Pagination)
49 | Vue.use(Menu)
50 | Vue.use(MenuItem)
51 | Vue.use(Container)
52 | Vue.use(Aside)
53 | Vue.use(Main)
54 | Vue.use(Table)
55 | Vue.use(TableColumn)
56 | Vue.use(Dialog)
57 | Vue.use(Col)
58 | Vue.use(Divider)
59 | Vue.use(Tabs)
60 | Vue.use(TabPane)
61 | Vue.use(Popover)
62 | Vue.use(Progress)
63 | Vue.use(Collapse)
64 | Vue.use(CollapseItem)
65 | Vue.use(Header)
66 | Vue.prototype.$confirm = MessageBox.confirm
67 | Vue.prototype.$message = Message
68 | Vue.prototype.$loading = Loading.service
69 | 


--------------------------------------------------------------------------------
/src/components/songOutline /highOutline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box" @click="goSongMenu(music.id)">
 3 |     <img :src="music.coverImgUrl">
 4 |     <div class="name">{{music.name}}</div>
 5 |     <div class="copywriter">{{music.copywriter}}</div>
 6 |     <div class="creator">by {{music.creator.nickname}}</div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'highOutline',
13 |   props: {
14 |     music: Object
15 |   },
16 |   data () {
17 |     return {}
18 |   },
19 |   methods: {
20 |     goSongMenu (id) {
21 |       this.$router.push({
22 |         path: '/songMenuDetail',
23 |         query: {
24 |           id
25 |         }
26 |       })
27 |     }
28 |   },
29 |   computed: {}
30 | }
31 | </script>
32 | 
33 | <style lang="stylus" scoped>
34 |   .box:hover
35 |     background-color #0e0e0e
36 |   .box
37 |     position relative
38 |     width 100%
39 |     padding 4px 0
40 |     .copywriter
41 |       position absolute
42 |       left 130px
43 |       top 90px
44 |       font-size 12px
45 |       color #888888
46 |     .name
47 |       position absolute
48 |       top 10px
49 |       left 130px
50 |     .creator
51 |       position absolute
52 |       top 50px
53 |       left 130px
54 |       font-size 12px
55 |       color #616060
56 |   img
57 |     width 120px
58 |     height 120px
59 |     margin auto
60 | </style>
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xhymusic",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "core-js": "^3.6.4",
13 |     "element-ui": "^2.13.1",
14 |     "vue": "^2.6.11",
15 |     "vue-router": "^3.0.7",
16 |     "vuex": "^3.1.3"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "~4.3.0",
20 |     "@vue/cli-plugin-eslint": "~4.3.0",
21 |     "@vue/cli-plugin-router": "~4.3.0",
22 |     "@vue/cli-plugin-vuex": "~4.3.0",
23 |     "@vue/cli-service": "~4.3.0",
24 |     "@vue/eslint-config-standard": "^5.1.2",
25 |     "babel-eslint": "^10.1.0",
26 |     "babel-plugin-component": "^1.1.1",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-import": "^2.20.2",
29 |     "eslint-plugin-node": "^11.1.0",
30 |     "eslint-plugin-promise": "^4.2.1",
31 |     "eslint-plugin-standard": "^4.0.0",
32 |     "eslint-plugin-vue": "^6.2.2",
33 |     "stylus": "^0.54.7",
34 |     "stylus-loader": "^3.0.2",
35 |     "vue-template-compiler": "^2.6.11"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "@vue/standard"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not dead"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/commentsTable/commentsTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="comment">
 3 |     <div class="img">
 4 |       <img :src="singleComment.user.avatarUrl" alt="">
 5 |     </div>
 6 |     <span class="nickname">{{singleComment.user.nickname}}</span>
 7 |     <span class="content" :style="{width:newWidth}">{{singleComment.content}}</span>
 8 |     <span class="time">{{commentTime}}</span>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'commentsTable',
15 |   props: {
16 |     comment: {
17 |       type: Object
18 |     },
19 |     width: {
20 |       type: String,
21 |       default: '530px'
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       singleComment: this.comment,
27 |       newWidth: this.width
28 |     }
29 |   },
30 |   methods: {},
31 |   computed: {
32 |     commentTime () {
33 |       const time = new Date()
34 |       time.setTime(this.singleComment.time)
35 |       return time.toLocaleDateString()
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="stylus" scoped>
42 |   .comment
43 |     position relative
44 |   .img
45 |     margin 10px
46 |     img
47 |       width 50px
48 |       height 50px
49 |   .nickname
50 |     font-size 12px
51 |     color #639da5
52 |     position absolute
53 |     left 70px
54 |     top -1px
55 |   .content
56 |     font-size 14px
57 |     position absolute
58 |     top 30px
59 |     left 70px
60 |     overflow hidden
61 |     text-overflow ellipsis
62 |     white-space nowrap
63 |   .time
64 |     font-size 10px
65 |     color #888888
66 |     position absolute
67 |     right 20px
68 |     top 20px
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/components/songTable/songmenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex">
 3 |     <table>
 4 |       <tr v-for="(item, index) in songs" :key="index" @click="goSongMenu(item.id)">
 5 | <!--        <td>{{index+1}}</td>-->
 6 |         <td class="go"><i class="el-icon-video-play"></i></td>
 7 | <!--        <i class="el-icon-video-play"  :class="{'el-icon-video-pause':active == item.id}"  @click="play(item.id, item.track,item.name,item.album.name)"></i>-->
 8 |         <td><img :src="item.coverImgUrl" alt=""></td>
 9 |         <td><div>{{item.name}}</div></td>
10 |         <td class="creator">{{item.creator.nickname}}</td>
11 |       </tr>
12 |     </table>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'songmenu',
19 |   props: {
20 |     songs: {
21 |       type: Array
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |     }
27 |   },
28 |   methods: {
29 |     goSongMenu (id) {
30 |       this.$router.push({
31 |         path: '/songMenuDetail',
32 |         query: {
33 |           id
34 |         }
35 |       })
36 |     }
37 |   },
38 |   computed: {
39 |   }
40 | }
41 | </script>
42 | 
43 | <style lang="stylus" scoped>
44 |   table tr:nth-child(odd)
45 |     background-color #1c1c1c
46 |   table tr:nth-child(even)
47 |     color #909399
48 |   table
49 |     font-size 14px
50 |     width 100%
51 |     border-collapse collapse
52 |   td,i
53 |     cellspacing 10
54 |     padding 5px
55 |     vertical-align middle
56 |   i
57 |     font-size 1.5em
58 |   tr
59 |     cursor pointer
60 |     div
61 |       width 240px
62 |       overflow hidden
63 |       text-overflow ellipsis
64 |       white-space nowrap
65 |   img
66 |     vertical-align middle
67 |     width 40px
68 |     height 40px
69 |   .go
70 |     cursor pointer
71 |   .creator
72 |     font-size 12px
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/components/songOutline /musicOutline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box">
 3 |     <img :src="music.album.picUrl">
 4 |     <div class="num">{{double(index+1)}}</div>
 5 |     <div class="name">{{music.name}}</div>
 6 |     <div class="singer">
 7 |       <template v-for="(item, index) in music.artists">
 8 |         <span :key="index" v-if="index===0" @click="goSinger(item.id)">{{item.name}}</span>
 9 |         <span :key="index" v-else @click="goSinger(item.id)">/{{item.name}}</span>
10 |       </template>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'musicOutline',
18 |   props: {
19 |     music: Object,
20 |     index: Number
21 |   },
22 |   data () {
23 |     return {}
24 |   },
25 |   methods: {
26 |     goSinger (id) {
27 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
28 |     },
29 |     double (num) {
30 |       if (num.toString().length >= 2) {
31 |         return num
32 |       } else {
33 |         if (num === 0) {
34 |           return '00'
35 |         }
36 |         return '0' + num
37 |       }
38 |     }
39 |   },
40 |   computed: {}
41 | }
42 | </script>
43 | 
44 | <style lang="stylus" scoped>
45 |   .box:hover
46 |     background-color #0e0e0e
47 |   .box
48 |     cursor pointer
49 |     position relative
50 |     width 100%
51 |     padding 4px 0
52 |     .singer
53 |       position absolute
54 |       left 100px
55 |       top 40px
56 |       font-size 12px
57 |       color #888888
58 |       span:hover
59 |         color #5f5e5e
60 |         cursor pointer
61 |     .name
62 |       position absolute
63 |       top 10px
64 |       left 100px
65 |     .num
66 |       position absolute
67 |       left 70px
68 |       top 20px
69 |       color #555454
70 |       font-size 14px
71 |   img
72 |     width 60px
73 |     height 60px
74 |     margin auto
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/songOutline /albumOutline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="img-item">
 3 |     <div :style="{width:newLength, height:newHeight}" class="imgs" @mouseenter="enter" @mouseleave="leave">
 4 |       <slot name="img"></slot>
 5 |       <transition name="icon">
 6 |         <i class="el-icon-video-play" v-if="newActive" :style="{'font-size':newFont, top:yCenter, left:xCenter}"></i>
 7 |       </transition>
 8 |     </div>
 9 |     <div class="sentence" :style="{width:newLength}">
10 |       <slot name="sentence"></slot>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'albumOutline',
18 |   props: {
19 |     length: {
20 |       type: String,
21 |       default: '150px'
22 |     },
23 |     height: {
24 |       type: String,
25 |       default: 'auto'
26 |     }
27 |   },
28 |   data () {
29 |     return {
30 |       newLength: this.length,
31 |       newHeight: this.height,
32 |       newActive: false
33 |     }
34 |   },
35 |   methods: {
36 |     enter () {
37 |       this.newActive = true
38 |     },
39 |     leave () {
40 |       this.newActive = false
41 |     }
42 |   },
43 |   computed: {
44 |     newFont () {
45 |       return `${parseInt(this.newHeight) * 0.4}px`
46 |     },
47 |     xCenter () {
48 |       return `${(parseInt(this.newLength) - parseInt(this.newHeight) * 0.4) / 2}px`
49 |     },
50 |     yCenter () {
51 |       return `${parseInt(this.newHeight) * 0.6 / 2}px`
52 |     }
53 |   }
54 | }
55 | </script>
56 | 
57 | <style lang="stylus" scoped>
58 |   .img-item
59 |     display inline-block
60 |     margin 20px
61 |     .imgs
62 |       position relative
63 |     .sentence
64 |       color white
65 |       font-size 10px
66 |       cursor pointer
67 |       div
68 |         overflow hidden
69 |         text-overflow ellipsis
70 |         white-space nowrap
71 |   .icon-enter-active, .icon-leave-active
72 |     transition opacity 0.5s
73 |   .icon-enter, .icon-leave-to
74 |     opacity 0
75 |   i
76 |     position absolute
77 |     margin 5px
78 |   .imgs:hover
79 |     img
80 |       width 110%
81 |       height 110%
82 |       border 1px solid red
83 |       box-shadow 0 0 10px red
84 |     +.sentence
85 |       visibility hidden
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/lyric/lyric.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-collapse-item :name="songItem.id">
 4 |       <template slot="title">
 5 |         <el-col :span="8">
 6 |           <i class="el-icon-video-play"></i>
 7 |           <span>{{songItem.name}}</span>
 8 |         </el-col>
 9 |         <el-col :offset="1" :span="5">
10 |           <template v-for="(item, index) in songItem.artists">
11 |             <span :key="index" v-if="index===0">{{item.name}}</span>
12 |             <span :key="index" v-else>/{{item.name}}</span>
13 |           </template>
14 |         </el-col>
15 |         <el-col :offset="1" :span="5"><span>《{{songItem.album.name}}》</span></el-col>
16 |         <el-col :offset="1" :span="1"><span class="time">{{duration}}</span></el-col>
17 |         <el-col :offset="1" :span="1"><i class="el-icon-star-on"></i></el-col>
18 |       </template>
19 |       <div>
20 |         <template v-for="(item, index) in txt">
21 |           <div :key="index">{{item}}</div>
22 |         </template>
23 |       </div>
24 |     </el-collapse-item>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |   name: 'lyric',
31 |   props: {
32 |     song: {
33 |       type: Object
34 |     }
35 |   },
36 |   data () {
37 |     return {
38 |       songItem: this.song
39 |     }
40 |   },
41 |   methods: {
42 |     double (num) {
43 |       if (num.toString().length !== 2) {
44 |         if (num === 0) {
45 |           return '00'
46 |         }
47 |         return '0' + num
48 |       }
49 |       return num
50 |     }
51 |   },
52 |   computed: {
53 |     txt () {
54 |       return this.songItem.lyrics.txt.split('\n')
55 |     },
56 |     duration () {
57 |       return `${this.double(Math.floor(this.songItem.duration / 60000))}:${this.double(Math.floor(this.songItem.duration / 1000 % 60))}`
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | <style lang="stylus" scoped>
64 |   .time
65 |     font-size 14px
66 |     color #62c6a5
67 |   .el-col
68 |     overflow hidden
69 |     text-overflow ellipsis
70 |     white-space nowrap
71 |   .el-collapse-item
72 |     background-color  #1c1c1c
73 |     padding 15px
74 |     >>>.el-collapse-item__header
75 |       background-color  black
76 |       padding-left 10px
77 |       color white
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/components/lyric/playlist/lyrics.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 | <!--    <div class="lyric" v-for="(item,index) in txt" :key="index">{{item}}</div>-->
 4 | <!--    <div>{{txts}}</div>-->
 5 |     <div class="lyric" :class="{active:key===newTime}" v-for="(item,key) in timeLyric" :key="key">{{item}}</div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'lyrics',
12 |   props: {
13 |     lyric: {
14 |       type: Object
15 |     },
16 |     time: {
17 |       type: String
18 |     }
19 |   },
20 |   data () {
21 |     return {
22 |       timeLyric: {},
23 |       active: false,
24 |       keyValue: '',
25 |       newTime: this.time
26 |     }
27 |   },
28 |   created () {
29 |     this.getLyric()
30 |   },
31 |   methods: {
32 |     getLyric () {
33 |       const lyricsList = this.lyric.lrc.lyric.split('\n')
34 |       this.timeLyric = {}
35 |       lyricsList.forEach(value => {
36 |         const reg = /]/
37 |         let a = value
38 |         while (reg.test(a)) {
39 |           a = String(String(a.match('[\\]^]+.*')).match('[^(\\])].*'))
40 |         }
41 |         let b = String(value.match('(\\[[0-9][0-9]:[0-6][0-9].[0-9][0-9]+])+'))
42 |         b = b.split('[')
43 |         b.forEach(v => {
44 |           v = v.match('[0-9][0-9]:[0-6][0-9]') + ''
45 |           if (v !== 'null') {
46 |             if (a !== 'null') {
47 |               this.timeLyric[v] = a
48 |             }
49 |           }
50 |         })
51 |       })
52 |       console.log(this.timeLyric)
53 |     }
54 |   },
55 |   watch: {
56 |     lyric () {
57 |       this.getLyric()
58 |     },
59 |     time (newValue) {
60 |       for (const key in this.timeLyric) {
61 |         if (key === newValue) {
62 |           this.keyValue = newValue
63 |           this.newTime = newValue
64 |           this.$emit('changeScroll', 10)
65 |         } else {
66 |           this.newTime = this.keyValue
67 |           // this.$emit('changeScroll', 1)
68 |         }
69 |       }
70 |     }
71 |   },
72 |   computed: {
73 |   }
74 | }
75 | </script>
76 | 
77 | <style lang="stylus" scoped>
78 |   .lyric
79 |     padding 14px
80 |     text-align center
81 |     font-size 12px
82 |     color rgba(136, 136, 136, 0.96)
83 |   .active
84 |     font-size 14px
85 |     color red
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/songOutline /songOutline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="img-item">
 3 |     <div :style="{width:newLength, height:newHeight}" class="img" @mouseenter="enter" @mouseleave="leave">
 4 |       <transition name="creator">
 5 |         <div v-if="newActive" class="hover">
 6 |           <div><slot name="creator"></slot></div>
 7 |         </div>
 8 |       </transition>
 9 |       <slot name="img"></slot>
10 |       <transition name="icon">
11 |           <i class="el-icon-video-play" v-if="newActive" :style="{'font-size':newFont}"></i>
12 |       </transition>
13 |     </div>
14 |     <div class="sentence" :style="{width:newLength}">
15 |       <slot name="sentence"></slot>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'songOutline',
23 |   props: {
24 |     length: {
25 |       type: String,
26 |       default: '100%'
27 |     },
28 |     height: {
29 |       type: String,
30 |       default: 'auto'
31 |     }
32 |   },
33 |   data () {
34 |     return {
35 |       newLength: this.length,
36 |       newHeight: this.height,
37 |       newActive: false
38 |     }
39 |   },
40 |   methods: {
41 |     enter () {
42 |       this.newActive = true
43 |     },
44 |     leave () {
45 |       this.newActive = false
46 |     }
47 |   },
48 |   computed: {
49 |     newFont () {
50 |       return `${parseInt(this.newLength) * 0.25}px`
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <style lang="stylus" scoped>
57 |   .img-item
58 |     display inline-block
59 |     padding 0 20px
60 |     .img
61 |       position relative
62 |     .sentence
63 |       color white
64 |       font-size 10px
65 |       cursor pointer
66 |       div
67 |         text-align justify
68 |         overflow: hidden
69 |         display: -webkit-box
70 |         -webkit-box-orient: vertical
71 |         -webkit-line-clamp 2
72 |   .icon-enter-active, .icon-leave-active
73 |     transition opacity 0.5s
74 |   .icon-enter, .icon-leave-to
75 |     opacity 0
76 |   .hover
77 |     div
78 |       width 100%
79 |       padding 4px
80 |       position absolute
81 |       left 0
82 |       top 0
83 |       font-size 10px
84 |       background: rgba(0,0,0,0.6)
85 |   i
86 |     position absolute
87 |     bottom 0
88 |     right 0
89 |     margin 5px
90 |   .creator-enter-active, .creator-leave-active
91 |     transition all 0.5s
92 |   .creator-enter, .creator-leave-to
93 |     opacity 0
94 |     transform translateY(-7px)
95 | </style>
96 | 


--------------------------------------------------------------------------------
/src/components/lyric/playlist/playlist.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex">
  3 |     <table>
  4 |       <tr v-for="(item, index) in songs" :key="item.id" @click="play(item.id, index)" :class="{active:index===activeSongId}">
  5 |         <td><div class="name">{{item.name}}</div></td>
  6 | <!--        <td class="creator">{{item.creator.nickname}}</td>-->
  7 |         <td>
  8 |           <div class="singer">
  9 |             <template v-for="(items, index) in item.ar">
 10 |               <span :key="items.id" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 11 |               <span :key="items.id" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 12 |             </template>
 13 |           </div>
 14 |         </td>
 15 |         <td>
 16 |           <div class="dt">
 17 |             <span>{{duration(item.dt)}}</span>
 18 |           </div>
 19 |         </td>
 20 |       </tr>
 21 |     </table>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   name: 'playlist',
 28 |   props: {
 29 |     songs: {
 30 |       type: Array
 31 |     },
 32 |     activeSongId: {
 33 |       type: Number
 34 |     }
 35 |   },
 36 |   data () {
 37 |     return {
 38 |     }
 39 |   },
 40 |   methods: {
 41 |     duration (time) {
 42 |       return `${this.double(Math.floor(time / 60000))}:${this.double(Math.floor(time / 1000 % 60))}`
 43 |     },
 44 |     double (num) {
 45 |       if (num.toString().length !== 2) {
 46 |         if (num === 0) {
 47 |           return '00'
 48 |         }
 49 |         return '0' + num
 50 |       }
 51 |       return num
 52 |     },
 53 |     goSinger (id) {
 54 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
 55 |     },
 56 |     play (id, index) {
 57 |       if (window.sessionStorage.getItem('songs') !== this.songs) {
 58 |         this.$store.commit('getSongs', this.songs)
 59 |       }
 60 |       this.$store.commit('getTotal', this.songs.length)
 61 |       this.$store.dispatch('play', {
 62 |         num: index,
 63 |         name: this.name
 64 |       })
 65 |     }
 66 |   },
 67 |   computed: {
 68 |     name () {
 69 |       return this.$store.state.tableName
 70 |     }
 71 |   }
 72 | }
 73 | </script>
 74 | 
 75 | <style lang="stylus" scoped>
 76 |   table
 77 |     color rgba(255, 255, 255, 0.82)
 78 |     font-size 12px
 79 |     border-collapse collapse
 80 |     td
 81 |       padding 5px 15px
 82 |     .singer
 83 |       width 80px
 84 |       span:hover
 85 |         text-decoration underline
 86 |         cursor pointer
 87 |     .dt
 88 |       width 40px
 89 |     .name
 90 |       width 360px
 91 |     div
 92 |       overflow hidden
 93 |       text-overflow ellipsis
 94 |       white-space nowrap
 95 |   tr
 96 |     cursor pointer
 97 |   tr:hover
 98 |     background-color red
 99 |   .active
100 |     background-color red
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/views/ranking/ranking.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-for="(item, index) in rankings">
  4 |       <song :key="item.id" :songs="item" :menu="rankingList[index]"></song>
  5 |     </template>
  6 |     <div class="grid-4">
  7 |       <template v-for="(item, index) in rankingList">
  8 |         <div :key="index" @click="goDetail(item.id)">
  9 |           <song-outline>
 10 |             <template v-slot:img>
 11 |               <img :src="item.coverImgUrl" alt="">
 12 |             </template>
 13 |             <template v-slot:creator>
 14 |               <span><i class="el-icon-caret-right"></i>{{count(item.playCount)}}</span>
 15 |             </template>
 16 |             <template v-slot:sentence>
 17 |               <div>{{item.name}}</div>
 18 |             </template>
 19 |           </song-outline>
 20 |         </div>
 21 |       </template>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import song from '../../components/songTable/song'
 28 | import songOutline from '../../components/songOutline /songOutline'
 29 | export default {
 30 |   name: 'ranking',
 31 |   components: {
 32 |     songOutline,
 33 |     song
 34 |   },
 35 |   created () {
 36 |     // 得到排行数据和第一个排行的详细数据
 37 |     this.getRanking()
 38 |     this.getMyselfRanking(0, 3)
 39 |     this.getMyselfRanking(1, 0)
 40 |     this.getMyselfRanking(2, 2)
 41 |     this.getMyselfRanking(3, 1)
 42 |     // 修改当前活跃的主菜单名
 43 |     this.$store.commit('editActiveName', 'ranking')
 44 |   },
 45 |   data () {
 46 |     return {
 47 |       // 排行榜数据
 48 |       rankingList: {},
 49 |       // 正在查看的排行榜音乐数据
 50 |       rankings: [],
 51 |       // 根据这个值去请求排行榜数据
 52 |       idx: [3, 0, 2, 1, 23, 24, 25, 26, 27, 22, 28, 36, 29, 30, 5, 6, 21, 7, 8, 10, 9, 20, 31, 32, 19, 35],
 53 |       // 当前排行榜的idx
 54 |       active: 3,
 55 |       // 评论数据
 56 |       // 当前排行榜id
 57 |       currentId: 0
 58 |     }
 59 |   },
 60 |   methods: {
 61 |     // 获取排行榜数据
 62 |     getRanking () {
 63 |       this.$http.get('/toplist/detail').then(data => {
 64 |         this.rankingList = data.list
 65 |         console.log(this.rankingList)
 66 |       })
 67 |     },
 68 |     // 根据id获取排行榜详细数据
 69 |     getMyselfRanking (i, idx) {
 70 |       this.active = idx
 71 |       this.$http.get(`/top/list?idx=${idx}`).then(data => {
 72 |         this.$set(this.rankings, i, data.playlist.tracks.slice(0, 5))
 73 |         this.currentId = data.playlist.id
 74 |       })
 75 |     },
 76 |     count (number) {
 77 |       if (number / 10000 > 1) {
 78 |         return `${(Math.floor(number / 10000))}万`
 79 |       } else {
 80 |         return number
 81 |       }
 82 |     },
 83 |     // 根据歌单的id，去往歌单详细信息页面
 84 |     goDetail (id) {
 85 |       this.$router.push({
 86 |         path: '/songMenuDetail',
 87 |         query: {
 88 |           id
 89 |         }
 90 |       })
 91 |     }
 92 |   },
 93 |   computed: {
 94 |     // 得到用户id
 95 |     accountId () {
 96 |       return this.$store.state.accountId
 97 |     }
 98 |   },
 99 |   watch: {
100 |   }
101 | }
102 | </script>
103 | 
104 | <style lang="stylus" scoped>
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/components/songTable/song.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <el-aside width="220px">
  5 |         <div :key="menu.id" @click="goDetail(menu.id)">
  6 |           <song-outline>
  7 |             <template v-slot:img>
  8 |               <img :src="menu.coverImgUrl" alt="">
  9 |             </template>
 10 |             <template v-slot:creator>
 11 |               <span><i class="el-icon-caret-right"></i>{{count(menu.playCount)}}</span>
 12 |             </template>
 13 |           </song-outline>
 14 |         </div>
 15 |       </el-aside>
 16 |       <el-main>
 17 |         <div v-for="(item, index) in songs" :key="index" class="row" :class="{odd: index%2 ===0}">
 18 |           <span class="num" :class="{one:index<3}">{{index+1}}</span>
 19 |           <span>{{item.name}}</span>
 20 |           <span class="singer">
 21 |           <template v-for="(items, index) in item.ar">
 22 |             <span :key="index" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 23 |             <span :key="index" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 24 |           </template>
 25 |             </span>
 26 |         </div>
 27 |         <div class="all" @click="goDetail(menu.id)">查看全部<i class="el-icon-arrow-right"></i></div>
 28 |       </el-main>
 29 |     </el-container>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import songOutline from '../songOutline /songOutline'
 35 | export default {
 36 |   name: 'song',
 37 |   components: {
 38 |     songOutline
 39 |   },
 40 |   props: {
 41 |     songs: {
 42 |       type: Array
 43 |     },
 44 |     menu: {
 45 |       type: Object
 46 |     }
 47 |   },
 48 |   data () {
 49 |     return {}
 50 |   },
 51 |   methods: {
 52 |     count (number) {
 53 |       if (number / 10000 > 1) {
 54 |         return `${(Math.floor(number / 10000))}万`
 55 |       } else {
 56 |         return number
 57 |       }
 58 |     },
 59 |     // 根据歌单的id，去往歌单详细信息页面
 60 |     goDetail (id) {
 61 |       this.$router.push({
 62 |         path: '/songMenuDetail',
 63 |         query: {
 64 |           id
 65 |         }
 66 |       })
 67 |     },
 68 |     goSinger (id) {
 69 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
 70 |     }
 71 |   },
 72 |   computed: {}
 73 | }
 74 | </script>
 75 | 
 76 | <style lang="stylus" scoped>
 77 |   .el-container
 78 |     margin 20px 0
 79 |     .el-main
 80 |       padding 5px 10px
 81 |       color #888888
 82 |       .all
 83 |         cursor pointer
 84 |         margin-top 10px
 85 |         margin-left 5px
 86 |         font-size 12px
 87 |       .odd
 88 |         background-color #131313
 89 |         color white
 90 |       .row:hover
 91 |         background-color #131313
 92 |       .row
 93 |         padding 5px
 94 |         .num
 95 |           margin-right 10px
 96 |           color #888888
 97 |         .one
 98 |           color red
 99 |         .singer
100 |           float right
101 |           color #888888
102 |           font-size 14px
103 |           span
104 |             cursor pointer
105 |           span:hover
106 |             color white
107 | </style>
108 | 


--------------------------------------------------------------------------------
/src/components/Login/phoneLogin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="center">
  3 |     <el-card class="box-card">
  4 |       <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
  5 |         <el-form-item prop="phone">
  6 |           <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
  7 |         </el-form-item>
  8 |         <el-form-item prop="password">
  9 |           <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
 10 |         </el-form-item>
 11 |         <div class="center">
 12 |           <el-button type="danger" class="loginButton" @click="login">登录</el-button>
 13 |         </div>
 14 |         <div class="register div" @click="register(2)"><i class="el-icon-back"></i>注册</div>
 15 |         <div class="forget div" @click="forget(2)">忘记密码<i class="el-icon-right"></i></div>
 16 |       </el-form>
 17 |     </el-card>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | export default {
 23 |   name: 'phoneLogin',
 24 |   data () {
 25 |     return {
 26 |       // 登录表单
 27 |       loginForm: {
 28 |         phone: '',
 29 |         password: ''
 30 |       },
 31 |       // 登录规则
 32 |       loginRules: {
 33 |         phone: [
 34 |           { required: true, message: '请输入手机号', trigger: 'blur' }
 35 |         ],
 36 |         password: [
 37 |           { required: true, message: '请输入密码', trigger: 'change' }
 38 |         ]
 39 |       }
 40 |     }
 41 |   },
 42 |   methods: {
 43 |     // 登录
 44 |     login () {
 45 |       this.$refs.loginForm.validate((valid) => {
 46 |         if (!valid) {
 47 |           return this.$message.error('请填写完整信息')
 48 |         }
 49 |         // 得到token，用户id
 50 |         this.$http.get('/login/cellphone', { params: this.loginForm }).then(data => {
 51 |           window.localStorage.setItem('token', data.token)
 52 |           // 得到用户的歌单id
 53 |           this.$http.get(`/user/playlist?uid=${data.account.id}`).then(data => {
 54 |             this.$store.commit('getSongMenuId', data.playlist[0].id)
 55 |           })
 56 |           this.$message.success('登录成功')
 57 |           this.$store.commit('getAccountId', data.account.id)
 58 |           window.localStorage.setItem('phone', this.loginForm.phone)
 59 |           window.localStorage.setItem('password', this.loginForm.password)
 60 |           window.localStorage.setItem('imgUrl', data.profile.avatarUrl)
 61 |           this.$emit('success', data.profile.avatarUrl)
 62 |         }).catch(() => {
 63 |           this.$message.error('密码错误')
 64 |         })
 65 |       })
 66 |     },
 67 |     // 跳转注册页面
 68 |     register (value) {
 69 |       this.$emit('register', { value: value, title: '注册' })
 70 |     },
 71 |     forget (value) {
 72 |       this.$emit('register', { value: value, title: '修改密码' })
 73 |     }
 74 |   },
 75 |   computed: {}
 76 | }
 77 | </script>
 78 | 
 79 | <style lang="stylus" scoped>
 80 |   .center
 81 |     display flex
 82 |     justify-content center
 83 |     align-items center
 84 |   .box-card
 85 |     border none
 86 |     width 450px
 87 |   .loginButton
 88 |     width 120px
 89 |   .forget
 90 |     right 0
 91 |     bottom 45px
 92 |     margin-right 40px
 93 |     position absolute
 94 |   .register
 95 |     position relative
 96 |   .div
 97 |     cursor pointer
 98 |     color #888888
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | const index = () => import('../views/index')
  4 | const recommend = () => import('../views/recommend/recommend')
  5 | const ranking = () => import('../views/ranking/ranking')
  6 | const songMenu = () => import('../views/songMenu/songMenu')
  7 | const singer = () => import('../views/singer/singer')
  8 | const detail = () => import('../views/songMenu/detail/detail')
  9 | const singerInformation = () => import('../views/singer/singerInformation/singerInformation')
 10 | const search = () => import('../views/search/search')
 11 | const album = () => import('../views/album/album')
 12 | const mv = () => import('../views/mv/mv')
 13 | const videos = () => import('../views/mv/videos')
 14 | const latest = () => import('../views/latest/latest')
 15 | const highQuality = () => import('../views/songMenu/highquality/highquality')
 16 | const myMusic = () => import('../views/myMusic/myMusic')
 17 | 
 18 | Vue.use(VueRouter)
 19 | 
 20 | const routes = [
 21 |   {
 22 |     path: '/',
 23 |     component: index,
 24 |     children: [
 25 |       {
 26 |         path: '/',
 27 |         redirect: '/recommend'
 28 |       },
 29 |       {
 30 |         path: '/recommend',
 31 |         name: 'recommend',
 32 |         component: recommend
 33 |       },
 34 |       {
 35 |         path: '/ranking',
 36 |         name: 'ranking',
 37 |         component: ranking
 38 |       },
 39 |       {
 40 |         path: '/songMenu',
 41 |         name: 'songMenu',
 42 |         component: songMenu
 43 |       },
 44 |       {
 45 |         path: '/singer',
 46 |         name: 'singer',
 47 |         component: singer
 48 |       },
 49 |       {
 50 |         path: '/search',
 51 |         name: 'search',
 52 |         component: search
 53 |       },
 54 |       {
 55 |         path: '/artist/:sid',
 56 |         name: 'singerInformation',
 57 |         component: singerInformation
 58 |       },
 59 |       {
 60 |         path: '/songMenuDetail',
 61 |         name: 'songMenuDetail',
 62 |         component: detail
 63 |       },
 64 |       {
 65 |         path: '/album',
 66 |         name: 'album',
 67 |         component: album
 68 |       },
 69 |       {
 70 |         path: '/latest',
 71 |         name: 'latest',
 72 |         component: latest
 73 |       },
 74 |       {
 75 |         path: '/highQuality',
 76 |         name: 'highQuality',
 77 |         component: highQuality
 78 |       },
 79 |       {
 80 |         path: '/myMusic',
 81 |         name: 'myMusic',
 82 |         component: myMusic
 83 |       }
 84 |     ]
 85 |   },
 86 |   {
 87 |     path: '/mv',
 88 |     name: 'mv',
 89 |     component: mv
 90 |   },
 91 |   {
 92 |     path: '/videos',
 93 |     name: 'videos',
 94 |     component: videos
 95 |   }
 96 | ]
 97 | 
 98 | const router = new VueRouter({
 99 |   mode: 'history',
100 |   base: process.env.BASE_URL,
101 |   routes
102 | })
103 | // router.afterEach((to, from) => {
104 | //   console.log(to.name)
105 | //   console.log(Vue.$store.state.active)
106 | //   this.$store.commit('editActiveName', to.name)
107 | // })
108 | // router.beforeEach((to, from, next) => {
109 | //   if (window.localStorage.getItem('token')) {
110 | //     store.commit('getLoginIf', true)
111 | //     next()
112 | //   } else {
113 | //     store.commit('getLoginIf', false)
114 | //     next()
115 | //   }
116 | // })
117 | export default router
118 | 


--------------------------------------------------------------------------------
/src/views/search/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-main>
  4 |       <el-row>
  5 |         <div class="search">
  6 |           <el-input v-model="keywords">
  7 |             <el-button slot="append" icon="el-icon-search" @keyup.enter.native="searchInf(input)"></el-button>
  8 |           </el-input>
  9 |         </div>
 10 |       </el-row>
 11 |       <div class="tabs">
 12 |         <div class="title">搜索"{{keywords}}", 找到</div>
 13 |         <el-tabs type="border-card" style="background-color: black" :stretch="true">
 14 |           <el-tab-pane label="单曲">
 15 |             <songs :songs="searchResult[0].songs"></songs>
 16 |           </el-tab-pane>
 17 |           <el-tab-pane label="歌手">
 18 |             <div class="flex">
 19 |               <template v-for="(item, index) in searchResult[1].artists">
 20 |                 <singer-outline :key="index" length="150px" height="150px">
 21 |                   <template v-slot:img>
 22 |                     <img :src="item.img1v1Url" alt="" @click="goSinger(item.id)">
 23 |                   </template>
 24 |                   <template v-slot:sentence>
 25 |                     <div>{{item.name}}</div>
 26 |                   </template>
 27 |                 </singer-outline>
 28 |               </template>
 29 |             </div>
 30 |           </el-tab-pane>
 31 |           <el-tab-pane label="专辑">
 32 |             <div class="grid-4">
 33 |               <template v-for="(item, index) in searchResult[2].albums">
 34 |                 <album-outline :key="index" length="150px" height="150px">
 35 |                   <template v-slot:img>
 36 |                     <img :src="item.blurPicUrl" alt="" @click="goAlbum(item.id)">
 37 |                   </template>
 38 |                   <template v-slot:sentence>
 39 |                     <div>{{item.name}}</div>
 40 |                   </template>
 41 |                 </album-outline>
 42 |               </template>
 43 |             </div>
 44 |           </el-tab-pane>
 45 |           <el-tab-pane label="视频">
 46 |             <div class="grid-4">
 47 |               <template v-for="(item, index) in searchResult[3].videos">
 48 |                 <album-outline :key="index" length="190px" height="120px">
 49 |                   <template v-slot:img>
 50 |                     <img :src="item.coverUrl" alt="" @click="goMv(item.vid, item.type)">
 51 |                   </template>
 52 |                   <template v-slot:sentence>
 53 |                     <div>{{item.title}}</div>
 54 |                   </template>
 55 |                 </album-outline>
 56 |               </template>
 57 |             </div>
 58 |           </el-tab-pane>
 59 |           <el-tab-pane label="歌词">
 60 |             <el-collapse v-model="activeNames" @change="handleChange">
 61 |               <template v-for="(item , index) in searchResult[4].songs">
 62 |                 <lyric :key="index" :song="item"></lyric>
 63 |               </template>
 64 |             </el-collapse>
 65 |           </el-tab-pane>
 66 |           <el-tab-pane label="歌单">
 67 |             <songmenu :songs="searchResult[5].playlists"></songmenu>
 68 |           </el-tab-pane>
 69 |         </el-tabs>
 70 |       </div>
 71 |     </el-main>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | import albumOutline from '../../components/songOutline /albumOutline'
 77 | import singerOutline from '../../components/songOutline /singerOutline'
 78 | import songmenu from '../../components/songTable/songmenu'
 79 | import lyric from '../../components/lyric/lyric'
 80 | import songs from '../../components/songTable/songs'
 81 | export default {
 82 |   name: 'search',
 83 |   components: {
 84 |     songs,
 85 |     lyric,
 86 |     songmenu,
 87 |     singerOutline,
 88 |     albumOutline
 89 |   },
 90 |   created () {
 91 |     this.search(1, 0)
 92 |     this.search(100, 1)
 93 |     this.search(10, 2)
 94 |     this.search(1014, 3)
 95 |     this.search(1006, 4)
 96 |     this.search(1000, 5)
 97 |     this.$nextTick(() => {
 98 |       this.getActiveNames()
 99 |     })
100 |   },
101 |   data () {
102 |     return {
103 |       searchResult: [
104 |         {}, {}, {}, {}, {}, {}
105 |       ],
106 |       activeNames: []
107 |     }
108 |   },
109 |   methods: {
110 |     // 根据type值，来获取搜索信息的type数据
111 |     search (type, i) {
112 |       this.$http.get(`/search?keywords=${this.keywords}&type=${type}`).then(data => {
113 |         this.$set(this.searchResult, i, data.result)
114 |         // this.searchResult.splice(i, 0, data.result)
115 |       })
116 |     },
117 |     // 去往歌手详细信息
118 |     goSinger (id) {
119 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
120 |     },
121 |     handleChange (val) {
122 |       console.log(val)
123 |     },
124 |     getActiveNames () {
125 |       console.log(this.searchResult[3])
126 |     },
127 |     // 去往专辑页面
128 |     goAlbum (id) {
129 |       this.$router.push({
130 |         path: '/album',
131 |         query: {
132 |           id
133 |         }
134 |       })
135 |     },
136 |     // 去往mv页面
137 |     goMv (id, type) {
138 |       if (type === 1) {
139 |         this.$router.push({
140 |           path: '/videos',
141 |           query: {
142 |             id,
143 |             type
144 |           }
145 |         })
146 |       } else {
147 |         this.$router.push({
148 |           path: '/mv',
149 |           query: {
150 |             id,
151 |             type
152 |           }
153 |         })
154 |       }
155 |     }
156 |   },
157 |   computed: {
158 |     keywords () {
159 |       return this.$route.query.keywords
160 |     }
161 |   },
162 |   watch: {
163 |   }
164 | }
165 | </script>
166 | 
167 | <style lang="stylus" scoped>
168 |   .el-main
169 |     padding 0
170 |     .search
171 |       width 400px
172 |       margin 10px auto
173 |   .el-input
174 |     :focus
175 |       border-color: red
176 |     .title
177 |       color #909399
178 |       font-size 14px
179 |       margin-bottom 6px
180 |       padding-left 10px
181 |   .el-collapse
182 |     padding 10px
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/views/latest/latest.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-main>
  4 |       <el-row type="flex-1">
  5 |         <template v-for="item in cate">
  6 |           <span :class="{active:activeName===item.name}" :key="item.id" @click="getSongs(item.id, item.name)">{{item.name}}</span>
  7 |         </template>
  8 |         <el-button class="cate" icon="el-icon-video-play" plain @click="playAll">播放全部</el-button>
  9 |       </el-row>
 10 |       <template v-for="(item, index) in musics" class="box">
 11 |         <div :key="item.id" class="music" :class="{odd:index%2 ===0}" @click="play(item.id, index)">
 12 |           <div class="num">{{double(index+1)}}</div>
 13 |           <img :src="item.album.picUrl">
 14 |           <div class="name">{{item.name}}</div>
 15 |           <div class="singer">
 16 |             <template v-for="(items, index) in item.artists">
 17 |               <span :key="index" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 18 |               <span :key="index" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 19 |             </template>
 20 |           </div>
 21 |           <div class="albumName" @click="goSongMenu(item.album.id)">{{item.album.name}}</div>
 22 |           <div class="time">{{duration(item.duration)}}</div>
 23 |         </div>
 24 |       </template>
 25 |     </el-main>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | export default {
 31 |   name: 'latest',
 32 |   created () {
 33 |     this.getSongs(0, '全部')
 34 |     this.$store.commit('editActiveName', 'latest')
 35 |   },
 36 |   mounted () {
 37 |     // 监听scroll事件，滚动到最顶部，再加载图片
 38 |     window.addEventListener('scroll', () => {
 39 |       if (document.documentElement.scrollTop + document.documentElement.clientHeight + 10 >= document.documentElement.scrollHeight) {
 40 |         if (this.musicsAll.length - this.musics.length > 0) {
 41 |           this.scrollShow()
 42 |         }
 43 |       }
 44 |     })
 45 |   },
 46 |   data () {
 47 |     return {
 48 |       musics: [],
 49 |       cate: [
 50 |         {
 51 |           name: '全部',
 52 |           id: 0
 53 |         },
 54 |         {
 55 |           name: '华语',
 56 |           id: 7
 57 |         },
 58 |         {
 59 |           name: '欧美',
 60 |           id: 96
 61 |         },
 62 |         {
 63 |           name: '韩国',
 64 |           id: 8
 65 |         },
 66 |         {
 67 |           name: '日本',
 68 |           id: 16
 69 |         }
 70 |       ],
 71 |       activeName: '',
 72 |       musicsAll: {}
 73 |     }
 74 |   },
 75 |   methods: {
 76 |     playAll () {
 77 |       this.$store.commit('getTotal', this.musics.length)
 78 |       this.$store.commit('getSongs', this.musics)
 79 |       this.$store.dispatch('play', { num: 0, name: 'playUrl' })
 80 |     },
 81 |     play (id, index) {
 82 |       if (this.active === id) {
 83 |         this.$store.commit('editActive', id + 1)
 84 |         this.$store.commit('pauseMusic')
 85 |       } else if (this.active === id + 1) {
 86 |         this.$store.commit('playMusic')
 87 |         this.$store.commit('editActive', id)
 88 |       } else {
 89 |         if (window.sessionStorage.getItem('songs') !== this.musics) {
 90 |           this.$store.commit('getSongs', this.musics)
 91 |         }
 92 |         this.$store.commit('getTotal', this.musics.length)
 93 |         this.$store.dispatch('play', { num: index, name: 'playUrl' })
 94 |       }
 95 |     },
 96 |     getSongs (type, name) {
 97 |       this.activeName = name
 98 |       this.$http.get(`/top/song?type=${type}`).then(data => {
 99 |         this.musics = data.data.slice(0, 8)
100 |         this.musicsAll = data.data
101 |       })
102 |     },
103 |     goSinger (id) {
104 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
105 |     },
106 |     goSongMenu (id) {
107 |       this.$router.push({
108 |         path: '/album',
109 |         query: {
110 |           id
111 |         }
112 |       })
113 |     },
114 |     double (num) {
115 |       if (num.toString().length >= 2) {
116 |         return num
117 |       } else {
118 |         if (num === 0) {
119 |           return '00'
120 |         }
121 |         return '0' + num
122 |       }
123 |     },
124 |     duration (time) {
125 |       return `${this.double(Math.floor(time / 60000))}:${this.double(Math.floor(time / 1000 % 60))}`
126 |     },
127 |     scrollShow () {
128 |       if (this.musicsAll.length - this.musics.length >= 5) {
129 |         this.musics = this.musics.concat(this.musicsAll.slice((this.musics.length), (this.musics.length + 5)))
130 |       } else {
131 |         this.musics = this.musics.concat(this.musicsAll.slice((this.musics.length + 1)))
132 |       }
133 |     }
134 |   },
135 |   computed: {
136 |     active () {
137 |       return this.$store.state.active
138 |     }
139 |   }
140 | }
141 | </script>
142 | 
143 | <style lang="stylus" scoped>
144 |   .el-main
145 |     padding 20px
146 |     .el-row
147 |       span
148 |         cursor pointer
149 |         color #888888
150 |         margin 10px 30px
151 |         font-size 16px
152 |     .el-button
153 |       float right
154 |       margin-right 100px
155 |   .music
156 |     position relative
157 |     margin 10px
158 |     .num
159 |       left -30px
160 |     img
161 |       width 80px
162 |       height 80px
163 |       margin-top 2px
164 |     div
165 |       font-size 14px
166 |       color #888888
167 |       position absolute
168 |       top 30px
169 |       overflow hidden
170 |       text-overflow ellipsis
171 |       white-space nowrap
172 |     .name
173 |       color white
174 |       font-size 16px
175 |       left 100px
176 |       width 260px
177 |     .singer
178 |       left 400px
179 |       width 160px
180 |       span
181 |         cursor pointer
182 |     .albumName
183 |       cursor pointer
184 |       left 600px
185 |       width 160px
186 |     .time
187 |       left 800px
188 |   .active
189 |     color white !important
190 |   .odd
191 |     background-color #0a0a0a
192 |   .cate
193 |     margin 10px
194 |     border-radius 10px
195 |     background-color #db5858
196 |     color white
197 |     padding 5px 15px
198 |     border none
199 | </style>
200 | 


--------------------------------------------------------------------------------
/src/views/recommend/recommend.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!--    banner-->
  4 |     <el-carousel :interval="5000" type="card" height="180px">
  5 |       <el-carousel-item v-for="(item, index) in banners" :key="index">
  6 |         <img class="banner" :src="item.imageUrl" :alt="item.typeTitle">
  7 |       </el-carousel-item>
  8 |     </el-carousel>
  9 |     <!--    网友精选-->
 10 |     <div class="container">
 11 |       <div class="hotFirst" @click="goSongMenu('全部')">推荐歌单<i class="el-icon-arrow-right"></i></div>
 12 |       <div class="grid-5">
 13 |         <template v-for="(item, index) in toplist">
 14 |           <div @click="songlist(item.id)" :key="index">
 15 |             <song-outline>
 16 |               <template v-slot:img>
 17 |                 <img :src="item.picUrl" alt="">
 18 |               </template>
 19 |               <template v-slot:creator>
 20 |                 <span><i class="el-icon-caret-right"></i>{{count(item.playCount)}}</span>
 21 |               </template>
 22 |               <template v-slot:sentence>
 23 |                 <div>{{item.name}}</div>
 24 |               </template>
 25 |             </song-outline>
 26 |           </div>
 27 |         </template>
 28 |       </div>
 29 |       <div class="hot">独家放送<i class="el-icon-arrow-right"></i></div>
 30 |       <div class="grid-4">
 31 |         <template v-for="item in exclusive">
 32 |           <div :key="item.id" @click="goMv(item.id, item.type)">
 33 |             <song-outline>
 34 |               <template v-slot:img>
 35 |                 <img :src="item.sPicUrl" alt="">
 36 |               </template>
 37 |               <template v-slot:creator>
 38 |                 <span>{{item.copywriter}}</span>
 39 |               </template>
 40 |               <template v-slot:sentence>
 41 |                 <div>{{item.copywriter}}</div>
 42 |               </template>
 43 |             </song-outline>
 44 |           </div>
 45 |         </template>
 46 |       </div>
 47 |       <div class="hot" @click="goLatest">最新音乐<i class="el-icon-arrow-right"></i></div>
 48 |       <div class="grid-2 latest">
 49 |         <template v-for="(item, index) in latestMusic">
 50 |           <div :key="item.id">
 51 |             <music-outline :music="item" :index="index"></music-outline>
 52 |           </div>
 53 |         </template>
 54 |       </div>
 55 |       <div class="hot">推荐MV<i class="el-icon-arrow-right"></i></div>
 56 |       <div class="grid-4">
 57 |         <template v-for="item in mvs">
 58 |           <div :key="item.id" @click="goMv(item.id, item.type)">
 59 |             <song-outline>
 60 |               <template v-slot:img>
 61 |                 <img :src="item.picUrl" alt="">
 62 |               </template>
 63 |               <template v-slot:creator>
 64 |                 <span>{{item.copywriter}}</span>
 65 |               </template>
 66 |               <template v-slot:sentence>
 67 |                 <div>{{item.name}}</div>
 68 |               </template>
 69 |             </song-outline>
 70 |           </div>
 71 |         </template>
 72 |       </div>
 73 |     </div>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | import musicOutline from '../../components/songOutline /musicOutline'
 79 | import songOutline from '../../components/songOutline /songOutline'
 80 | export default {
 81 |   name: 'recommend',
 82 |   components: {
 83 |     songOutline,
 84 |     musicOutline
 85 |   },
 86 |   data () {
 87 |     return {
 88 |       // banner数据
 89 |       banners: {},
 90 |       // 网友精选碟
 91 |       toplist: [],
 92 |       latestMusic: [],
 93 |       mvs: [],
 94 |       exclusive: []
 95 |     }
 96 |   },
 97 |   created () {
 98 |     // 处理请求
 99 |     this.getBanner()
100 |     this.getTop()
101 |     this.getLatestMusic()
102 |     this.getMv()
103 |     this.getExclusive()
104 |     this.$store.commit('editActiveName', 'recommend')
105 |   },
106 |   methods: {
107 |     // 获取banner数据
108 |     getBanner () {
109 |       this.$http.get('/banner').then(data => {
110 |         this.banners = data.banners
111 |       })
112 |     },
113 |     // 获取热门歌单
114 |     getTop () {
115 |       this.$http.get('/personalized?limit=10').then(data => {
116 |         this.toplist = data.result
117 |       })
118 |     },
119 |     // 获取最新音乐
120 |     getLatestMusic () {
121 |       this.$http.get('/top/song?limit=10').then(data => {
122 |         this.latestMusic = data.data.splice(0, 10)
123 |       })
124 |     },
125 |     // 获取推荐mv
126 |     getMv () {
127 |       this.$http.get('/personalized/mv').then(data => {
128 |         this.mvs = data.result
129 |       })
130 |     },
131 |     // 获取独家放送
132 |     getExclusive () {
133 |       this.$http.get('/personalized/privatecontent').then(data => {
134 |         this.exclusive = data.result
135 |       })
136 |     },
137 |     // 去往歌单详情页
138 |     songlist (id) {
139 |       this.$store.commit('editActiveName', 'songMenu')
140 |       this.$router.push({ path: '/songMenuDetail', query: { id } })
141 |     },
142 |     goLatest () {
143 |       this.$router.push({
144 |         path: '/latest'
145 |       })
146 |     },
147 |     // 根据热门分类，去往对应歌单分类
148 |     goSongMenu (name) {
149 |       this.$router.push({
150 |         path: '/songMenu',
151 |         query: {
152 |           name: name
153 |         }
154 |       })
155 |     },
156 |     count (number) {
157 |       if (number / 10000 > 1) {
158 |         return `${(Math.floor(number / 10000))}万`
159 |       } else {
160 |         return number
161 |       }
162 |     },
163 |     goMv (id, type) {
164 |       if (type === 1) {
165 |         this.$router.push({
166 |           path: '/videos',
167 |           query: {
168 |             id,
169 |             type
170 |           }
171 |         })
172 |       } else {
173 |         this.$router.push({
174 |           path: '/mv',
175 |           query: {
176 |             id,
177 |             type
178 |           }
179 |         })
180 |       }
181 |     }
182 |   },
183 |   computed: {
184 |   }
185 | }
186 | </script>
187 | 
188 | <style lang="stylus" scoped>
189 |   .container
190 |     margin 0 -20px
191 |   .hotFirst
192 |     margin 0 0 10px 20px
193 |     cursor pointer
194 |   .hot
195 |     margin 50px 0 10px 20px
196 |     cursor pointer
197 |   .el-row
198 |     padding-bottom 4px
199 |   .latest
200 |     margin 10px 20px
201 |     div
202 |       width 100%
203 | </style>
204 | 


--------------------------------------------------------------------------------
/src/components/songTable/songs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex">
  3 |     <table>
  4 |       <thead>
  5 |       <tr>
  6 |         <td colspan="3">歌曲列表</td>
  7 |         <td>时长</td>
  8 |         <td>歌手</td>
  9 |         <td colspan="3">专辑</td>
 10 |       </tr>
 11 |       </thead>
 12 |       <tbody>
 13 |       <tr v-for="(item, index) in songs" :key="index">
 14 |         <td>{{index+1}}</td>
 15 |         <!--        <i class="el-icon-video-play"  :class="{'el-icon-video-pause':active == item.id}"  @click="play(item.id, item.al.picUrl,item.name,item.al.name)"></i>-->
 16 |         <td><i class="el-icon-video-play"  :class="{'el-icon-video-pause':active == item.id}"  @click="play(item.id, index)"></i></td>
 17 |         <td  class="td"><div class="songName">{{item.name}}</div></td>
 18 |         <!--        时长-->
 19 |         <td class="td">
 20 |           <span>{{duration(item.duration)}}</span>
 21 |         </td>
 22 |         <!--        歌手-->
 23 |         <td  class="td">
 24 |           <div class="singer">
 25 |             <template v-for="(items, index) in item.artists">
 26 |               <span :key="items.id" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 27 |               <span :key="items.id" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 28 |             </template>
 29 |           </div>
 30 |         </td>
 31 |         <!--        专辑-->
 32 |         <td  class="td"><div class="album" @click="goAlbum(item.album.id)">{{item.album.name}}</div></td>
 33 |         <td class="collect">
 34 |           <i v-if="collected[item.id]!==undefined" class="el-icon-star-on" @click="collect('del', item.id)"><span>已收藏</span></i>
 35 |           <i v-else class="el-icon-star-off no" @click="collect('add', item.id)"><span>收藏</span></i>
 36 |         </td>
 37 |       </tr>
 38 |       </tbody>
 39 |     </table>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | export default {
 45 |   name: 'song',
 46 |   props: {
 47 |     songs: {
 48 |       type: Array
 49 |     }
 50 |   },
 51 |   data () {
 52 |     return {
 53 |       collected: {}
 54 |     }
 55 |   },
 56 |   methods: {
 57 |     // 播放歌曲
 58 |     play (id, index) {
 59 |       if (this.active === id) {
 60 |         this.$store.commit('editActive', id + 1)
 61 |         // this.active = id + 1
 62 |         this.$store.commit('pauseMusic')
 63 |         // this.$emit('pause')
 64 |       } else if (this.active === id + 1) {
 65 |         // this.$emit('play')
 66 |         this.$store.commit('playMusic')
 67 |         // this.active = id
 68 |         this.$store.commit('editActive', id)
 69 |       } else {
 70 |         if (window.sessionStorage.getItem('songs') !== this.songs) {
 71 |           this.$store.commit('getSongs', this.songs)
 72 |         }
 73 |         this.$store.commit('getTotal', this.songs.length)
 74 |         this.$store.commit('editActive', id)
 75 |         this.$store.dispatch('play', { num: index, name: 'songs' })
 76 |       }
 77 |     },
 78 |     collect (value, id) {
 79 |       if (this.accountId !== null) {
 80 |         this.$http.get(`/playlist/tracks?op=${value}&pid=${this.songMenuId}&tracks=${id}`).then(data => {
 81 |           if (data.code === 200) {
 82 |             if (value === 'add') {
 83 |               this.$message({
 84 |                 message: '成功收藏该歌曲',
 85 |                 type: 'success'
 86 |               })
 87 |               this.$set(this.collected, id, id)
 88 |               // this.collected[id] = id
 89 |             } else {
 90 |               this.$message({
 91 |                 message: '您取消收藏该歌曲',
 92 |                 type: 'warning'
 93 |               })
 94 |               this.$delete(this.collected, id)
 95 |               // delete this.collected[id]
 96 |             }
 97 |           }
 98 |         })
 99 |       } else {
100 |         this.$message.error('请登录')
101 |       }
102 |     },
103 |     // 判断是否收藏
104 |     getCollectedValue () {
105 |       this.collected = {}
106 |       this.$http.get(`/playlist/detail?id=${this.songMenuId}`).then(data => {
107 |         for (const key of data.playlist.tracks) {
108 |           this.$set(this.collected, key.id, key.id)
109 |         }
110 |       })
111 |     },
112 |     double (num) {
113 |       if (num.toString().length !== 2) {
114 |         if (num === 0) {
115 |           return '00'
116 |         }
117 |         return '0' + num
118 |       }
119 |       return num
120 |     },
121 |     duration (time) {
122 |       return `${this.double(Math.floor(time / 60000))}:${this.double(Math.floor(time / 1000 % 60))}`
123 |     },
124 |     goAlbum (id) {
125 |       this.$router.push({
126 |         path: '/album',
127 |         query: {
128 |           id
129 |         }
130 |       })
131 |     },
132 |     goSinger (id) {
133 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
134 |     }
135 |   },
136 |   computed: {
137 |     active () {
138 |       return this.$store.state.active
139 |     },
140 |     songMenuId () {
141 |       return this.$store.state.songMenuId
142 |     },
143 |     accountId () {
144 |       return this.$store.state.accountId
145 |     }
146 |   }
147 | }
148 | </script>
149 | 
150 | <style lang="stylus" scoped>
151 |   table tbody tr:nth-child(odd)
152 |     background-color #1c1c1c
153 |   table tbody tr:nth-child(even)
154 |     color #909399
155 |   table
156 |     font-size 14px
157 |     width 100%
158 |     border-collapse collapse
159 |   td,i
160 |     cellspacing 10
161 |     padding 5px
162 |   i
163 |     font-size 1.5em
164 |     cursor pointer
165 |   .td
166 |     .songName
167 |       width 230px
168 |       overflow hidden
169 |       text-overflow ellipsis
170 |       white-space nowrap
171 |     .singer,.album
172 |       margin-left 10px
173 |       font-size 12px
174 |       width 100px
175 |       overflow hidden
176 |       text-overflow ellipsis
177 |       white-space nowrap
178 |       color #888888
179 |     span
180 |       font-size 10px
181 |       color #888888
182 |   .collect
183 |     .no
184 |       visibility hidden
185 |     i
186 |       font-size 16px
187 |       width 60px
188 |       margin-left 10px
189 |       span
190 |         font-size 12px
191 |         margin-left 2px
192 |   table tr:hover
193 |     .collect
194 |       i
195 |         visibility visible
196 |   table thead tr
197 |     background-color #b93e37
198 |     td
199 |       margin-left 20px
200 |   .album:hover
201 |     text-decoration underline
202 |     cursor pointer
203 |   .singer span:hover
204 |     text-decoration underline
205 |     cursor pointer
206 | </style>
207 | 


--------------------------------------------------------------------------------
/src/components/songTable/songTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex">
  3 |     <table>
  4 |       <thead>
  5 |       <tr>
  6 |         <td colspan="3">歌曲列表</td>
  7 |         <td>时长</td>
  8 |         <td>歌手</td>
  9 |         <td colspan="3">专辑</td>
 10 |       </tr>
 11 |       </thead>
 12 |       <tbody>
 13 |       <tr v-for="(item, index) in songs" :key="item.id">
 14 |         <td>{{index+1}}</td>
 15 |         <!--        <i class="el-icon-video-play"  :class="{'el-icon-video-pause':active == item.id}"  @click="play(item.id, item.al.picUrl,item.name,item.al.name)"></i>-->
 16 |         <td><i class="el-icon-video-play" :class="{'el-icon-video-pause':active == item.id}"
 17 |                @click="play(item.id, index)"></i></td>
 18 |         <td class="td">
 19 |           <div class="songName">{{item.name}}</div>
 20 |         </td>
 21 |         <!--        时长-->
 22 |         <td class="td">
 23 |           <span>{{duration(item.dt)}}</span>
 24 |         </td>
 25 |         <!--        歌手-->
 26 |         <td class="td">
 27 |           <div class="singer">
 28 |             <template v-for="(items, index) in item.ar">
 29 |               <span :key="index" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 30 |               <span :key="index" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 31 |             </template>
 32 |           </div>
 33 |         </td>
 34 |         <!--        专辑-->
 35 |         <td class="td">
 36 |           <div class="album" @click="goAlbum(item.al.id)">{{item.al.name}}</div>
 37 |         </td>
 38 |         <td class="collect">
 39 |           <i v-if="collected[item.id]!==undefined" class="el-icon-star-on"
 40 |              @click="collect('del', item.id)"><span>已收藏</span></i>
 41 |           <i v-else class="el-icon-star-off no" @click="collect('add', item.id)"><span>收藏</span></i>
 42 |         </td>
 43 |       </tr>
 44 |       </tbody>
 45 |     </table>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | export default {
 51 |   name: 'songTable',
 52 |   props: {
 53 |     songs: {
 54 |       type: Array
 55 |     }
 56 |   },
 57 |   data () {
 58 |     return {
 59 |       collected: {}
 60 |     }
 61 |   },
 62 |   created () {
 63 |     if (this.accountId !== null) {
 64 |       this.getCollectedValue()
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     // 播放歌曲
 69 |     play (id, index) {
 70 |       if (this.active === id) {
 71 |         this.$store.commit('editActive', id + 1)
 72 |         this.$store.commit('pauseMusic')
 73 |       } else if (this.active === id + 1) {
 74 |         this.$store.commit('playMusic')
 75 |         this.$store.commit('editActive', id)
 76 |       } else {
 77 |         if (window.sessionStorage.getItem('songs') !== this.songs) {
 78 |           this.$store.commit('getSongs', this.songs)
 79 |         }
 80 |         this.$store.commit('getTotal', this.songs.length)
 81 |         this.$store.dispatch('play', { num: index, name: 'songTable' })
 82 |       }
 83 |     },
 84 |     collect (value, id) {
 85 |       if (this.accountId !== null) {
 86 |         this.$http.get(`/playlist/tracks?op=${value}&pid=${this.songMenuId}&tracks=${id}`).then(data => {
 87 |           if (data.code === 200) {
 88 |             if (value === 'add') {
 89 |               this.$message({
 90 |                 message: '成功收藏该歌曲',
 91 |                 type: 'success'
 92 |               })
 93 |               this.$set(this.collected, id, id)
 94 |               // this.collected[id] = id
 95 |             } else {
 96 |               this.$message({
 97 |                 message: '您取消收藏该歌曲',
 98 |                 type: 'warning'
 99 |               })
100 |               this.$delete(this.collected, id)
101 |               // delete this.collected[id]
102 |             }
103 |           }
104 |         })
105 |       } else {
106 |         this.$message.error('请登录')
107 |       }
108 |     },
109 |     // 判断是否收藏
110 |     getCollectedValue () {
111 |       this.collected = {}
112 |       this.$http.get(`/playlist/detail?id=${this.songMenuId}`).then(data => {
113 |         for (const key of data.playlist.tracks) {
114 |           this.$set(this.collected, key.id, key.id)
115 |         }
116 |       })
117 |     },
118 |     double (num) {
119 |       if (num.toString().length !== 2) {
120 |         if (num === 0) {
121 |           return '00'
122 |         }
123 |         return '0' + num
124 |       }
125 |       return num
126 |     },
127 |     duration (time) {
128 |       return `${this.double(Math.floor(time / 60000))}:${this.double(Math.floor(time / 1000 % 60))}`
129 |     },
130 |     goAlbum (id) {
131 |       this.$router.push({
132 |         path: '/album',
133 |         query: {
134 |           id
135 |         }
136 |       })
137 |     },
138 |     goSinger (id) {
139 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
140 |     }
141 |   },
142 |   computed: {
143 |     active () {
144 |       return this.$store.state.active
145 |     },
146 |     songMenuId () {
147 |       return this.$store.state.songMenuId
148 |     },
149 |     accountId () {
150 |       return this.$store.state.accountId
151 |     }
152 |   },
153 |   watch: {
154 |     active (newValue, oldValue) {
155 |     }
156 |   }
157 | }
158 | </script>
159 | 
160 | <style lang="stylus" scoped>
161 |   table tbody tr:nth-child(odd)
162 |     background-color #1c1c1c
163 |   table tbody tr:nth-child(even)
164 |     color #909399
165 |   table
166 |     font-size 14px
167 |     width 100%
168 |     border-collapse collapse
169 |   td,i
170 |     cellspacing 10
171 |     padding 5px
172 |   i
173 |     font-size 1.5em
174 |   .td
175 |     .songName
176 |       width 240px
177 |       overflow hidden
178 |       text-overflow ellipsis
179 |       white-space nowrap
180 |     .singer,.album
181 |       margin-left 10px
182 |       font-size 12px
183 |       width 100px
184 |       overflow hidden
185 |       text-overflow ellipsis
186 |       white-space nowrap
187 |       color #888888
188 |     span
189 |       font-size 10px
190 |       color #888888
191 |   .collect
192 |     .no
193 |       visibility hidden
194 |     i
195 |       font-size 16px
196 |       width 60px
197 |       margin-left 10px
198 |       span
199 |         font-size 12px
200 |         margin-left 2px
201 |   table tbody tr:hover
202 |     .collect
203 |       i
204 |         visibility visible
205 |   table thead tr
206 |     background-color #b93e37
207 |     td
208 |       margin-left 20px
209 |   .album:hover
210 |     text-decoration underline
211 |     cursor pointer
212 |   .singer span:hover
213 |     text-decoration underline
214 |     cursor pointer
215 | </style>
216 | 


--------------------------------------------------------------------------------
/src/components/musicPlayer/musicPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="audio1">
  4 |       <el-container v-show="show">
  5 |         <el-main v-if="songs !== null">
  6 |           <div>播放列表({{songs.length}})</div>
  7 |           <div class="scroll">
  8 |             <playlist :songs="songs" :activeSongId="Number(playSong.num)"></playlist>
  9 |           </div>
 10 |         </el-main>
 11 |         <el-aside v-if="lyrics !== null && lyrics.lrc !== undefined ">
 12 |           <div>{{playSong.name}}</div>
 13 |           <div ref="scroll" class="scroll">
 14 |             <lyrics :lyric="lyrics" :time="currentTime" @changeScroll="scrollEvent"></lyrics>
 15 |           </div>
 16 |         </el-aside>
 17 |         <el-aside v-else>
 18 |           <div>暂无歌词噢</div>
 19 |         </el-aside>
 20 |       </el-container>
 21 |       <div class="audio">
 22 |         <div class="i-group">
 23 |           <i class="el-icon-caret-left" @click="preSong"></i>
 24 |           <i class="el-icon-video-pause" v-if="playIf" @click="pauseMusic"></i>
 25 |           <i class="el-icon-video-play" v-else @click="playMusic"></i>
 26 |           <i class="el-icon-caret-right" @click="nextSong"></i>
 27 |         </div>
 28 |         <img :src="playSong.img" alt="">
 29 |         <div class="i">
 30 |           <span>{{playSong.name}}</span><span>{{playSong.singer}}</span>
 31 |           <el-progress :percentage="percentage" color="red" :show-text="false"></el-progress>
 32 |         </div>
 33 |         <div class="time">
 34 |           <span>{{currentTime}}/{{duration}}</span>
 35 |         </div>
 36 |         <i class="el-icon-caret-top" @click="showLyr"></i>
 37 |         <audio :src="playSong.url" ref="audio" autoplay @ended="ended" @canplay="getDuration"
 38 |                @timeupdate="getCurrentTime"></audio>
 39 |       </div>
 40 | <!--      <div class="lyric" v-if="playSong.lyric.hasOwnProperty('lrc')">{{playSong.lyric.lrc.lyric}}</div>-->
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import lyrics from '../lyric/playlist/lyrics'
 47 | import playlist from '../lyric/playlist/playlist'
 48 | export default {
 49 |   name: 'musicPlayer',
 50 |   components: {
 51 |     playlist,
 52 |     lyrics
 53 |   },
 54 |   data () {
 55 |     return {
 56 |       show: false
 57 |     }
 58 |   },
 59 |   mounted () {
 60 |     // 页面刷新时，停止音乐播放
 61 |     window.onload = e => {
 62 |       this.$refs.audio.pause()
 63 |     }
 64 |   },
 65 |   methods: {
 66 |     // 当音乐播放完毕后
 67 |     ended () {
 68 |       this.$store.commit('ended', this.playSong.num)
 69 |     },
 70 |     // 当音乐准备好开始播放
 71 |     getDuration () {
 72 |       this.$store.commit('getDuration', this.$refs.audio)
 73 |     },
 74 |     // 获取音乐实时播放的时间
 75 |     getCurrentTime () {
 76 |       this.$store.commit('getCurrentTime')
 77 |     },
 78 |     // 当点击了停止按钮
 79 |     pauseMusic () {
 80 |       this.$store.commit('pauseSongs')
 81 |     },
 82 |     // 当点击了播放按钮
 83 |     playMusic () {
 84 |       if (this.songs !== null) {
 85 |         this.$store.commit('playSongs')
 86 |       } else {
 87 |         this.$message.warning('暂无播放歌曲')
 88 |       }
 89 |     },
 90 |     preSong () {
 91 |       if (this.songs !== null) {
 92 |         this.$store.commit('editPreNum')
 93 |       } else {
 94 |         this.$message.warning('暂无播放歌曲')
 95 |       }
 96 |     },
 97 |     nextSong () {
 98 |       if (this.songs !== null) {
 99 |         this.$store.commit('editNextNum')
100 |       } else {
101 |         this.$message.warning('暂无播放歌曲')
102 |       }
103 |     },
104 |     showLyr () {
105 |       if (this.songs !== null) {
106 |         this.show = !this.show
107 |       } else {
108 |         this.$message.warning('暂无播放歌词')
109 |       }
110 |     },
111 |     scrollEvent (value) {
112 |       console.log(value)
113 |       this.$refs.scroll.scrollBy(0, value)
114 |     }
115 |   },
116 |   computed: {
117 |     // 从vuex里面获取到数据
118 |     playSong () {
119 |       if (this.$store.state.playSong.img !== null) {
120 |         return this.$store.state.playSong
121 |       } else {
122 |         return {
123 |           name: '暂无播放音乐'
124 |         }
125 |       }
126 |     },
127 |     playIf () {
128 |       return this.$store.state.playIf
129 |     },
130 |     duration () {
131 |       return this.$store.getters.duration
132 |     },
133 |     currentTime () {
134 |       return this.$store.getters.currentTime
135 |     },
136 |     percentage () {
137 |       // console.log(this.$store.getters.percentage)
138 |       return this.$store.getters.percentage
139 |     },
140 |     num () {
141 |       return this.$store.state.playSong.num
142 |     },
143 |     name () {
144 |       return this.$store.state.tableName
145 |     },
146 |     checkFalse () {
147 |       return this.$store.state.checkFalse
148 |     },
149 |     memberSong () {
150 |       return this.$store.state.memberSong
151 |     },
152 |     songs () {
153 |       return this.$store.state.songs
154 |     },
155 |     lyrics () {
156 |       console.log(this.$store.state.playSong.lyric)
157 |       return this.$store.state.playSong.lyric
158 |     }
159 |   },
160 |   watch: {
161 |     num (newValue) {
162 |       this.$refs.scroll.scrollTo(0, 0)
163 |       this.$store.dispatch('play', { num: newValue, name: this.name })
164 |     },
165 |     checkFalse (newValue) {
166 |       if (newValue === false) {
167 |         this.$message.error('亲爱的,此歌暂无版权')
168 |       }
169 |     },
170 |     memberSong (newValue) {
171 |       if (newValue === true) {
172 |         this.$message.warning('亲爱的，此歌是会员歌曲哦')
173 |       }
174 |     }
175 |   }
176 | }
177 | </script>
178 | 
179 | <style lang="stylus" scoped>
180 |   .audio1
181 |     margin auto
182 |     padding 10px 0 10px 50px
183 |     border-radius 10px 10px 0 0
184 |     background-color #000000
185 |   .audio
186 |     .i-group
187 |       display inline-block
188 |       width 102px
189 |       i
190 |         display inline-block
191 |         font-size 30px
192 |     .i
193 |       display inline-block
194 |       width 60%
195 |       span
196 |         color white
197 |         font-size 13px
198 |         +span
199 |           font-size 12px
200 |           color #888888
201 |           margin 0 20px
202 |     img
203 |       width 35px
204 |       height 35px
205 |       margin 0 15px
206 |       position relative
207 |       top 5px
208 |     .time
209 |       width 76px
210 |       display inline-block
211 |       margin 0 0 0 20px
212 |       font-size 13px
213 |       color #888888
214 |   .el-icon-caret-top
215 |     font-size 20px
216 |     margin-left 10px
217 |   .el-aside
218 |     text-align center
219 |     padding 20px 0
220 |   .scroll
221 |     margin-top 10px
222 |     height 200px
223 |     overflow scroll
224 | </style>
225 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 模仿网易云音乐pc端
  2 | ## 项目搭建
  3 | - ### 基本项目
  4 | 	 **安装脚手架**：npm install -g  @vue/cli  
  5 |   	**创建一个新项目**： vue create my-project(自己想取的项目名称)  
  6 | 	 1.Please pick a preset？(选择手动的，可以自己想要的配置)-------manully  
  7 | 	 2.Check the features needed for your project(询问项目需求)：我选择的如下图
  8 |  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516185345802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)  
  9 | 	 2. Use history mode for router(路由模式是否使用history)? -------yes  
 10 | 	 3. Pick a CSS pre-processor(询问项目的css预处理器)：--------Stylus   
 11 | 	 4.  Pick a linter / formatter config(询问项目的格式校验方式)：------Standard   
 12 | 	 5.  Pick additional lint features:(询问项目是什么时候校验格式)------lint on save(保存时就校验，哈哈哈哈，因为我不知道怎么写代码是规范的，需要他实时约束我)  
 13 | 	 6.  Where do you prefer placing config for Babel, ESLint, etc.?（询问项目的配置文件放在那里）-----In dedicated config files  
 14 | 	 7.  Save this as a preset for future projects? (是否保存该配置，若是，你以后创建新项目的时候，就会看见这个配置)----no  
 15 |  然后vue-cli就开始自己下载了，等待他  
 16 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516185345739.png)
 17 | -  ### 引入项目中使用的东西------axios，element-Ul
 18 | 	 **1.axios**  
 19 |  	下载npm install axios --save，运行时也会使用，所有要保存在你的运行时依赖中  
 20 |  	在src/main.js中：导入import axios from ‘axios’，  
 21 | 	 挂载到vue原型上Vue.prototype.$http = axios----使用的时候，就可以this.$http  
 22 |  	全局配置axios.defaults.baseURL = 'http://192.168.1.5:3000'  
 23 | 	 axios.defaults.withCredentials = true 表示跨域请求时是否需要使用凭证  
 24 |  	**2.element-UI**  
 25 |  	下载npm i element-ui -save  
 26 |  	我是在src下面建了一个elementUI文件夹，再建了一个element.js文件  
 27 |  	在这个文件中，按需引入elementUI  
 28 |  ```javascript
 29 |  import Vue from 'vue'
 30 |  import {
 31 |    	Form,
 32 |  	FormItem
 33 |   }from 'element-ui';
 34 |   Vue.use(Form)
 35 |   Vue.use(FormItem)
 36 | ```
 37 |   再在main.js中引入import './elementUi/element'
 38 |  最后删掉views，components里面原本存在的vue文件，连同src/router/index.js里的路由一起删掉----然后做完这些，我就开始研究文档了，一开始真的好难上手
 39 |  [网易云github地址](https://github.com/Binaryify/NeteaseCloudMusicApi).  
 40 |  下载后 node app.js 就可以了
 41 | ## 遇到的问题
 42 | - ### 播放音乐
 43 | 最开始的时候，我知道肯定会用audio标签，建立了一个musicPlayer组件，然后把它固定在浏览器底部，因为有好几个页面都有音乐播放，所以我只能把音乐数据放在vuex里面统一管理，传给vuex的值都是可用数据了，每次只能播放一首歌，播放完后，就直接停止了，我应该在他的ended事件里面做些什么。逻辑是这样的
 44 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516185345847.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)  
 45 | 大概吧，我真的不知道怎么表述了，反正数据，我都存在vuex里面了，
 46 | 总结：
 47 | - 1.在actions里面可以调用mutation--------context.commit('事件类型','参数')，网络请求等异步操作，放在actions里面------------组件调用this.$store.dispatch('事件类型', '参数')
 48 | - 2.mutations------组件调用this$store.commit('事件类型','参数')--vuex的store状态的更新唯一方式，注意不能在actions里直接修改state里的值，改是可以改的，不提倡，容易出问题
 49 | - ### 路由跳转
 50 | 问题：elementui中的导航菜单，自带的:default-active="activeIndex"，他只有点击才有对应的效果，你要是选择了第二项，然后刷新，他就会自动跳到第一个上面，整个导航菜单就会乱掉
 51 | 
 52 | - 我把首页里的activeName值保存在vuex中，同时也从vuex中取值，每次跳转时，都会在生命周期created里面提交修改activeName的值，路由就不会乱掉了
 53 | - ### flex布局
 54 | 在项目中，我经常遇到布局问题，因为好多图片，都要居中对齐，看起来整洁一点，总结一下经常用的
 55 | - 容器的justify-content属性，属性值space-between两端项目之间的距离都相等，center居中对齐
 56 | - 容器的flex-wrap----定义一行排不下item，如何换行----wrap换行
 57 | - 容器的align-items--定义在交叉轴上如何对齐，可以用来垂直居中块级元素
 58 | - 容器属性
 59 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516200935636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
 60 | - 项目属性
 61 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516200935595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
 62 | - ### 定位
 63 | - relative：相对定位，不脱离文档流，参考自身的静态位置
 64 | - absolute：绝对定位，参考最近一个不为static的父级元素的位置
 65 | - fixed：固定定位，参照对象为可视窗口
 66 | - static ：默认，按照正常流进行排列
 67 | - inherit：继承父属性的position值
 68 | - ### 修饰符sync
 69 | 在我使用elementUI时，我发现经常有数据，会加上这个修饰符.sync,一直不明白是什么意思
 70 | 
 71 | - 其实sync是一个语法糖，是什么语法糖呢？
 72 | - 在子组件中不能修改父组件中的值，要想修改父组件中的值，必须向父组件发射一个方法this.$emit('方法名',‘修改的的值);，然后父组件接收这个方法@方法名=‘处理数据操作’
 73 | - 如果使用.sync,就不用上面操作了，在子组件中修改的值，父组件也会同步变化
 74 | - ### sessionStorage
 75 | 存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.只能存储字符串类型,如果存储的数据类型不是字符串类型，存储时，会自动调用toString方法,存入一个对象数据，会变成 [object Object]字符串
 76 | 数据存储不正确，获取的sessionStorage数据也就不对了
 77 | - 1.存储时：JSON.stringify()方法转换成字符串，再存储到sessionStorage中
 78 | - 2.使用时：通过JSON.parse()方法将字符串转换成JSON格式即可
 79 | - ### v-model原理
 80 | 本质上是一个语法糖，通过@input事件+v-bind指令实现数据的双向绑定  
 81 | <input v-model='testValue'> == <input :value="testValue" @input="testValue = $event.target.value">
 82 | - ### 使单行文字超过一定长度显示...
 83 | - 1.规定元素的宽度  
 84 |        width: 200px;
 85 | - 2.定义超过元素宽度的文字隐藏  
 86 |        overflow: hidden
 87 | - 3.规定当文本溢出时包含元素时发生的事情------ellipsis(显示省略符号来代表被修剪的文本)  
 88 |        text-overflow: ellipsis
 89 | - 4.规定元素不换行  
 90 |        white-space: nowrap  
 91 | - ### 多行文字显示...
 92 | - 1.规定元素的宽度  
 93 |         width: 200px;
 94 |  - 2.定义超过元素宽度的文字隐藏  
 95 |         overflow: hidden
 96 |  - 3.设置盒子样式  
 97 |       display: -webkit-box    
 98 |  - 4.设置盒子参考方式  
 99 |        -webkit-box-orient: vertical
100 |  - 5.设置超出多少行显示省略号    
101 |         -webkit-line-clamp 2	
102 | ## 项目演示：[地址](https://www.bilibili.com/video/BV1ci4y1x7YV)
103 | ## 项目截图
104 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
105 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
106 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
107 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
108 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
109 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
110 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
111 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606174625510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoeXh4aHducw==,size_16,color_FFFFFF,t_70)
112 | 


--------------------------------------------------------------------------------
/src/components/register/register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="center">
  3 | <!--    发送验证码-->
  4 |     <el-card class="box-card">
  5 |       <el-form ref="phoneForm" :model="phoneForm" :rules="phoneRules" v-if="show">
  6 |         <el-form-item prop="phone">
  7 |           <el-input v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
  8 |         </el-form-item>
  9 |         <div class="center">
 10 |           <el-button type="danger" class="loginButton" @click="confirmPhone">确定</el-button>
 11 |         </div>
 12 |         <div class="login" @click="phoneLogin(1)"><i class="el-icon-back"></i>手机号登录</div>
 13 |       </el-form>
 14 |       <!--    注册-->
 15 |       <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" v-else-if="name==='注册'">
 16 |         <el-form-item prop="captcha" label="验证码">
 17 |           <el-input v-model="registerForm.captcha" placeholder="请输入验证码"></el-input>
 18 |         </el-form-item>
 19 |         <el-form-item prop="password" label="密码">
 20 |           <el-input v-model="registerForm.password" placeholder="请输入密码"></el-input>
 21 |         </el-form-item>
 22 |         <el-form-item prop="nickname" label="昵称">
 23 |           <el-input v-model="registerForm.nickname" placeholder="请输入昵称"></el-input>
 24 |         </el-form-item>
 25 |         <div class="center">
 26 |           <el-button type="danger" class="loginButton" @click="registerByPhone">确定</el-button>
 27 |         </div>
 28 |         <div class="login" @click="show=true"><i class="el-icon-back"></i>上一步</div>
 29 |       </el-form>
 30 |       <!--      修改密码-->
 31 |       <el-form ref="forgetForm" :model="forgetForm" :rules="forgetRules" label-width="80px" v-else>
 32 |         <el-form-item prop="captcha" label="验证码">
 33 |           <el-input v-model="forgetForm.captcha" placeholder="请输入验证码"></el-input>
 34 |         </el-form-item>
 35 |         <el-form-item prop="password" label="新密码">
 36 |           <el-input v-model="forgetForm.password" placeholder="请输入密码"></el-input>
 37 |         </el-form-item>
 38 |         <div class="center">
 39 |           <el-button type="danger" class="loginButton" @click="forgetByPhone">确定</el-button>
 40 |         </div>
 41 |         <div class="login" @click="show=true"><i class="el-icon-back"></i>上一步</div>
 42 |       </el-form>
 43 |       <el-dialog
 44 |         width="30%"
 45 |         :title="name+'成功'"
 46 |         :visible.sync="innerVisible"
 47 |         append-to-body
 48 |         center>
 49 |         <span>{{time}}秒钟跳转到登录页面</span>
 50 |       </el-dialog>
 51 |     </el-card>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script>
 56 | export default {
 57 |   name: 'register',
 58 |   props: {
 59 |     name: {
 60 |       type: String
 61 |     }
 62 |   },
 63 |   data () {
 64 |     return {
 65 |       // 设置哪一个表单显示
 66 |       show: true,
 67 |       // 电话表单
 68 |       phoneForm: {
 69 |         phone: ''
 70 |       },
 71 |       phoneRules: {
 72 |         phone: [
 73 |           { required: true, message: '请输入手机号', trigger: 'blur' }
 74 |         ]
 75 |       },
 76 |       // 登录表单
 77 |       registerForm: {
 78 |         phone: '',
 79 |         password: '',
 80 |         captcha: '',
 81 |         nickname: ''
 82 |       },
 83 |       // 登录规则
 84 |       registerRules: {
 85 |         captcha: [
 86 |           { required: true, message: '请输入验证码', trigger: 'blur' }
 87 |         ],
 88 |         password: [
 89 |           { required: true, message: '请输入密码', trigger: 'blur' }
 90 |         ],
 91 |         nickname: [
 92 |           { required: true, message: '请输入昵称', trigger: 'blur' }
 93 |         ]
 94 |       },
 95 |       forgetForm: {
 96 |         phone: 0,
 97 |         password: '',
 98 |         captcha: ''
 99 |       },
100 |       forgetRules: {
101 |         captcha: [
102 |           { required: true, message: '请输入验证码', trigger: 'blur' }
103 |         ],
104 |         password: [
105 |           { required: true, message: '请输入密码', trigger: 'blur' }
106 |         ]
107 |       },
108 |       time: 3,
109 |       innerVisible: false
110 |     }
111 |   },
112 |   methods: {
113 |     confirmPhone () {
114 |       this.$refs.phoneForm.validate((valid) => {
115 |         if (!valid) {
116 |           return this.$message.error('请填写完整信息')
117 |         }
118 |         this.$http.get(`/cellphone/existence/check?phone=${this.phoneForm.phone}`).then(data => {
119 |           if (data.exist === 1 && this.name === '注册') {
120 |             return this.$message.warning('你已经注册过，请登录')
121 |           } else if (data.exist !== 1 && this.name === '修改密码') {
122 |             return this.$message.warning('你还没有注册过，请先注册')
123 |           } else {
124 |             this.$http.get('/captcha/sent', { params: this.phoneForm }).then(() => {
125 |               this.show = false
126 |             })
127 |             if (this.name === '注册') {
128 |               this.registerForm.phone = this.phoneForm.phone
129 |             } else {
130 |               this.forgetForm.phone = this.phoneForm.phone
131 |             }
132 |           }
133 |         })
134 |       })
135 |     },
136 |     registerByPhone () {
137 |       this.$refs.registerForm.validate((valid) => {
138 |         if (!valid) {
139 |           return this.$message.error('请填写完整信息')
140 |         }
141 |         this.$http.get('/register/cellphone', { params: this.registerForm }).then(() => {
142 |           let t = 3
143 |           this.innerVisible = true
144 |           setInterval(() => {
145 |             if (t === 0) {
146 |               this.phoneLogin(1)
147 |             } else {
148 |               this.time = t
149 |               t--
150 |             }
151 |           }, 1000)
152 |         }).catch(err => {
153 |           if (err.code === 503) {
154 |             this.$message.error('验证码错误')
155 |           }
156 |         })
157 |       })
158 |     },
159 |     forgetByPhone () {
160 |       this.$refs.forgetForm.validate((valid) => {
161 |         if (!valid) {
162 |           return this.$message.error('请填写完整信息')
163 |         }
164 |         this.$http.get('/register/cellphone', { params: this.forgetForm }).then(() => {
165 |           let t = 2
166 |           this.innerVisible = true
167 |           setInterval(() => {
168 |             if (t === 0) {
169 |               this.phoneLogin(1)
170 |             } else {
171 |               this.time = t
172 |               t--
173 |             }
174 |           }, 1000)
175 |         }).catch(() => {
176 |           this.$message.error('验证码错误')
177 |         })
178 |       })
179 |     },
180 |     phoneLogin (value) {
181 |       this.$emit('login', { value: value, title: '手机登录' })
182 |     }
183 |   },
184 |   computed: {}
185 | }
186 | </script>
187 | 
188 | <style lang="stylus" scoped>
189 |   .center
190 |     display flex
191 |     justify-content center
192 |     align-items center
193 |   .box-card
194 |     width 450px
195 |     border none
196 |   .loginButton
197 |     width 120px
198 |   .login
199 |     cursor pointer
200 |     color #888888
201 | </style>
202 | 


--------------------------------------------------------------------------------
/src/views/singer/singer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <!--      页面主体-->
  5 |       <el-main>
  6 |         <div  class="main">
  7 |           <div class="language">
  8 |             <span>语种:</span>
  9 |             <div>
 10 |               <span :class="{actives: currentId === -1}" @click="show('area',-1)">全部</span>
 11 |               <template v-for="(item, index) in singerArea">
 12 |                 <el-divider :key="item.areaId" direction="vertical"></el-divider>
 13 |                 <span :key="index" :class="{actives: currentId === item.areaId}" @click="show('area', item.areaId)">{{item.name}}</span>
 14 |               </template>
 15 |             </div>
 16 |           </div>
 17 |           <div class="cate">
 18 |             <span>分类:</span>
 19 |             <div>
 20 |               <span :class="{actives: currentId2 === -1}" @click="show('cate',-1)">全部</span>
 21 |               <template v-for="(item, index) in singerType">
 22 |                 <el-divider :key="item.typeId" direction="vertical"></el-divider>
 23 |                 <span :key="index" :class="{actives: currentId2 === item.typeId}" @click="show('cate', item.typeId)">{{item.name}}</span>
 24 |               </template>
 25 |             </div>
 26 |           </div>
 27 |           <!--        循环字母-->
 28 |           <div class="spells">
 29 |             <span>筛选:</span>
 30 |             <div class="spell">
 31 |               <span :class="{actives: currentId3 === -1}" @click="searchSinger(-1)">热门</span>
 32 |               <template v-for="n in 26">
 33 |                 <el-divider :key="n" direction="vertical"></el-divider>
 34 |                 <span :key="n" :class="{actives: currentId3=== String.fromCharCode(n+96)}" class="spell-item"
 35 |                       @click="searchSinger(String.fromCharCode(n+96))">{{String.fromCharCode(n+64)}}</span>
 36 |               </template>
 37 |             </div>
 38 |             <el-divider direction="vertical"></el-divider>
 39 |             <span class="last" :class="{actives: currentId3 === 0}" @click="searchSinger(0)">#</span>
 40 |           </div>
 41 |         </div>
 42 |       <!--        歌手信息-->
 43 |         <div class="grid-5">
 44 |           <template v-for="item in singers">
 45 |             <singer-outline :key="item.id">
 46 |               <template v-slot:img>
 47 |                 <img :src="item.img1v1Url" alt="" @click="showInformation(item.id)">
 48 |               </template>
 49 |               <template v-slot:sentence>
 50 |                 <div @click="showInformation(item.id)">{{item.name}}</div>
 51 |               </template>
 52 |             </singer-outline>
 53 |           </template>
 54 |         </div>
 55 |       </el-main>
 56 |     </el-container>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import singerOutline from '../../components/songOutline /singerOutline'
 62 | export default {
 63 |   name: 'singer',
 64 |   created () {
 65 |     this.firstShow()
 66 |     this.$store.commit('editActiveName', 'singer')
 67 |   },
 68 |   mounted () {
 69 |     // 监听scroll事件，滚动到最顶部，再加载图片
 70 |     window.addEventListener('scroll', () => {
 71 |       if (document.documentElement.scrollTop + document.documentElement.clientHeight + 10 >= document.documentElement.scrollHeight) {
 72 |         if (this.singersAll.length - this.singers.length > 0) {
 73 |           this.scrollShow()
 74 |         }
 75 |       }
 76 |     })
 77 |   },
 78 |   components: {
 79 |     singerOutline
 80 |   },
 81 |   data () {
 82 |     return {
 83 |       // 歌手类型
 84 |       singerType: [
 85 |         {
 86 |           name: '男歌手',
 87 |           typeId: 1
 88 |         },
 89 |         {
 90 |           name: '女歌手',
 91 |           typeId: 2
 92 |         },
 93 |         {
 94 |           name: '组合乐队',
 95 |           typeId: 3
 96 |         }
 97 |       ],
 98 |       // 歌手地区
 99 |       singerArea: [
100 |         {
101 |           name: '华语',
102 |           areaId: 7
103 |         },
104 |         {
105 |           name: '欧美',
106 |           areaId: 96
107 |         },
108 |         {
109 |           name: '日本',
110 |           areaId: 8
111 |         },
112 |         {
113 |           name: '韩国',
114 |           areaId: 16
115 |         },
116 |         {
117 |           name: '其他',
118 |           areaId: 0
119 |         }
120 |       ],
121 |       singers: {},
122 |       // 记录此时的typeId,areaId
123 |       activeId: {
124 |         typeId: 0,
125 |         areaId: 0,
126 |         initial: -1
127 |       },
128 |       currentId: -1,
129 |       currentId2: -1,
130 |       currentId3: -1,
131 |       singersAll: {}
132 |     }
133 |   },
134 |   methods: {
135 |     // 获取歌手的种类
136 |     show (type, name) {
137 |       if (type === 'cate') {
138 |         this.currentId2 = name
139 |         this.activeId.typeId = name
140 |         this.$http.get(`/artist/list?type=${name}&area=${this.activeId.areaId}&initial=${this.activeId.initial}`).then(data => {
141 |           this.singers = data.artists.slice(0, 15)
142 |           this.singersAll = data.artists
143 |         })
144 |       } else {
145 |         this.currentId = name
146 |         this.activeId.areaId = name
147 |         this.$http.get(`/artist/list?type=${this.activeId.typeId}&area=${name}&initial=${this.activeId.initial}`).then(data => {
148 |           this.singers = data.artists.slice(0, 15)
149 |           this.singersAll = data.artists
150 |         })
151 |       }
152 |     },
153 |     // 根据字母获取歌手信息
154 |     searchSinger (value) {
155 |       this.currentId3 = value
156 |       this.activeId.initial = value
157 |       this.$http.get(`/artist/list?type=${this.activeId.typeId}&area=${this.activeId.areaId}&initial=${value}`).then(data => {
158 |         console.log(data)
159 |         this.singers = data.artists.slice(0, 15)
160 |         this.singersAll = data.artists
161 |       })
162 |     },
163 |     scrollShow () {
164 |       if (this.singersAll.length - this.singers.length >= 5) {
165 |         this.singers = this.singers.concat(this.singersAll.slice((this.singers.length), (this.singers.length + 5)))
166 |       } else {
167 |         this.singers = this.singers.concat(this.singersAll.slice((this.singers.length + 1)))
168 |       }
169 |     },
170 |     // 显示热门歌手
171 |     firstShow () {
172 |       this.activeId.typeId = -1
173 |       this.activeId.areaId = -1
174 |       this.$http.get('/artist/list?type=-1&area=-1').then(data => {
175 |         this.singers = data.artists.slice(0, 15)
176 |         this.singersAll = data.artists
177 |       })
178 |     },
179 |     // 根据id，去往歌手详细信息页面
180 |     showInformation (id) {
181 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
182 |     }
183 |   },
184 |   computed: {}
185 | }
186 | </script>
187 | 
188 | <style lang="stylus" scoped>
189 |   .actives
190 |     background-color #262626
191 |     border-radius 5px
192 |     color red
193 |   .el-main
194 |     padding 0
195 |     .main
196 |       margin  0 20px
197 |       color #828080
198 |       div
199 |         margin 4px 10px
200 |         font-size 14px
201 |         div
202 |           cursor pointer
203 |           display inline-block
204 |           span
205 |             padding 2px 10px
206 |           span:hover
207 |             color red
208 |         span:first-child
209 |           margin-right 5px
210 |       .spells
211 |         .spell
212 |           display inline
213 |         .spell-item,.last
214 |           margin 0 10px
215 |           padding 2px 20px
216 |   .el-divider
217 |     background-color #2a2929
218 | </style>
219 | 


--------------------------------------------------------------------------------
/src/views/songMenu/songMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!--      选择栏-->
  4 |     <div class="header" v-if="Object.keys(highqualityList).length!==0">
  5 |       <el-row>
  6 |         <img :src="highqualityList[0].coverImgUrl" alt="" @click="goHighQuality">
  7 |         <div>
  8 |           <button @click="goHighQuality">精品歌单</button>
  9 |           <span class="name" @click="goHighQuality">{{highqualityList[0].name}}</span>
 10 |           <span class="writer" @click="goHighQuality">{{highqualityList[0].copywriter}}</span>
 11 |         </div>
 12 |       </el-row>
 13 |     </div>
 14 |     <el-row>
 15 |       <el-popover
 16 |         placement="bottom-start"
 17 |         width="800"
 18 |         v-model="popovervisible">
 19 |         <button class="cate" @click="highCate">全部歌单</button>
 20 |         <div v-for="(item, index) in categories" :key="index">
 21 |           <div  class="category">
 22 |             <i :class="icon[index]"></i>
 23 |             {{item}}
 24 |           </div>
 25 |           <div class="category-item">
 26 |           <span class="category-item-item" v-for="(items, indexs) in reduction[index]" :key="indexs" @click="cate(items.name)">{{items.name}}
 27 |             <el-divider v-if="indexs!==reduction[index].length-1" direction="vertical"></el-divider>
 28 |           </span>
 29 |           </div>
 30 |         </div>
 31 |         <el-button class="button" slot="reference">{{cateName}}<i class="el-icon-arrow-right"></i></el-button>
 32 |       </el-popover>
 33 |       <div class="link">
 34 |         <template v-for="(item, index) in playlist">
 35 |           <el-link type="info" :key="index" style="margin: 0 10px" @click="cate(item.name)">
 36 |             <span>{{item.name}}</span></el-link>
 37 |         </template>
 38 |       </div>
 39 |     </el-row>
 40 |     <!--      歌单列表-->
 41 |     <div class="grid-4">
 42 |       <template v-for="(item, index) in songMenu">
 43 |         <song-outline :key="index">
 44 |           <template v-slot:img>
 45 |             <img :src="item.coverImgUrl" alt="" @click="songsDetail(item.id)">
 46 |           </template>
 47 |           <template v-slot:creator>
 48 |             <span>by {{item.creator.nickname}}</span>
 49 |           </template>
 50 |           <template v-slot:sentence>
 51 |             <div>{{item.name}}</div>
 52 |           </template>
 53 |         </song-outline>
 54 |       </template>
 55 |     </div>
 56 |     <!--    分页-->
 57 |     <el-pagination
 58 |       background
 59 |       layout="prev, pager, next"
 60 |       :page-size="20"
 61 |       :total="total"
 62 |       @prev-click="pre"
 63 |       @next-click="next"
 64 |       @current-change="current"
 65 |       :current-page.sync="currentPage">
 66 |     </el-pagination>
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 | import songOutline from '../../components/songOutline /songOutline'
 72 | export default {
 73 |   name: 'songMenu',
 74 |   components: {
 75 |     songOutline
 76 |   },
 77 |   created () {
 78 |     // 获取歌单分类数据
 79 |     this.getSongMenu()
 80 |     // 判断是当前路由有没有定义name值，如果没有，则显示全部精品歌单数据，如果有，则根据name值来显示
 81 |     if (this.$route.query.name === undefined) {
 82 |       this.highCate()
 83 |     } else {
 84 |       this.cate(this.$route.query.name)
 85 |     }
 86 |     this.getHot()
 87 |     this.getHighQuality()
 88 |     this.$store.commit('editActiveName', 'songMenu')
 89 |   },
 90 |   data () {
 91 |     return {
 92 |       // 歌单分类数据名称
 93 |       cateName: '',
 94 |       categories: {},
 95 |       sub: {},
 96 |       // 分类对话框是否显示
 97 |       // 歌单
 98 |       songMenu: {},
 99 |       icon: [
100 |         'el-icon-edit',
101 |         'el-icon-cold-drink',
102 |         'el-icon-headset',
103 |         'el-icon-sunny',
104 |         'el-icon-scissors'
105 |       ],
106 |       // 当前的页码值
107 |       currentPage: 1,
108 |       // 总的页码值
109 |       total: 0,
110 |       playlist: [],
111 |       highqualityList: [],
112 |       popovervisible: false
113 |     }
114 |   },
115 |   methods: {
116 |     // 获取热门分类数据
117 |     getHot () {
118 |       this.$http.get('/playlist/hot').then(data => {
119 |         this.playlist = data.tags
120 |       })
121 |     },
122 |     // 分类数据
123 |     getSongMenu () {
124 |       this.$http.get('/playlist/catlist').then(data => {
125 |         this.categories = data.categories
126 |         this.sub = data.sub
127 |       })
128 |     },
129 |     // 获取分类歌单
130 |     highCate () {
131 |       this.$http.get('/top/playlist?limit=20').then(data => {
132 |         this.currentPage = 1
133 |         this.total = data.total
134 |         this.songMenu = data.playlists
135 |         this.cateName = '全部歌单'
136 |         this.popovervisible = false
137 |         this.getHighQuality('全部')
138 |       })
139 |     },
140 |     getHighQuality (cat) {
141 |       this.$http.get(`/top/playlist/highquality?cat=${cat}&&limit=1`).then(data => {
142 |         if (Object.keys(data.playlists).length !== 0) {
143 |           this.highqualityList = data.playlists
144 |         } else {
145 |           this.highqualityList = []
146 |         }
147 |       })
148 |     },
149 |     // 根据cat值，来获取对应歌单
150 |     cate (cat, offset) {
151 |       let info = ''
152 |       if (offset !== undefined) {
153 |         info = `/top/playlist?cat=${cat}&limit=20&offset=${20 * (offset - 1)}`
154 |       } else {
155 |         info = `/top/playlist?cat=${cat}&limit=20`
156 |         this.currentPage = 1
157 |       }
158 |       this.$http.get(info).then(data => {
159 |         this.total = data.total
160 |         this.songMenu = data.playlists
161 |         this.popovervisible = false
162 |         this.cateName = cat
163 |       })
164 |       this.getHighQuality(cat)
165 |     },
166 |     // 根据歌单的id，去往歌单详细信息页面
167 |     songsDetail (id) {
168 |       this.$router.push({
169 |         path: '/songMenuDetail',
170 |         query: {
171 |           id
172 |         }
173 |       })
174 |     },
175 |     // 上一页分页
176 |     pre (value) {
177 |       this.cate(this.cateName, value)
178 |     },
179 |     // 下一页分页
180 |     next (value) {
181 |       this.cate(this.cateName, value)
182 |     },
183 |     // 当前分页
184 |     current (value) {
185 |       this.cate(this.cateName, value)
186 |     },
187 |     goHighQuality () {
188 |       this.$router.push({
189 |         path: '/highQuality',
190 |         query: {
191 |           name: this.cateName
192 |         }
193 |       })
194 |     }
195 |   },
196 |   computed: {
197 |     reduction () {
198 |       const list = [0, 1, 2, 3, 4]
199 |       const cateList = list.map((value) => {
200 |         const cate = this.sub.filter((n) => {
201 |           return n.category === value
202 |         })
203 |         return cate
204 |       })
205 |       return cateList
206 |     }
207 |   }
208 | }
209 | </script>
210 | 
211 | <style lang="stylus" scoped>
212 |   .el-row
213 |     margin 10px
214 |   .category
215 |     font-size 18px
216 |     i
217 |       margin 0 5px
218 |   .category-item
219 |     display flex
220 |     flex-wrap wrap
221 |     margin-right 55px
222 |   .category-item-item
223 |     cursor pointer
224 |     position relative
225 |     margin 3px 0
226 |     font-size 14px
227 |     line-height 18px
228 |     left 80px
229 |     top -25px
230 |   .category-item-item:hover
231 |     color red
232 |   .el-pagination
233 |     display flex
234 |     justify-content center
235 |     position relative
236 |     margin-top 10px
237 |   .link
238 |     display inline-block
239 |     float right
240 |   .header
241 |     cursor pointer
242 |     background-color #131313
243 |     margin 15px
244 |     position relative
245 |     img
246 |       width 150px
247 |       height 150px
248 |       border-radius 20px
249 |     .name
250 |       position absolute
251 |       top 70px
252 |       left 170px
253 |     .writer
254 |       position absolute
255 |       left 170px
256 |       top 100px
257 |       font-size 14px
258 |       color #888888
259 |     button
260 |       cursor pointer
261 |       width 110px
262 |       position absolute
263 |       left 170px
264 |       top 30px
265 |       border 1px solid #ffaa00
266 |       color #ffaa00
267 |       background-color transparent
268 |       border-radius 14px
269 |       padding 5px
270 |   .button
271 |     margin-left 10px
272 |     border-radius 10px
273 |     background-color black
274 |     color #cdc9c9
275 |     padding 5px 15px
276 |     border 1px solid #888888
277 |   .cate
278 |     margin 10px
279 |     border-radius 10px
280 |     background-color black
281 |     color #cdc9c9
282 |     padding 2px 15px
283 |     border 1px solid #888888
284 | </style>
285 | 


--------------------------------------------------------------------------------
/src/views/singer/singerInformation/singerInformation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <el-main>
  5 |         <div class="header">{{artist.name}}</div>
  6 |         <div class="img">
  7 |           <img :src="artist.picUrl" alt="">
  8 |           <el-button v-if="collected===true" size="mini" type="danger" icon="el-icon-folder-add" @click="collect(2)">
  9 |             已收藏
 10 |           </el-button>
 11 |           <el-button  v-else size="mini" type="danger" icon="el-icon-folder-add" plain @click="collect(1)">
 12 |             收藏
 13 |           </el-button>
 14 |         </div>
 15 |         <el-tabs type="border-card" style="background-color: black" :stretch="true" class="tabs">
 16 |           <el-tab-pane label="热门作品">
 17 |             <song-table :songs="hotSongs"></song-table>
 18 |           </el-tab-pane>
 19 |           <el-tab-pane label="所有专辑">
 20 |             <div class="grid-4">
 21 |               <template v-for="(item, index) in album">
 22 |                 <album-outline :key="index" length="150px" height="150px">
 23 |                   <template v-slot:img>
 24 |                     <img :src="item.picUrl" alt="" @click="goAlbum(item.id)">
 25 |                   </template>
 26 |                   <template v-slot:sentence>
 27 |                     <div>{{item.name}}</div>
 28 |                   </template>
 29 |                 </album-outline>
 30 |               </template>
 31 |             </div>
 32 |           </el-tab-pane>
 33 |           <el-tab-pane label="相关mv">
 34 |             <div class="grid-3">
 35 |               <template v-for="(item, index) in mv">
 36 |                 <album-outline :key="index" length="250px" height="140px">
 37 |                   <template v-slot:img>
 38 |                     <img :src="item.imgurl16v9" alt="" @click="goMv(item.id, item.type)">
 39 |                   </template>
 40 |                   <template v-slot:sentence>
 41 |                     <div>{{item.name}}</div>
 42 |                   </template>
 43 |                 </album-outline>
 44 |               </template>
 45 |             </div>
 46 |           </el-tab-pane>
 47 |           <el-tab-pane label="艺人介绍">
 48 |             <div class="header">
 49 |               <el-divider direction="vertical"></el-divider>
 50 |               {{artist.name}}简介
 51 |             </div>
 52 |             <div>{{disc.briefDesc}}</div>
 53 |             <template v-for="(item, index) in disc.introduction">
 54 |               <div :key="index">
 55 |                 <div class="header">
 56 |                   <el-divider direction="vertical"></el-divider>
 57 |                   {{item.ti}}
 58 |                 </div>
 59 |                 <div>{{item.txt}}</div>
 60 |               </div>
 61 |             </template>
 62 |           </el-tab-pane>
 63 |           <el-tab-pane label="相似歌手">
 64 |             <div class="header">
 65 |               <div class="grid-5" v-if="Object.keys(simArtists).length !== 0">
 66 |                 <template v-for="(item, index) in simArtists">
 67 |                   <singer-outline :key="index" length="130px" height="130px">
 68 |                     <template v-slot:img>
 69 |                       <img :src="item.img1v1Url" alt="" @click="goSinger(item.id)">
 70 |                     </template>
 71 |                     <template v-slot:sentence>
 72 |                       <div>{{item.name}}</div>
 73 |                     </template>
 74 |                   </singer-outline>
 75 |                 </template>
 76 |               </div>
 77 |               <div v-else class="center">暂无相似歌手</div>
 78 |             </div>
 79 |           </el-tab-pane>
 80 |         </el-tabs>
 81 |       </el-main>
 82 |     </el-container>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | import albumOutline from '../../../components/songOutline /albumOutline'
 88 | import singerOutline from '../../../components/songOutline /singerOutline'
 89 | import songTable from '../../../components/songTable/songTable'
 90 | export default {
 91 |   name: 'singerInformation',
 92 |   components: {
 93 |     songTable,
 94 |     singerOutline,
 95 |     albumOutline
 96 |   },
 97 |   created () {
 98 |     this.goSinger(this.sid)
 99 |     this.$store.commit('editActiveName', 'singer')
100 |   },
101 |   data () {
102 |     return {
103 |       // 歌手信息
104 |       artist: {},
105 |       // 歌手的热门歌曲
106 |       hotSongs: [],
107 |       // 歌手专辑
108 |       album: {},
109 |       // 歌手MV
110 |       mv: {},
111 |       // 歌手描述信息
112 |       disc: {
113 |         briefDesc: '',
114 |         introduction: {}
115 |       },
116 |       // 相似歌手
117 |       simArtists: {},
118 |       collected: false,
119 |       // 当前歌手id
120 |       currentId: 0
121 |     }
122 |   },
123 |   methods: {
124 |     // 获取歌手信息
125 |     getSingerInformation (id) {
126 |       this.$http.get(`/artists?id=${id}`).then(data => {
127 |         this.artist = data.artist
128 |         this.hotSongs = data.hotSongs
129 |       })
130 |     },
131 |     // 获取专辑数据
132 |     getAlbum (id) {
133 |       this.$http.get(`/artist/album?id=${id}`).then(data => {
134 |         this.album = data.hotAlbums
135 |       })
136 |     },
137 |     // 获取mv数据
138 |     getMv (id) {
139 |       this.$http.get(`/artist/mv?id=${id}`).then(data => {
140 |         this.mv = data.mvs
141 |       })
142 |     },
143 |     // 获取歌手描述信息
144 |     getDesc (id) {
145 |       this.$http.get(`/artist/desc?id=${id}`).then(data => {
146 |         console.log(data)
147 |         this.disc.briefDesc = data.briefDesc
148 |         this.disc.introduction = data.introduction
149 |       })
150 |     },
151 |     // 获得相似的歌手
152 |     getSimSinger (id) {
153 |       this.$http.get(`/simi/artist?id=${id}`).then(data => {
154 |         this.simArtists = data.artists.slice(0, 6)
155 |       })
156 |     },
157 |     // 点击相似歌手，数据跟着变化
158 |     goSinger (id) {
159 |       this.currentId = id
160 |       this.getSimSinger(id)
161 |       this.getSingerInformation(id)
162 |       this.getAlbum(id)
163 |       this.getMv(id)
164 |       this.getDesc(id)
165 |       if (this.accountId !== null) {
166 |         this.getCollectedValue(id)
167 |       }
168 |     },
169 |     // 判断是否收藏该歌手
170 |     getCollectedValue (id) {
171 |       this.collected = false
172 |       this.$http.get(`/artist/sublist?uid=${this.accountId}`).then(data => {
173 |         for (const key of data.data) {
174 |           if (Number(id) === key.id) {
175 |             this.collected = true
176 |           }
177 |         }
178 |       })
179 |     },
180 |     collect (value) {
181 |       if (this.accountId !== null) {
182 |         this.$http.get(`/artist/sub?t=${value}&id=${this.currentId}`).then(data => {
183 |           if (data.code === 200) {
184 |             if (value === 1) {
185 |               this.collected = true
186 |             } else {
187 |               this.collected = false
188 |             }
189 |           }
190 |         })
191 |       } else {
192 |         this.$message.error('请登录')
193 |       }
194 |     },
195 |     // 去往专辑页面
196 |     goAlbum (id) {
197 |       this.$router.push({
198 |         path: '/album',
199 |         query: {
200 |           id
201 |         }
202 |       })
203 |     },
204 |     // 去往mv页面
205 |     goMv (id, type) {
206 |       if (type === 1) {
207 |         this.$router.push({
208 |           path: '/videos',
209 |           query: {
210 |             id,
211 |             type
212 |           }
213 |         })
214 |       } else {
215 |         this.$router.push({
216 |           path: '/mv',
217 |           query: {
218 |             id,
219 |             type
220 |           }
221 |         })
222 |       }
223 |     }
224 |   },
225 |   computed: {
226 |     // 对歌手id进行赋值
227 |     sid () {
228 |       return this.$route.params.sid
229 |     },
230 |     accountId () {
231 |       return this.$store.state.accountId
232 |     }
233 |   }
234 | }
235 | </script>
236 | 
237 | <style lang="stylus" scoped>
238 |   color=#353535
239 |   .el-divider
240 |     width 2px
241 |   .el-tabs
242 |     margin 0 20px
243 |   .img
244 |     position relative
245 |     margin 0 20px
246 |     height 400px
247 |     overflow hidden
248 |     img
249 |       bottom 120px
250 |       display block
251 |       position relative
252 |       height auto
253 |   .header
254 |     font-size 20px
255 |     margin-left 20px
256 |     +div
257 |       margin 10px 30px
258 |       font-size 14px
259 |       color #909399
260 |       text-indent 2em
261 |   .center
262 |     margin 10px
263 |     color #888888
264 |   .el-button
265 |     width 80px
266 |     position absolute
267 |     top 360px
268 |     left 740px
269 |   .grid-5
270 |     img
271 |       position static
272 | </style>
273 | 


--------------------------------------------------------------------------------
/src/views/mv/videos.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <el-main>
  5 |         <div class="header">
  6 |           <span class="videoName">{{videoInf.title}}</span>
  7 |           <span class="singers">
  8 |             <span>by</span>
  9 |               <span>{{videoInf.creator.nickname}}</span>
 10 |             </span>
 11 |           <span class="btn-group">
 12 |             <i v-if="collected===false" class="el-icon-star-off" @click="collect(1)"><span>收藏</span></i>
 13 |             <i v-else class="el-icon-star-on" @click="collect(2)"><span>已收藏</span></i>
 14 |           </span>
 15 |         </div>
 16 |         <div class="video">
 17 |           <i class="el-icon-video-play" v-if="playIf===false"></i>
 18 |           <video ref="video" :src="videoUrl" controls @play="play" @pause="pause" @ended="pause"></video>
 19 |         </div>
 20 |         <div class="comments">
 21 |           <div class="all">全部评论 <span>评论数量<span>{{videoInf.commentCount}}</span></span></div>
 22 |           <div>
 23 |             <template v-for="item in videoComments">
 24 |               <div :key="item.commentId">
 25 |                 <div class="simLine"></div>
 26 |                 <comments-table :comment="item" width="530px"></comments-table>
 27 |               </div>
 28 |             </template>
 29 |           </div>
 30 |           <el-pagination
 31 |             v-if="total/5>1"
 32 |             background
 33 |             layout="prev, pager, next"
 34 |             :page-size="5"
 35 |             :total="total"
 36 |             @prev-click="pre"
 37 |             @next-click="next"
 38 |             @current-change="current"
 39 |             :current-page.sync="currentPage">
 40 |           </el-pagination>
 41 |         </div>
 42 |       </el-main>
 43 |       <el-aside width="300px">
 44 |         <div class="simiHeader">视频简介</div>
 45 |         <div class="line"></div>
 46 |         <div class="word">发布时间：{{publishTime}}</div>
 47 |         <div class="word">播放次数：{{videoInf.playTime}}次</div>
 48 |         <div class="simiHeader">相似视频</div>
 49 |         <div class="line"></div>
 50 |         <div v-for="(item, index) in relateVideos" :key="index" class="sim"  @click="goVideoDetail(item.vid, item.type)">
 51 |           <img :src="item.coverUrl" alt="">
 52 |           <div>
 53 |             <span>{{item.title}}</span><br>
 54 |             <span>by{{item.creator[0].userName}}</span>
 55 |           </div>
 56 |         </div>
 57 |       </el-aside>
 58 |     </el-container>
 59 |   </div>
 60 | </template>
 61 | 
 62 | <script>
 63 | import commentsTable from '../../components/commentsTable/commentsTable'
 64 | export default {
 65 |   name: 'videos',
 66 |   components: {
 67 |     commentsTable
 68 |   },
 69 |   created () {
 70 |     if (this.$store.state.playIf === true) {
 71 |       this.pauseMusic()
 72 |     }
 73 |     this.goVideoDetail(this.id, this.type)
 74 |   },
 75 |   data () {
 76 |     return {
 77 |       videoInf: {
 78 |         creator: {}
 79 |       },
 80 |       videoUrl: '',
 81 |       videoComments: [],
 82 |       total: 0,
 83 |       currentPage: 1,
 84 |       collected: false,
 85 |       playIf: false,
 86 |       relateVideos: []
 87 |     }
 88 |   },
 89 |   methods: {
 90 |     // 获取视频信息
 91 |     goVideoDetail (id, type) {
 92 |       if (type === 1) {
 93 |         this.getVideoInf(id)
 94 |         this.getVideoAdd(id)
 95 |         this.getVideoComments(id)
 96 |         this.getRelatedMv(id)
 97 |         if (this.accountId !== null) {
 98 |           this.getCollectedValue(id)
 99 |         }
100 |       } else {
101 |         this.$router.push({
102 |           path: '/mv',
103 |           query: {
104 |             id,
105 |             type
106 |           }
107 |         })
108 |       }
109 |     },
110 |     getVideoInf (id) {
111 |       this.$http.get(`/video/detail?id=${id}`).then(data => {
112 |         this.videoInf = data.data
113 |       })
114 |     },
115 |     // 获取视频地址
116 |     getVideoAdd (id) {
117 |       this.$http.get(`/video/url?id=${id}`).then(data => {
118 |         this.videoUrl = data.urls[0].url
119 |       }).catch(() => {
120 |       })
121 |     },
122 |     // 获取视频评论信息
123 |     getVideoComments (id) {
124 |       this.$http.get(`/comment/video?id=${id}&limit=5`).then(data => {
125 |         this.videoComments = data.comments
126 |         this.total = data.total
127 |       })
128 |     },
129 |     // 上一页评论
130 |     pre (value) {
131 |       this.getnextComments(value)
132 |     },
133 |     // 下一页评论
134 |     next (value) {
135 |       this.getnextComments(value)
136 |     },
137 |     // 当前评论
138 |     current (value) {
139 |       this.getnextComments(value)
140 |     },
141 |     collect (value) {
142 |       if (this.accountId !== null) {
143 |         this.$http.get(`/video/sub?t=${value}&id=${this.id}`).then(data => {
144 |           if (data.code === 200) {
145 |             if (value === 1) {
146 |               this.$message({
147 |                 message: '成功收藏该排行榜歌单',
148 |                 type: 'success'
149 |               })
150 |               this.collected = true
151 |             } else {
152 |               this.$message({
153 |                 message: '取消收藏该排行榜歌单',
154 |                 type: 'warning'
155 |               })
156 |               this.collected = false
157 |             }
158 |           }
159 |         })
160 |       } else {
161 |         this.$message.error('请登录')
162 |       }
163 |     },
164 |     getnextComments (value) {
165 |       this.$http.get(`/comment/video?id=${this.id}&limit=5&offset=${(value - 1) * 5}`).then(data => {
166 |         this.videoComments = data.comments
167 |       })
168 |     },
169 |     pauseMusic () {
170 |       this.$store.commit('pauseSongs')
171 |     },
172 |     play () {
173 |       this.playIf = true
174 |     },
175 |     pause () {
176 |       this.playIf = false
177 |     },
178 |     getRelatedMv (id) {
179 |       this.$http.get(`/related/allvideo?id=${id}`).then(data => {
180 |         this.relateVideos = data.data
181 |       })
182 |     },
183 |     getCollectedValue (id) {
184 |       this.collected = false
185 |       this.$http.get(`/mv/sublist?uid=${this.accountId}`).then(data => {
186 |         for (const key of data.data) {
187 |           if (id === key.vid) {
188 |             this.collected = true
189 |           }
190 |         }
191 |       })
192 |     }
193 |   },
194 |   computed: {
195 |     id () {
196 |       return this.$route.query.id
197 |     },
198 |     type () {
199 |       return this.$route.query.type
200 |     },
201 |     publishTime () {
202 |       const time = new Date()
203 |       time.setTime(this.videoInf.publishTime)
204 |       return time.toLocaleDateString()
205 |     },
206 |     accountId () {
207 |       return this.$store.state.accountId
208 |     }
209 |   }
210 | }
211 | </script>
212 | 
213 | <style lang="stylus" scoped>
214 |   .el-pagination
215 |     display flex
216 |     justify-content center
217 |   .comments
218 |     margin auto
219 |     margin-top 30px
220 |     width 92%
221 |     .all
222 |       margin-bottom 10px
223 |       margin-left 10px
224 |       span
225 |         margin-right 10px
226 |         float right
227 |         font-size 10px
228 |         color #888888
229 |         span
230 |           color aquamarine
231 |   .video
232 |     margin 10px
233 |     width 100%
234 |     display flex
235 |     justify-content center
236 |     align-items center
237 |     video
238 |       width 92%
239 |     i
240 |       font-size 80px
241 |       position absolute
242 |   .comments
243 |     margin-top 30px
244 |     .all
245 |       margin-bottom 10px
246 |       margin-left 10px
247 |       span
248 |         margin-right 10px
249 |         float right
250 |         font-size 10px
251 |         color #888888
252 |         span
253 |           margin-left 5px
254 |           color aquamarine
255 |   .header
256 |     margin 20px
257 |     .videoName
258 |       font-size 23px
259 |       margin-right 20px
260 |     .singers
261 |       font-size 10px
262 |       color aquamarine
263 |       :first-child
264 |         color white
265 |         margin-right 5px
266 |       span:hover
267 |         text-decoration underline
268 |         cursor pointer
269 |   .btn-group
270 |     margin-top 10px
271 |     margin-bottom 5px
272 |     float right
273 |     font-size 13px
274 |   .simiHeader
275 |     margin-top 80px
276 |     margin-bottom 10px
277 |   .word
278 |     width 170px
279 |     font-size 12px
280 |     color #888888
281 |     margin-top 5px
282 |   .sim
283 |     margin 10px 10px 0 10px
284 |     height 65px
285 |     font-size 14px
286 |     img
287 |       width 90px
288 |       height auto
289 |     div
290 |       position relative
291 |       left 100px
292 |       top -60px
293 |       width 180px
294 |       cursor pointer
295 |       span
296 |         display inline-block
297 |         width 180px
298 |         overflow hidden
299 |         text-overflow ellipsis
300 |         white-space nowrap
301 |         ~span
302 |           font-size 12px
303 |           color #888888
304 |   .sim:hover
305 |     img
306 |       width 100px
307 |       height auto
308 |     div
309 |       left 110px
310 | </style>
311 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import axios from 'axios'
  4 | 
  5 | Vue.use(Vuex)
  6 | 
  7 | export default new Vuex.Store({
  8 |   state: {
  9 |     // 当前播放音乐的地址，图片，歌曲名，歌手，歌词，在歌单里的位置信息
 10 |     playSong: {
 11 |       url: window.sessionStorage.getItem('url'),
 12 |       img: window.sessionStorage.getItem('img'),
 13 |       name: window.sessionStorage.getItem('name'),
 14 |       singer: window.sessionStorage.getItem('singer'),
 15 |       lyric: JSON.parse(window.sessionStorage.getItem('lyric')),
 16 |       num: window.sessionStorage.getItem('num')
 17 |     },
 18 |     // 音乐是否处于播放状态，决定小图标该显示哪一个
 19 |     playIf: false,
 20 |     // 获取的audio dom 元素
 21 |     audio: {},
 22 |     // 记录audio的状态，id值加一代表处于暂停状态
 23 |     active: window.sessionStorage.getItem('active') + 1,
 24 |     // 元总播放时长
 25 |     metaDuration: 0,
 26 |     //  元已经播放的时长
 27 |     metaCurrentTime: 0,
 28 |     // 菜单应该选到哪里
 29 |     activeName: '',
 30 |     // 歌曲列表
 31 |     songs: JSON.parse(window.sessionStorage.getItem('songs')),
 32 |     // 总歌曲数
 33 |     total: window.sessionStorage.getItem('total'),
 34 |     // songstable还是songs
 35 |     tableName: window.sessionStorage.getItem('tableName'),
 36 |     // 用户id，看是否存在用户id，判断用户是否登录
 37 |     accountId: window.localStorage.getItem('accountId'),
 38 |     // 用户的歌单id，用于添加/取消收藏歌曲
 39 |     songMenuId: window.localStorage.getItem('songMenuId'),
 40 |     checkFalse: true,
 41 |     memberSong: false
 42 |   },
 43 |   getters: {
 44 |     // 播放进度
 45 |     percentage (state) {
 46 |       if (state.metaDuration === 0) {
 47 |         return 0
 48 |       }
 49 |       return Math.floor(state.metaCurrentTime / state.metaDuration * 100)
 50 |     },
 51 |     // 播放总时长分钟
 52 |     duration (state) {
 53 |       const double = function (num) {
 54 |         if (num.toString().length !== 2) {
 55 |           if (num === 0) {
 56 |             return '00'
 57 |           }
 58 |           return '0' + num
 59 |         }
 60 |         return num
 61 |       }
 62 |       return `${double(Math.floor(state.metaDuration / 60))}:${double(Math.floor(state.metaDuration % 60))}`
 63 |     },
 64 |     // 已经播放的分钟
 65 |     currentTime (state) {
 66 |       const double = function (num) {
 67 |         if (num.toString().length !== 2) {
 68 |           if (num === 0) {
 69 |             return '00'
 70 |           }
 71 |           return '0' + num
 72 |         }
 73 |         return num
 74 |       }
 75 |       return `${double(Math.floor(state.metaCurrentTime / 60))}:${double(Math.floor(state.metaCurrentTime % 60))}`
 76 |     }
 77 |   },
 78 |   mutations: {
 79 |     // 提交当前播放音乐的地址，图片，歌曲名，歌手，歌词，在歌单里的位置信息并存在session里面
 80 |     playUrl (state, payload) {
 81 |       state.playSong.url = payload.url
 82 |       state.playSong.img = payload.img
 83 |       state.playSong.name = payload.name
 84 |       state.playSong.singer = payload.singer
 85 |       state.playSong.lyric = payload.lyric
 86 |       state.playSong.num = payload.num
 87 |       state.playIf = true
 88 |       window.sessionStorage.setItem('url', payload.url)
 89 |       window.sessionStorage.setItem('img', payload.img)
 90 |       window.sessionStorage.setItem('name', payload.name)
 91 |       window.sessionStorage.setItem('singer', payload.singer)
 92 |       window.sessionStorage.setItem('lyric', JSON.stringify(payload.lyric))
 93 |       window.sessionStorage.setItem('num', payload.num)
 94 |     },
 95 |     // 一首音乐结束操作
 96 |     ended (state, num) {
 97 |       // 让musicPlayer里面的播放标签变为停止标签
 98 |       if (state.playSong.num === state.total - 1) {
 99 |         state.playSong.num = 0
100 |       } else {
101 |         state.playSong.num = num + 1
102 |       }
103 |       state.playIf = false
104 |       state.active = 0
105 |     },
106 |     // 得到元总时长
107 |     getDuration (state, audio) {
108 |       state.metaDuration = audio.duration
109 |       state.metaCurrentTime = audio.currentTime
110 |       state.audio = audio
111 |     },
112 |     // 得到元已经播放的时间
113 |     getCurrentTime (state) {
114 |       state.metaCurrentTime = state.audio.currentTime
115 |     },
116 |     // 暂停音乐，songTable
117 |     pauseMusic (state) {
118 |       state.playIf = false
119 |       state.audio.pause()
120 |     },
121 |     // 放音乐，songTable
122 |     playMusic (state) {
123 |       if (state.playSong !== '') {
124 |         state.audio.play()
125 |         state.playIf = true
126 |       }
127 |     },
128 |     // 放音乐。musicPlayer
129 |     playSongs (state) {
130 |       if (state.playUrl !== '') {
131 |         console.log(state.active)
132 |         state.audio.play()
133 |         state.playIf = true
134 |         state.active = state.active - 1
135 |       }
136 |     },
137 |     // 暂停音乐，musicPlayer
138 |     pauseSongs (state) {
139 |       state.playIf = false
140 |       state.audio.pause()
141 |       console.log(state.active)
142 |       state.active = state.active + 1
143 |     },
144 |     // 通过控制active，来记录audio状态
145 |     editActive (state, num) {
146 |       state.active = num
147 |     },
148 |     // 修改活跃主菜单的名称
149 |     editActiveName (state, name) {
150 |       state.activeName = name
151 |     },
152 |     // 得到一个歌单的总的歌曲数并存在session里
153 |     getTotal (state, total) {
154 |       window.sessionStorage.setItem('total', total)
155 |       state.total = total
156 |     },
157 |     // 上一首播放
158 |     editPreNum (state) {
159 |       if (state.playSong.num === 0) {
160 |         state.playSong.num = state.total - 1
161 |       } else {
162 |         state.playSong.num--
163 |       }
164 |     },
165 |     // 下一首播放
166 |     editNextNum (state) {
167 |       if (state.playSong.num === state.total - 1) {
168 |         state.playSong.num = 0
169 |       } else {
170 |         state.playSong.num++
171 |       }
172 |     },
173 |     // 得到歌单的总歌曲信息并存在session里
174 |     getSongs (state, songs) {
175 |       window.sessionStorage.setItem('songs', JSON.stringify(songs))
176 |       state.songs = songs
177 |       // this.play(0)
178 |     },
179 |     // 修改是哪一种类型的歌曲列表
180 |     editName (state, name) {
181 |       state.tableName = name
182 |     },
183 |     // 得到用户id
184 |     getAccountId (state, value) {
185 |       state.accountId = value
186 |       window.localStorage.setItem('accountId', value)
187 |     },
188 |     // 得到用户歌单id
189 |     getSongMenuId (state, value) {
190 |       state.songMenuId = value
191 |       window.localStorage.setItem('songMenuId', value)
192 |     },
193 |     editCheckFalse (state, value) {
194 |       state.checkFalse = value
195 |     },
196 |     editMemberSong (state, value) {
197 |       state.memberSong = value
198 |     },
199 |     addSongs (state, value) {
200 |       window.sessionStorage.setItem('total', state.total + 1)
201 |       state.total = state.total + 1
202 |       state.songs.push(value)
203 |       console.log(state.songs)
204 |     }
205 |   },
206 |   actions: {
207 |     play (context, payload) {
208 |       context.commit('editCheckFalse', true)
209 |       context.commit('editMemberSong', false)
210 |       console.log(context.state.songs[payload.num])
211 |       axios.get(`/check/music?id=${context.state.songs[payload.num].id}`).then(() => {
212 |         axios.all([axios.get(`/song/url?id=${context.state.songs[payload.num].id}`), axios.get(`/lyric?id=${context.state.songs[payload.num].id}`)])
213 |           .then(axios.spread((songUrl, lyric) => {
214 |             if (songUrl.data[0].url !== null) {
215 |               window.sessionStorage.setItem('active', context.state.songs[payload.num].id)
216 |               context.commit('editActive', context.state.songs[payload.num].id)
217 |               context.commit('editName', payload.name)
218 |               window.sessionStorage.setItem('tableName', payload.name)
219 |               if (payload.name === 'songs') {
220 |                 context.commit('playUrl', {
221 |                   url: songUrl.data[0].url,
222 |                   img: context.state.songs[payload.num].artists[0].img1v1Url,
223 |                   name: context.state.songs[payload.num].name,
224 |                   singer: context.state.songs[payload.num].artists[0].name,
225 |                   lyric: lyric,
226 |                   num: payload.num
227 |                 })
228 |               } else if (payload.name === 'songTable') {
229 |                 context.commit('playUrl', {
230 |                   url: songUrl.data[0].url,
231 |                   img: context.state.songs[payload.num].al.picUrl,
232 |                   name: context.state.songs[payload.num].name,
233 |                   singer: context.state.songs[payload.num].al.name,
234 |                   lyric: lyric,
235 |                   num: payload.num
236 |                 })
237 |               } else {
238 |                 context.commit('playUrl', {
239 |                   url: songUrl.data[0].url,
240 |                   img: context.state.songs[payload.num].album.picUrl,
241 |                   name: context.state.songs[payload.num].name,
242 |                   // singer: context.state.songs[payload.num].al[0].name,
243 |                   lyric: lyric,
244 |                   num: payload.num
245 |                 })
246 |               }
247 |             } else {
248 |               context.commit('editMemberSong', true)
249 |             }
250 |           }))
251 |       }).catch(() => {
252 |         context.commit('editCheckFalse', false)
253 |       })
254 |     }
255 |   },
256 |   modules: {
257 |   }
258 | })
259 | 


--------------------------------------------------------------------------------
/src/views/mv/mv.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <el-main>
  5 |         <div class="header">
  6 |           <span class="mv">MV</span>
  7 |           <span class="mvName">{{mvInf.name}}</span>
  8 |           <span class="singers">
  9 |             <span>by</span>
 10 |           <template v-for="(items, index) in mvInf.artists">
 11 |             <span :key="items.id" v-if="index===0" @click="goSinger(items.id)">{{items.name}}</span>
 12 |             <span :key="items.id" v-else @click="goSinger(items.id)">/{{items.name}}</span>
 13 |           </template>
 14 |             </span>
 15 |           <span class="btn-group">
 16 |             <i v-if="collected===false" class="el-icon-star-off" @click="collect(1)"><span>收藏</span></i>
 17 |             <i v-else class="el-icon-star-on" @click="collect(2)"><span>已收藏</span></i>
 18 |           </span>
 19 |         </div>
 20 |         <div class="video">
 21 | <!--          <i class="el-icon-video-pause" v-if="playIf===true"></i>-->
 22 |           <i class="el-icon-video-play" v-if="playIf===false"></i>
 23 |           <video ref="video" :src="mvUrl" controls @play="play" @pause="pause" @ended="pause"></video>
 24 |         </div>
 25 |         <div class="comments">
 26 |           <div class="all">全部评论 <span>评论数量<span>{{mvInf.commentCount}}</span></span></div>
 27 |           <div>
 28 |             <template v-for="item in mvComments">
 29 |               <div :key="item.commentId">
 30 |                 <div class="simLine"></div>
 31 |                 <comments-table :comment="item" width="600px"></comments-table>
 32 |               </div>
 33 |             </template>
 34 |           </div>
 35 |           <el-pagination
 36 |             v-if="total/5>1"
 37 |             background
 38 |             layout="prev, pager, next"
 39 |             :page-size="5"
 40 |             :total="total"
 41 |             @prev-click="pre"
 42 |             @next-click="next"
 43 |             @current-change="current"
 44 |             :current-page.sync="currentPage">
 45 |           </el-pagination>
 46 |         </div>
 47 |       </el-main>
 48 |       <el-aside width="300px">
 49 |         <div class="simiHeader">视频简介</div>
 50 |         <div class="line"></div>
 51 |         <div class="word">发布时间：{{mvInf.publishTime}}</div>
 52 |         <div class="word">播放次数：{{mvInf.playCount}}次</div>
 53 |         <div class="simiHeader">相似MV</div>
 54 |         <div class="line"></div>
 55 |         <div v-for="(item, index) in simiMvs" :key="index" class="sim"  @click="goMvDetail(item.id, item.type)">
 56 |           <img :src="item.cover" alt="">
 57 |           <div>
 58 |             <span>{{item.name}}</span><br>
 59 |             <span>by{{item.artistName}}</span>
 60 |           </div>
 61 |         </div>
 62 |       </el-aside>
 63 |     </el-container>
 64 |   </div>
 65 | </template>
 66 | 
 67 | <script>
 68 | import commentsTable from '../../components/commentsTable/commentsTable'
 69 | export default {
 70 |   name: 'mv',
 71 |   components: {
 72 |     commentsTable
 73 |   },
 74 |   created () {
 75 |     this.goMvDetail(this.id, this.type)
 76 |     if (this.$store.state.playIf === true) {
 77 |       this.pauseMusic()
 78 |     }
 79 |   },
 80 |   data () {
 81 |     return {
 82 |       mvInf: {},
 83 |       mvUrl: '',
 84 |       mvComments: [],
 85 |       total: 0,
 86 |       currentPage: 1,
 87 |       collected: false,
 88 |       simiMvs: [],
 89 |       playIf: false
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     // 获取mv信息
 94 |     getMvInf (id) {
 95 |       this.$http.get(`/mv/detail?mvid=${id}`).then(data => {
 96 |         this.mvInf = data.data
 97 |       })
 98 |     },
 99 |     // 获取mv地址
100 |     getMvAdd (id) {
101 |       this.$http.get(`/mv/url?id=${id}`).then(data => {
102 |         this.mvUrl = data.data.url
103 |       })
104 |     },
105 |     // 获取mv评论信息
106 |     getMvComments (id) {
107 |       this.$http.get(`/comment/mv?id=${id}&limit=5`).then(data => {
108 |         this.mvComments = data.comments
109 |         this.total = data.total
110 |       })
111 |     },
112 |     getnextComments (value) {
113 |       this.$http.get(`/comment/mv?id=${this.id}&limit=5&offset=${(value - 1) * 5}`).then(data => {
114 |         this.mvComments = data.comments
115 |       })
116 |     },
117 |     // 上一页评论
118 |     pre (value) {
119 |       this.getnextComments(value)
120 |     },
121 |     // 下一页评论
122 |     next (value) {
123 |       this.getnextComments(value)
124 |     },
125 |     // 当前评论
126 |     current (value) {
127 |       this.getnextComments(value)
128 |     },
129 |     collect (value) {
130 |       if (this.accountId !== null) {
131 |         this.$http.get(`/mv/sub?t=${value}&mvid=${this.id}`).then(data => {
132 |           if (data.code === 200) {
133 |             if (value === 1) {
134 |               this.$message({
135 |                 message: '成功收藏该mv',
136 |                 type: 'success'
137 |               })
138 |               this.collected = true
139 |             } else {
140 |               this.$message({
141 |                 message: '取消收藏该mv',
142 |                 type: 'warning'
143 |               })
144 |               this.collected = false
145 |             }
146 |           }
147 |         })
148 |       } else {
149 |         this.$message.error('请登录')
150 |       }
151 |     },
152 |     goMvDetail (id, type) {
153 |       if (type === 1) {
154 |         this.$router.push({
155 |           path: '/videos',
156 |           query: {
157 |             id,
158 |             type
159 |           }
160 |         })
161 |       } else {
162 |         this.id = id
163 |         this.getMvInf(id)
164 |         this.getMvAdd(id)
165 |         this.getSimiMv(id)
166 |         this.getMvComments(id)
167 |         if (this.accountId !== null) {
168 |           this.getCollectedValue(id)
169 |         }
170 |       }
171 |     },
172 |     // 获取相似mv
173 |     getSimiMv (id) {
174 |       this.$http.get(`/simi/mv?mvid=${id}`).then(data => {
175 |         this.simiMvs = data.mvs
176 |         console.log(data)
177 |       })
178 |     },
179 |     // 判断该歌单是否被收藏
180 |     getCollectedValue (id) {
181 |       this.collected = false
182 |       this.$http.get(`/mv/sublist?uid=${this.accountId}`).then(data => {
183 |         for (const key of data.data) {
184 |           if (id === key.vid) {
185 |             this.collected = true
186 |           }
187 |         }
188 |       })
189 |     },
190 |     // 去往歌手页面
191 |     goSinger (id) {
192 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
193 |     },
194 |     pauseMusic () {
195 |       this.$store.commit('pauseSongs')
196 |     },
197 |     play () {
198 |       this.playIf = true
199 |     },
200 |     pause () {
201 |       this.playIf = false
202 |     }
203 |   },
204 |   computed: {
205 |     id: {
206 |       get () {
207 |         return this.$route.query.id
208 |       },
209 |       set (newValue) {
210 |         return newValue
211 |       }
212 |     },
213 |     type () {
214 |       return this.$route.query.type
215 |     },
216 |     accountId () {
217 |       return this.$store.state.accountId
218 |     }
219 |   }
220 | }
221 | </script>
222 | 
223 | <style lang="stylus" scoped>
224 |   .el-pagination
225 |     display flex
226 |     justify-content center
227 |   .comments
228 |     width 92%
229 |     margin auto
230 |     margin-top 30px
231 |     .all
232 |       margin-bottom 10px
233 |       margin-left 10px
234 |       span
235 |         margin-right 10px
236 |         float right
237 |         font-size 10px
238 |         color #888888
239 |         span
240 |           margin-left 5px
241 |           color aquamarine
242 |   .simiHeader
243 |     margin-top 80px
244 |     margin-bottom 10px
245 |   .word
246 |     width 170px
247 |     font-size 12px
248 |     color #888888
249 |     margin-top 5px
250 |   .sim
251 |     margin 10px 10px 0 0
252 |     height 65px
253 |     font-size 14px
254 |     img
255 |       width 90px
256 |       height auto
257 |     div
258 |       position relative
259 |       left 100px
260 |       top -60px
261 |       width 150px
262 |       cursor pointer
263 |       span
264 |         display inline-block
265 |         width 190px
266 |         overflow hidden
267 |         text-overflow ellipsis
268 |         white-space nowrap
269 |         ~span
270 |           font-size 12px
271 |           color #888888
272 |   .sim:hover
273 |     img
274 |       width 95px
275 |       height auto
276 |     div
277 |       left 110px
278 |   .header
279 |     margin-top 20px
280 |     margin-left 22px
281 |     .mv
282 |       position relative
283 |       margin-right 10px
284 |       top -2px
285 |       font-size 14px
286 |       padding-left 2px
287 |       padding-right 2px
288 |       border 1px solid red
289 |       color antiquewhite
290 |     .mvName
291 |       font-size 23px
292 |       margin-right 20px
293 |     .singers
294 |       font-size 10px
295 |       color aquamarine
296 |       :first-child
297 |         color white
298 |         margin-right 5px
299 |       span:hover
300 |         text-decoration underline
301 |         cursor pointer
302 |   .video
303 |     margin 20px 10px
304 |     width 100%
305 |     display flex
306 |     justify-content center
307 |     align-items center
308 |     video
309 |       width 94%
310 |     i
311 |       font-size 80px
312 |       position absolute
313 |   .btn-group
314 |     margin-bottom 5px
315 |     margin-top 10px
316 |     margin-right 30px
317 |     float right
318 |     font-size 13px
319 | </style>
320 | 


--------------------------------------------------------------------------------
/src/views/album/album.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <!--      主体部分-->
  5 |       <el-main>
  6 |         <!--      主体上面部分-->
  7 |         <div>
  8 |           <img :src="album.blurPicUrl" alt="">
  9 |           <div class="aside">
 10 |             <span class="head"><span>专辑</span><div></div>{{album.name}}</span>
 11 |             <span class="singer" @click="showInformation(album.artist.id)">歌手：<span>{{album.artist.name}}</span></span>
 12 |             <span class="time">发布时间：{{changeTime(album.publishTime)}}</span>
 13 |             <div class="btn-group">
 14 |               <el-button size="mini" type="danger" icon="el-icon-video-play" plain @click="play()">播放</el-button>
 15 |               <i v-if="collected===false" class="el-icon-star-off" @click="collect(1)"><span>收藏</span></i>
 16 |               <i v-else class="el-icon-star-on" @click="collect(2)"><span>已收藏</span></i>
 17 |             </div>
 18 |           </div>
 19 |         </div>
 20 |         <!--      主体下面部分-->
 21 |         <div class="main">
 22 |           <div class="main-title">
 23 |             <span>专辑介绍:</span>
 24 |             <span class="songNum">{{album.description}}</span>
 25 |           </div>
 26 |           <song-table :songs="songs"></song-table>
 27 |         </div>
 28 |         <div class="comments" v-if="Object.keys(comments).length !== 0">
 29 |           <div class="all">全部评论</div>
 30 |           <div>
 31 |             <template v-for="item in comments">
 32 |               <div :key="item.commentId">
 33 |                 <div class="simLine"></div>
 34 |                 <comments-table :comment="item" width="580px"></comments-table>
 35 |               </div>
 36 |             </template>
 37 |           </div>
 38 |           <el-pagination
 39 |             v-if="total/5>1"
 40 |             background
 41 |             layout="prev, pager, next"
 42 |             :page-size="5"
 43 |             :total="total"
 44 |             @prev-click="pre"
 45 |             @next-click="next"
 46 |             @current-change="current"
 47 |             :current-page.sync="currentPage">
 48 |           </el-pagination>
 49 |         </div>
 50 |         <div v-else class="center">暂无评论</div>
 51 |       </el-main>
 52 |       <!--    侧边栏部分-->
 53 |       <el-aside width="220px">
 54 |         <div class="otherHeader">
 55 |           <span>歌手其他专辑</span>
 56 |           <span @click="showInformation(album.artist.id)" class="more">更多</span>
 57 |         </div>
 58 |         <div class="line"></div>
 59 |         <div v-for="(item, index) in otherAlbums" :key="index" class="other"  @click="goAlbum(item.id)">
 60 |           <img :src="item.blurPicUrl" alt="">
 61 |           <div class="word">
 62 |             <span>{{item.name}}</span><br>
 63 |             <span>{{changeTime(item.publishTime)}}</span>
 64 |           </div>
 65 |         </div>
 66 |       </el-aside>
 67 |     </el-container>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import commentsTable from '../../components/commentsTable/commentsTable'
 73 | import songTable from '../../components/songTable/songTable'
 74 | export default {
 75 |   name: 'album',
 76 |   components: {
 77 |     songTable,
 78 |     commentsTable
 79 |   },
 80 |   data () {
 81 |     return {
 82 |       album: {
 83 |         name: '',
 84 |         artist: {}
 85 |       },
 86 |       songs: [],
 87 |       // 评论数据
 88 |       comments: {},
 89 |       // 第一页分页
 90 |       currentPage: 1,
 91 |       // 总的评论数量
 92 |       total: 0,
 93 |       // 是否被收藏
 94 |       collected: false,
 95 |       otherAlbums: []
 96 |     }
 97 |   },
 98 |   created () {
 99 |     this.goAlbum(this.id)
100 |   },
101 |   methods: {
102 |     getAlbumDetail (id) {
103 |       this.id = id
104 |       this.$http.get(`/album?id=${id}`).then(data => {
105 |         this.album = data.album
106 |         this.songs = data.songs
107 |         this.getSingerOtherAlbum(data.album.artist.id)
108 |       })
109 |     },
110 |     collect (value) {
111 |       if (this.accountId !== null) {
112 |         this.$http.get(`/album/sub?t=${value}&id=${this.id}`).then(data => {
113 |           if (data.code === 200) {
114 |             if (value === 1) {
115 |               this.$message({
116 |                 message: '成功收藏专辑',
117 |                 type: 'success'
118 |               })
119 |               this.collected = true
120 |             } else {
121 |               this.$message({
122 |                 message: '取消收藏该专辑',
123 |                 type: 'warning'
124 |               })
125 |               this.collected = false
126 |             }
127 |           }
128 |         })
129 |       } else {
130 |         this.$message.error('请登录')
131 |       }
132 |     },
133 |     // 全部播放时的操作
134 |     play () {
135 |       this.$store.commit('getTotal', this.album.size)
136 |       this.$store.commit('getSongs', this.songs)
137 |       this.$store.dispatch('play', { num: 0, name: 'songTable' })
138 |     },
139 |     getComments (id) {
140 |       return this.$http.get(`/comment/album?id=${id}&limit=5`).then(data => {
141 |         this.total = data.total
142 |         this.currentPage = 1
143 |         this.comments = data.comments
144 |       })
145 |     },
146 |     getNextComments (value) {
147 |       this.$http.get(`/comment/playlist?id=${this.id}&limit=5&offset=${(value - 1) * 5}`).then(data => {
148 |         this.comments = data.comments
149 |       })
150 |     },
151 |     // 上一页评论
152 |     pre (value) {
153 |       this.getNextComments(value)
154 |     },
155 |     // 下一页评论
156 |     next (value) {
157 |       this.getNextComments(value)
158 |     },
159 |     // 当前评论
160 |     current (value) {
161 |       this.getNextComments(value)
162 |     },
163 |     // 获取歌手其他专辑
164 |     getSingerOtherAlbum (id) {
165 |       this.$http.get(`/artist/album?id=${id}&limit=5`).then(data => {
166 |         this.otherAlbums = data.hotAlbums
167 |       })
168 |     },
169 |     changeTime (time) {
170 |       const date = new Date()
171 |       date.setTime(time)
172 |       return date.toLocaleDateString()
173 |     },
174 |     goAlbum (id) {
175 |       this.getAlbumDetail(id)
176 |       this.getComments(id)
177 |       if (this.accountId !== null) {
178 |         this.getCollectedValue(id)
179 |       }
180 |     },
181 |     // 判断该歌单是否被收藏
182 |     getCollectedValue (id) {
183 |       this.collected = false
184 |       this.$http.get(`/album/sublist?uid=${this.accountId}`).then(data => {
185 |         for (const key of data.data) {
186 |           if (Number(id) === key.id) {
187 |             this.collected = true
188 |           }
189 |         }
190 |       })
191 |     },
192 |     // 根据id，去往歌手详细信息页面
193 |     showInformation (id) {
194 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
195 |     }
196 |   },
197 |   computed: {
198 |     id: {
199 |       get () {
200 |         return this.$route.query.id
201 |       },
202 |       set (newValue) {
203 |         return newValue
204 |       }
205 |     },
206 |     accountId () {
207 |       return this.$store.state.accountId
208 |     }
209 |   }
210 | }
211 | </script>
212 | 
213 | <style lang="stylus" scoped>
214 |   img
215 |     width 150px
216 |     height 150px
217 |     border 2px solid color
218 |     margin 3px
219 |     box-shadow 0 0 10 color
220 |   .other
221 |     margin 10px 0 0 0
222 |     height 55px
223 |     font-size 14px
224 |     img
225 |       width 50px
226 |       height 50px
227 |     div
228 |       position relative
229 |       left 60px
230 |       top -60px
231 |       width 160px
232 |       cursor pointer
233 |       span
234 |         display inline-block
235 |         width 160px
236 |         overflow hidden
237 |         text-overflow ellipsis
238 |         white-space nowrap
239 |         ~span
240 |           font-size 12px
241 |           color #888888
242 |   .other:hover
243 |     img
244 |       width 55px
245 |       height 55px
246 |     div
247 |       left 70px
248 |   .otherHeader
249 |     margin-top 80px
250 |     margin-bottom 5px
251 |     .more
252 |       cursor pointer
253 |       font-size 6px
254 |       position relative
255 |       color #888888
256 |       left 10px
257 |    .aside
258 |      position relative
259 |      left 170px
260 |      top -155px
261 |     .head
262 |       position absolute
263 |       font-size 20px
264 |       overflow hidden
265 |       text-overflow ellipsis
266 |       white-space nowrap
267 |       span
268 |         background-color red
269 |         font-size 16px
270 |         padding-left 5px
271 |         padding-right 5px
272 |         +div
273 |           position relative
274 |           top 5px
275 |           width 0
276 |           height 0
277 |           display inline-block
278 |           border 11px solid
279 |           border-color transparent transparent transparent red
280 |     .singer
281 |       cursor pointer
282 |       position absolute
283 |       top 55px
284 |       color #888888
285 |       font-size 12px
286 |       span
287 |         color aquamarine
288 |         font-size 10px
289 |     .time
290 |       font-size 12px
291 |       color #888888
292 |       position absolute
293 |       top 80px
294 |     .btn-group
295 |       display inline
296 |       position absolute
297 |       top 110px
298 |       .el-button
299 |         margin-right 10px
300 |   .el-pagination
301 |     display flex
302 |     justify-content center
303 |   .comments
304 |     margin-top 30px
305 |     .all
306 |       margin-bottom 10px
307 |   .main
308 |     margin-top 10px
309 |     .main-title
310 |       margin-bottom 10px
311 |       .songNum
312 |         font-size 12px
313 |         color #888888
314 |         display -webkit-box
315 |         -webkit-box-orient vertical
316 |         -webkit-line-clamp 2
317 |         overflow hidden
318 |         text-indent 2em
319 | </style>
320 | 


--------------------------------------------------------------------------------
/src/views/songMenu/detail/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <el-container>
  4 |       <el-main>
  5 |         <div class="header">
  6 |           <img :src="songMenuDetail.coverImgUrl" alt="">
  7 |           <span class="head"><span>歌单</span><div></div>{{songMenuDetail.name}}</span>
  8 |           <div class="creator">
  9 |             <img :src="songMenuDetail.creator.avatarUrl" alt="">
 10 |             <span>{{songMenuDetail.creator.nickname}}</span>
 11 |             <span>{{createTime}}创建</span>
 12 |           </div>
 13 |           <div class="button-group">
 14 |             <el-button size="mini" type="danger" icon="el-icon-video-play" plain @click="play()">播放全部</el-button>
 15 |             <i v-if="collected===false" class="el-icon-star-off" @click="collect(1)"><span>收藏</span></i>
 16 |             <i v-else class="el-icon-star-on" @click="collect(2)"><span>已收藏</span></i>
 17 |           </div>
 18 |           <div class="tags">标签:
 19 |             <template v-for="(item, index) in songMenuDetail.tags">
 20 |               <span :key="index">{{item}}</span>
 21 |             </template>
 22 |           </div>
 23 |           <div class="introduce">介绍: {{songMenuDetail.description}}</div>
 24 |         </div>
 25 |         <div class="songHead">歌曲列表
 26 |           <span>{{songMenuDetail.trackCount}}首歌</span>
 27 |           <span>播放：<span>{{songMenuDetail.playCount}}</span><span>次</span></span>
 28 |         </div>
 29 |         <song-table :songs="songMenuDetail.tracks"></song-table>
 30 |         <!--        评论-->
 31 |         <div class="comments">
 32 |           <div class="all">全部评论</div>
 33 |           <div>
 34 |             <template v-for="item in comments">
 35 |               <div :key="item.commentId">
 36 |                 <div class="simLine"></div>
 37 |                 <comments-table :comment="item"></comments-table>
 38 |               </div>
 39 |             </template>
 40 |           </div>
 41 |           <el-pagination
 42 |             v-if="total/5>1"
 43 |             background
 44 |             layout="prev, pager, next"
 45 |             :page-size="5"
 46 |             :total="total"
 47 |             @prev-click="pre"
 48 |             @next-click="next"
 49 |             @current-change="current"
 50 |             :current-page.sync="currentPage">
 51 |           </el-pagination>
 52 |         </div>
 53 |       </el-main>
 54 |       <el-aside width="220px">
 55 |         <div class="simiHeader">相似歌单</div>
 56 |         <div class="line"></div>
 57 |         <div v-for="(item, index) in relateSongMenu" :key="index" class="sim"  @click="goDetail(item.id)">
 58 |           <img :src="item.coverImgUrl" alt="">
 59 |           <div class="word">
 60 |             <span>{{item.name}}</span><br>
 61 |             <span>by {{item.creator.nickname}}</span>
 62 |           </div>
 63 |         </div>
 64 |       </el-aside>
 65 |     </el-container>
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | import commentsTable from '../../../components/commentsTable/commentsTable'
 71 | import songTable from '../../../components/songTable/songTable'
 72 | export default {
 73 |   name: 'detail',
 74 |   components: {
 75 |     songTable,
 76 |     commentsTable
 77 |   },
 78 |   created () {
 79 |     this.$store.commit('editActiveName', 'songMenu')
 80 |     this.goDetail(this.did)
 81 |   },
 82 |   data () {
 83 |     return {
 84 |       // 描述信息
 85 |       songMenuDetail: {
 86 |         creator: {}
 87 |       },
 88 |       // 类似歌单
 89 |       relateSongMenu: {},
 90 |       // 评论数据
 91 |       comments: {},
 92 |       // 当前分页值
 93 |       currentPage: 1,
 94 |       // 当前歌单id
 95 |       currentId: 0,
 96 |       // 总的评论数量
 97 |       total: 0,
 98 |       // 是否一收藏
 99 |       collected: false
100 |     }
101 |   },
102 |   methods: {
103 |     // 根据id获取歌单的详细信息
104 |     getDetail (id) {
105 |       this.$http.get(`/playlist/detail?id=${id}`).then(data => {
106 |         this.currentId = id
107 |         this.songMenuDetail = data.playlist
108 |       })
109 |     },
110 |     // 根据歌单的id获取歌单的相似歌单
111 |     getRelateSongMenu (id) {
112 |       return this.$http.get(`/related/playlist?id=${id}`).then(data => {
113 |         this.relateSongMenu = data.playlists
114 |       })
115 |     },
116 |     // 根据歌单id获取歌单评论
117 |     getComments (id) {
118 |       return this.$http.get(`/comment/playlist?id=${id}&limit=5`).then(data => {
119 |         this.total = data.total
120 |         this.currentPage = 1
121 |         this.comments = data.comments
122 |       })
123 |     },
124 |     goDetail (id) {
125 |       this.getDetail(id)
126 |       this.getRelateSongMenu(id)
127 |       this.getComments(id)
128 |       if (this.accountId !== null) {
129 |         this.getCollectedValue(id)
130 |       }
131 |     },
132 |     getnextComments (value) {
133 |       this.$http.get(`/comment/playlist?id=${this.currentId}&limit=5&offset=${(value - 1) * 5}`).then(data => {
134 |         this.comments = data.comments
135 |       })
136 |     },
137 |     play () {
138 |       this.$store.commit('getTotal', this.songMenuDetail.trackCount)
139 |       this.$store.commit('getSongs', this.songMenuDetail.tracks)
140 |       this.$store.dispatch('play', { num: 0, name: 'songTable' })
141 |     },
142 |     // 上一页分页
143 |     pre (value) {
144 |       this.getnextComments(value)
145 |     },
146 |     // 下一页分页
147 |     next (value) {
148 |       this.getnextComments(value)
149 |     },
150 |     // 当前分页
151 |     current (value) {
152 |       this.getnextComments(value)
153 |     },
154 |     // 收藏该歌单
155 |     collect (value) {
156 |       if (this.accountId !== null) {
157 |         this.$http.get(`/playlist/subscribe?t=${value}&id=${this.currentId}`).then(data => {
158 |           if (data.code === 200) {
159 |             if (value === 1) {
160 |               this.$message({
161 |                 message: '成功收藏该歌单',
162 |                 type: 'success'
163 |               })
164 |               this.collected = true
165 |             } else {
166 |               this.$message({
167 |                 message: '取消收藏该歌单',
168 |                 type: 'warning'
169 |               })
170 |               this.collected = false
171 |             }
172 |           }
173 |         })
174 |       } else {
175 |         this.$message.error('请登录')
176 |       }
177 |     },
178 |     // 判断该歌单是否被收藏
179 |     getCollectedValue (id) {
180 |       this.collected = false
181 |       this.$http.get(`/user/playlist?uid=${this.accountId}`).then(data => {
182 |         for (const key of data.playlist) {
183 |           if (Number(id) === key.id) {
184 |             this.collected = true
185 |           }
186 |         }
187 |       })
188 |     }
189 |   },
190 |   computed: {
191 |     did () {
192 |       return this.$route.query.id
193 |     },
194 |     createTime () {
195 |       const time = new Date()
196 |       time.setTime(this.songMenuDetail.createTime)
197 |       return time.toLocaleDateString()
198 |     },
199 |     accountId () {
200 |       return this.$store.state.accountId
201 |     }
202 |   }
203 | }
204 | </script>
205 | 
206 | <style lang="stylus" scoped>
207 |   .container
208 |     .header
209 |       margin 15px 0
210 |       height 220px
211 |       position relative
212 |       div
213 |         width 450px
214 |       img
215 |         width 200px
216 |         height 200px
217 |         border-radius 20px
218 |       .button-group
219 |         position absolute
220 |         left 230px
221 |         top 90px
222 |       .tags
223 |         position absolute
224 |         left 230px
225 |         font-size 12px
226 |         top 130px
227 |         span
228 |           font-size 10px
229 |           color #434343
230 |           background-color #d8d8d8
231 |           border-radius 5px
232 |           padding 1px 10px 1px 10px
233 |           margin-left 10px
234 |       .introduce
235 |         position absolute
236 |         left 230px
237 |         top 170px
238 |         font-size 12px
239 |         width 440px
240 |          // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
241 |         display -webkit-box
242 |         // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
243 |         -webkit-box-orient vertical
244 |         // 一个块元素显示的文本的行数
245 |         -webkit-line-clamp 2
246 |         overflow hidden
247 |       .creator
248 |         position absolute
249 |         left 230px
250 |         top 40px
251 |         img
252 |           border none
253 |           border-radius 2px
254 |           width 40px
255 |           height 40px
256 |           margin-right 20px
257 |         span
258 |           position relative
259 |           top 7px
260 |           font-size 14px
261 |           vertical-align top
262 |           margin-right 10px
263 |           +span
264 |             color #888888
265 |             font-size 12px
266 |       .head
267 |         position absolute
268 |         left 230px
269 |         font-size 20px
270 |         width 440px
271 |         overflow hidden
272 |         text-overflow ellipsis
273 |         white-space nowrap
274 |         span
275 |           background-color red
276 |           font-size 16px
277 |           padding-left 5px
278 |           padding-right 5px
279 |           +div
280 |             position relative
281 |             top 5px
282 |             width 0
283 |             height 0
284 |             display inline-block
285 |             border 11px solid
286 |             border-color transparent transparent transparent red
287 |   .songHead
288 |     margin-bottom 10px
289 |     font-size 20px
290 |     span
291 |       font-size 12px
292 |       color #888888
293 |       +span
294 |         float right
295 |         :first-child
296 |           color red
297 |           margin-right 5px
298 |   .simiHeader
299 |     margin 80px 0 5px 0
300 |   .word
301 |     width 100px
302 |   .sim
303 |     cursor pointer
304 |     margin 10px 10px 0 0
305 |     height 65px
306 |     font-size 14px
307 |     img
308 |       width 50px
309 |       height 50px
310 |     div
311 |       position relative
312 |       left 60px
313 |       top -50px
314 |       span
315 |         display inline-block
316 |         width 160px
317 |         overflow hidden
318 |         text-overflow ellipsis
319 |         white-space nowrap
320 |         ~span
321 |           font-size 12px
322 |           color #888888
323 |   .sim:hover
324 |     img
325 |       width 52px
326 |       height 52px
327 |     div
328 |       left 70px
329 |   .el-pagination
330 |     display flex
331 |     justify-content center
332 |   i
333 |     margin-left 10px
334 |     span
335 |       font-size 10px
336 |       margin-left 2px
337 |   .comments
338 |     margin-top 20px
339 |     .all
340 |       margin-bottom 10px
341 |   .el-main
342 |     padding 0
343 |   .el-aside
344 |     margin-left 14px
345 | </style>
346 | 


--------------------------------------------------------------------------------
/src/views/myMusic/myMusic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container v-if="accountId!==null">
  4 |       <el-main>
  5 |         <div v-if="singerIf===true">
  6 |           <div>我的歌手</div>
  7 |           <div class="line"></div>
  8 |           <div v-for="(item, index) in singers" :key="index" class="singer"  @click="gosinger(item.id)">
  9 |             <img :src="item.img1v1Url" alt="">
 10 |             <div class="word">
 11 |               <span>{{item.name}}</span><br>
 12 |               <span>{{item.mvSize}}个mv</span>
 13 |               <span>{{item.albumSize}}个mv</span>
 14 |             </div>
 15 |           </div>
 16 |         </div>
 17 |         <div v-else-if="videoIf===true">
 18 |           <div>我的视频</div>
 19 |           <div class="line"></div>
 20 |           <div class="flex">
 21 |             <div v-for="(item, index) in videos" :key="index" class="video" @click="goVideo(item.vid, item.type)">
 22 |               <img :src="item.coverUrl" alt="">
 23 |             </div>
 24 |           </div>
 25 |         </div>
 26 |         <div v-else>
 27 |           <div class="header">
 28 |             <img :src="songMenuDetail.coverImgUrl" alt="">
 29 |             <span class="head"><span>歌单</span><div></div>{{songMenuDetail.name}}</span>
 30 |             <div class="creator">
 31 |               <img :src="songMenuDetail.creator.avatarUrl" alt="">
 32 |               <span>{{songMenuDetail.creator.nickname}}</span>
 33 |               <span>{{createTime}}创建</span>
 34 |             </div>
 35 |             <div class="button-group">
 36 |               <el-button size="mini" type="primary" icon="el-icon-video-play" plain @click="play()">播放全部</el-button>
 37 |               <i v-if="collected===false" class="el-icon-star-off" @click="collect(1)"><span>收藏</span></i>
 38 |               <i v-else class="el-icon-star-on" @click="collect(2)"><span>已收藏</span></i>
 39 |             </div>
 40 |             <div class="tags">标签:
 41 |               <template v-for="(item, index) in songMenuDetail.tags">
 42 |                 <span :key="index">{{item}}</span>
 43 |               </template>
 44 |             </div>
 45 |             <div class="introduce">介绍: {{songMenuDetail.description}}</div>
 46 |           </div>
 47 |           <div class="songHead">歌曲列表
 48 |             <span>{{songMenuDetail.trackCount}}首歌</span>
 49 |             <span>播放：<span>{{songMenuDetail.playCount}}</span><span>次</span></span>
 50 |           </div>
 51 |           <song-table :songs="songMenuDetail.tracks"></song-table>
 52 |           <!--        评论-->
 53 |           <div v-if="Object.keys(comments).length !== 0">
 54 |             <div>全部评论</div>
 55 |             <div>
 56 |               <template v-for="item in comments">
 57 |                 <div :key="item.commentId">
 58 |                   <div class="simLine"></div>
 59 |                   <comments-table :comment="item"></comments-table>
 60 |                 </div>
 61 |               </template>
 62 |             </div>
 63 |             <el-pagination
 64 |               v-if="total/5>1"
 65 |               background
 66 |               layout="prev, pager, next"
 67 |               :page-size="5"
 68 |               :total="total"
 69 |               @prev-click="pre"
 70 |               @next-click="next"
 71 |               @current-change="current"
 72 |               :current-page.sync="currentPage">
 73 |             </el-pagination>
 74 |           </div>
 75 |         </div>
 76 |       </el-main>
 77 |     </el-container>
 78 |     <el-container v-else class="noLogin">
 79 |       <div class="img">
 80 |         <img src="../../assets/cry.png" alt="">
 81 |         <div class="word">您还没有登录哟!</div>
 82 |       </div>
 83 |     </el-container>
 84 |   </div>
 85 | </template>
 86 | 
 87 | <script>
 88 | import commentsTable from '../../components/commentsTable/commentsTable'
 89 | import songTable from '../../components/songTable/songTable'
 90 | export default {
 91 |   name: 'myMusic',
 92 |   components: {
 93 |     songTable,
 94 |     commentsTable
 95 |   },
 96 |   created () {
 97 |     if (this.name === 'singer') {
 98 |       this.getSinger()
 99 |     } else if (this.name === 'video') {
100 |       this.getVideo()
101 |     } else {
102 |       if (this.accountId !== null) {
103 |         this.goDetail(this.name)
104 |       }
105 |     }
106 |     // 判断是否有用户id
107 |   },
108 |   data () {
109 |     return {
110 |       // 收藏歌单的简略信息
111 |       playlists: {},
112 |       // 歌单详细信息
113 |       songMenuDetail: {
114 |         creator: {}
115 |       },
116 |       comments: {},
117 |       // 当前分页位置
118 |       currentPage: 1,
119 |       // 当前的歌单id
120 |       currentId: 0,
121 |       // 总的评论数量
122 |       total: 0,
123 |       // 是否一收藏
124 |       collected: false,
125 |       singerIf: false,
126 |       singers: [],
127 |       videoIf: false,
128 |       videos: []
129 |     }
130 |   },
131 |   methods: {
132 |     getSinger () {
133 |       this.videoIf = false
134 |       this.singerIf = true
135 |       this.$http.get(`/artist/sublist?uid=${this.accountId}`).then(data => {
136 |         this.singers = data.data
137 |       })
138 |     },
139 |     // 根据id获取歌单的详细信息
140 |     getDetail (id) {
141 |       this.singerIf = false
142 |       this.videoIf = false
143 |       this.$http.get(`/playlist/detail?id=${id}`).then(data => {
144 |         this.currentId = id
145 |         this.songMenuDetail = data.playlist
146 |       })
147 |     },
148 |     // 根据歌单id获取歌单评论
149 |     getComments (id) {
150 |       return this.$http.get(`/comment/playlist?id=${id}&limit=5`).then(data => {
151 |         this.total = data.total
152 |         this.currentPage = 1
153 |         this.comments = data.comments
154 |       })
155 |     },
156 |     // 获取歌单信息和评论信息同时判断是否该歌单被收藏
157 |     goDetail (id) {
158 |       this.getDetail(id)
159 |       this.getComments(id)
160 |       this.getCollectedValue(id)
161 |     },
162 |     // 分页的处理函数
163 |     getnextComments (value) {
164 |       this.$http.get(`/comment/playlist?id=${this.currentId}&limit=5&offset=${(value - 1) * 5}`).then(data => {
165 |         this.comments = data.comments
166 |       })
167 |     },
168 |     // 播放音乐
169 |     play () {
170 |       this.$store.commit('getTotal', this.songMenuDetail.trackCount)
171 |       this.$store.commit('getSongs', this.songMenuDetail.tracks)
172 |       this.$store.dispatch('play', { num: 0, name: 'songTable' })
173 |     },
174 |     // 上面五条评论
175 |     pre (value) {
176 |       this.getnextComments(value)
177 |     },
178 |     // 下面五条评论
179 |     next (value) {
180 |       this.getnextComments(value)
181 |     },
182 |     // 当前值的评论
183 |     current (value) {
184 |       this.getnextComments(value)
185 |     },
186 |     // 收藏/取消收藏歌单
187 |     collect (value) {
188 |       this.$http.get(`/playlist/subscribe?t=${value}&id=${this.currentId}`).then(data => {
189 |         if (data.code === 200) {
190 |           if (value === 1) {
191 |             this.collected = true
192 |           } else {
193 |             this.$message({
194 |               message: '您已取消收藏该歌单',
195 |               type: 'warning'
196 |             })
197 |             // this.collected = false
198 |             window.location.reload()
199 |           }
200 |         }
201 |       })
202 |     },
203 |     // 判断是否收藏该歌单
204 |     getCollectedValue (id) {
205 |       this.collected = false
206 |       this.$http.get(`/user/playlist?uid=${this.accountId}`).then(data => {
207 |         for (const key of data.playlist) {
208 |           if (Number(id) === key.id) {
209 |             this.collected = true
210 |           }
211 |         }
212 |       })
213 |     },
214 |     gosinger (id) {
215 |       this.$router.push({ name: 'singerInformation', params: { sid: id } })
216 |     },
217 |     getVideo () {
218 |       this.singerIf = false
219 |       this.videoIf = true
220 |       this.$http.get(`mv/sublist??uid=${this.accountId}`).then(data => {
221 |         this.videos = data.data
222 |         console.log(data.data)
223 |       })
224 |     },
225 |     goVideo (id, type) {
226 |       if (type === 1) {
227 |         this.$router.push({
228 |           path: '/videos',
229 |           query: {
230 |             id,
231 |             type
232 |           }
233 |         })
234 |       } else {
235 |         this.$router.push({
236 |           path: '/mv',
237 |           query: {
238 |             id,
239 |             type
240 |           }
241 |         })
242 |       }
243 |     }
244 |   },
245 |   computed: {
246 |     // 从vuex中得到用户id
247 |     accountId () {
248 |       return this.$store.state.accountId
249 |     },
250 |     // 计算是什么时间创建的该歌单
251 |     createTime () {
252 |       const time = new Date()
253 |       time.setTime(this.songMenuDetail.createTime)
254 |       return time.toLocaleDateString()
255 |     },
256 |     name () {
257 |       return this.$route.query.name
258 |     }
259 |   }
260 | }
261 | </script>
262 | 
263 | <style lang="stylus" scoped>
264 |   .el-container
265 |     .header
266 |       margin 20px 0
267 |       height 220px
268 |       position relative
269 |       div
270 |         width 470px
271 |       img
272 |         width 200px
273 |         height 200px
274 |         border-radius 20px
275 |         border 1px solid red
276 |       .button-group
277 |         position absolute
278 |         left 230px
279 |         top 90px
280 |       .tags
281 |         position absolute
282 |         left 230px
283 |         top 130px
284 |         font-size 12px
285 |         span
286 |           font-size 10px
287 |           color #434343
288 |           background-color #d8d8d8
289 |           border-radius 5px
290 |           padding 1px 10px 1px 10px
291 |           margin-left 10px
292 |       .creator
293 |         position absolute
294 |         left 230px
295 |         top 40px
296 |         img
297 |           border none
298 |           border-radius 2px
299 |           width 40px
300 |           height 40px
301 |           margin-right 20px
302 |         span
303 |           position relative
304 |           top 7px
305 |           font-size 14px
306 |           vertical-align top
307 |           margin-right 10px
308 |           +span
309 |             color #888888
310 |             font-size 12px
311 |       .head
312 |         position absolute
313 |         left 230px
314 |         font-size 20px
315 |         width 470px
316 |         overflow hidden
317 |         text-overflow ellipsis
318 |         white-space nowrap
319 |         span
320 |           background-color red
321 |           font-size 16px
322 |           padding-left 5px
323 |           padding-right 5px
324 |           +div
325 |             position relative
326 |             top 5px
327 |             width 0
328 |             height 0
329 |             display inline-block
330 |             border 11px solid
331 |             border-color transparent transparent transparent red
332 |       .introduce
333 |         font-size 12px
334 |         width 470px
335 |         position absolute
336 |         left 230px
337 |         top 170px
338 |         // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
339 |         display -webkit-box
340 |         // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
341 |         -webkit-box-orient vertical
342 |         // 一个块元素显示的文本的行数
343 |         -webkit-line-clamp 2
344 |         overflow hidden
345 |   .songHead
346 |     margin-bottom 10px
347 |     font-size 20px
348 |     span
349 |       font-size 12px
350 |       color #888888
351 |       +span
352 |         float right
353 |         :first-child
354 |           color red
355 |           margin-right 5px
356 |   .el-pagination
357 |     display flex
358 |     justify-content center
359 |   i
360 |     margin-left 10px
361 |     span
362 |       font-size 10px
363 |       margin-left 2px
364 |   .singer
365 |     cursor pointer
366 |     margin 10px 10px 0 10px
367 |     height 80px
368 |     img
369 |       width 70px
370 |       height 70px
371 |     div
372 |       position relative
373 |       left 90px
374 |       top -70px
375 |       span
376 |         display inline-block
377 |         margin-left 10px
378 |         ~span
379 |           font-size 12px
380 |           color #888888
381 |   .noLogin
382 |     width 70%
383 |     margin-top 50px
384 |     .img
385 |       position relative
386 |       img
387 |         position absolute
388 |         width 400px
389 |         height auto
390 |         top 100px
391 |         left 180px
392 |       div
393 |         top 100px
394 |         left 700px
395 |         position absolute
396 |         font-size 30px
397 |   .video
398 |     img
399 |       width 200px
400 |       height auto
401 | </style>
402 | 


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <el-header>
  4 |       <!--    导航菜单-->
  5 |       <el-menu
  6 |         :default-active="activeIndex"
  7 |         class="el-menu-demo"
  8 |         mode="horizontal"
  9 |         background-color="black"
 10 |         text-color="white"
 11 |         active-text-color="red">
 12 |         <el-menu-item index="recommend" @click="go('/recommend')">推荐</el-menu-item>
 13 |         <el-menu-item index="ranking" @click="go('/ranking')">排行榜</el-menu-item>
 14 |         <el-menu-item index="songMenu" @click="go('/songMenu')">歌单</el-menu-item>
 15 |         <el-menu-item index="singer" @click="go('/singer')">歌手</el-menu-item>
 16 |         <el-menu-item index="latest" @click="go('/latest')">最新音乐</el-menu-item>
 17 |         <el-input class="input" v-model="input" autofocus placeholder="专辑/歌手/歌单/用户"
 18 |                   prefix-icon="el-icon-search" @keyup.enter.native="searchInf(input)"
 19 |                   @input="changeValue" ref="input" @blur="blur"
 20 |         ></el-input>
 21 |       </el-menu>
 22 |     </el-header>
 23 |     <el-container>
 24 |       <el-aside width="220px">
 25 |         <!--    显示登录对话框-->
 26 |         <div class="dialog">
 27 |           <el-dialog
 28 |             :visible.sync="loginVisible"
 29 |             width="400px"
 30 |             :title="title"
 31 |             :append-to-body="true"
 32 |             @close="change(0,'没有账号？请先注册')">
 33 |             <el-card v-if="active == 0">
 34 |               <div class="button-group">
 35 |                 <el-button size="medium" round @click="change(1, '手机登录')">手机登录</el-button>
 36 |                 <el-button round size="medium" @click="change(2, '注册')">注册</el-button>
 37 |               </div>
 38 |             </el-card>
 39 |             <phone-login v-else-if="active == 1" @register="editActive" @success="login"></phone-login>
 40 |             <register v-else @login="editActive" :name="this.title"></register>
 41 |           </el-dialog>
 42 |         </div>
 43 |         <div @click="loginVisible=true" v-if="loginIf === 0" ref="login">
 44 |           <img src="../assets/logo.png" alt="hhh" slot="reference" class="avatar">
 45 |           <span>未登录</span>
 46 |         </div>
 47 |         <!--        登录后显示-->
 48 |         <el-popover
 49 |           v-else
 50 |           placement="bottom"
 51 |           trigger="hover">
 52 |           <ul>
 53 |             <li><i class="el-icon-user"></i>我的主页</li>
 54 |             <li><i class="el-icon-message"></i>我的消息</li>
 55 |             <li><i class="el-icon-setting"></i>个人设置</li>
 56 |             <li @click="loginOut"><i class="el-icon-circle-close"></i>退出</li>
 57 |           </ul>
 58 |           <img :src="headImgUrl" alt="hhh" slot="reference" class="avatar">
 59 |           <div>name</div>
 60 |         </el-popover>
 61 |         <div class="mySinger" @click="goMyMusic('singer')"><i class="el-icon-coordinate"></i>我的歌手</div>
 62 |         <div class="mySinger" @click="goMyMusic('video')"><i class="el-icon-coordinate"></i>我的视频</div>
 63 |         <div v-for="(item, index) in playlists" :key="index" class="aside" @click="goMyMusic(item.id)">
 64 |           <img :src="item.coverImgUrl" alt="">
 65 |           <div>
 66 |             <span>{{item.name}}</span><br>
 67 |             <span>{{item.trackCount}}首 by{{item.creator.nickname}}</span>
 68 |           </div>
 69 |         </div>
 70 |       </el-aside>
 71 |       <!--    显示的页面-->
 72 |       <el-main>
 73 |         <keep-alive><router-view/></keep-alive>
 74 |       </el-main>
 75 |     </el-container>
 76 |     <!--    显示搜索框-->
 77 |     <div v-show="Object.keys(result).length !== 0" class="search">
 78 |       <!--          歌曲-->
 79 |       <div v-if="result.songs">
 80 |         <i class="el-icon-headset"></i>单曲
 81 |         <div v-for="(item, index) in result.songs" :key="index">
 82 |           <div class="item" @click="changeInputValue(item.name)">{{item.name}}-
 83 |             <template v-for="(item1, index) in item.artists"><span :key="index"></span>{{item1.name}}</template>
 84 |           </div>
 85 |         </div>
 86 |         <div v-if="result.artists||result.albums||result.mvs" class="line"></div>
 87 |       </div>
 88 |       <!--        歌手-->
 89 |       <div v-if="result.artists">
 90 |         <i class="el-icon-user"></i>歌手
 91 |         <div v-for="(item, index) in result.artists" :key="index">
 92 |           <div class="item" @click="changeInputValue(item.name)">{{item.name}}</div>
 93 |         </div>
 94 |         <div v-if="result.albums||result.mvs" class="line"></div>
 95 |       </div>
 96 |       <!--        专辑-->
 97 |       <div v-if="result.albums">
 98 |         <i class="el-icon-star-off"></i>专辑
 99 |         <div v-for="(item, index) in result.albums" :key="index">
100 |           <div class="item" @click="changeInputValue(item.name)">{{item.name}}-{{item.artist.name}}</div>
101 |         </div>
102 |         <div v-if="result.mvs" class="line"></div>
103 |       </div>
104 |       <!--        mv-->
105 |       <div v-if="result.mvs">
106 |         <i class="el-icon-s-platform"></i>视频
107 |         <template v-for="(item, index) in result.mvs">
108 |           <div class="item" :key="index" @click="changeInputValue(item.name)">{{item.name}}-
109 |             <template v-for="(item1, index) in item.artists"><span :key="index"></span>{{item1.name}}</template>
110 |           </div>
111 |         </template>
112 |       </div>
113 |     </div>
114 |     <!--    音乐栏显示-->
115 |     <transition name="music">
116 |       <music-player class="music" v-show="show"></music-player>
117 |     </transition>
118 |   </div>
119 | </template>
120 | 
121 | <script>
122 | import musicPlayer from '../components/musicPlayer/musicPlayer'
123 | import phoneLogin from '../components/Login/phoneLogin'
124 | import register from '../components/register/register'
125 | export default {
126 |   name: 'index',
127 |   data () {
128 |     return {
129 |       // 是否显示对话框
130 |       loginVisible: false,
131 |       // 在登录框中，哪一个内容该显示
132 |       active: 0,
133 |       // 搜索框的值
134 |       input: '',
135 |       // 根据搜索框内容搜索到的结果
136 |       result: {},
137 |       // 登录框标题
138 |       title: '没有账号？请先注册',
139 |       // 头像显示，还是登录显示
140 |       loginIf: 0,
141 |       // 控制音乐栏显示
142 |       show: false,
143 |       playlists: []
144 |     }
145 |   },
146 |   created () {
147 |     // 判断session里面是否存在数据，有数据，就不用登录了
148 |     if (window.localStorage.getItem('phone') && window.localStorage.getItem('password')) {
149 |       this.loginIf = 1
150 |     }
151 |     this.getInf()
152 |   },
153 |   mounted () {
154 |     // 判断音乐栏是否显示
155 |     function show () {
156 |       if ((window.innerHeight - event.clientY) < 300) {
157 |         this.show = true
158 |       } else {
159 |         this.show = false
160 |       }
161 |     }
162 |     window.addEventListener('mousemove', show.bind(this))
163 |   },
164 |   components: {
165 |     phoneLogin,
166 |     register,
167 |     musicPlayer
168 |   },
169 |   methods: {
170 |     // 监听子组件事件
171 |     editActive (value) {
172 |       this.active = value.value
173 |       this.title = value.title
174 |     },
175 |     // 根据input里面的值发送请求，得到结果
176 |     search (value) {
177 |       if (value === '') {
178 |         return
179 |       }
180 |       this.$http.get(`/search/suggest?keywords=${value}`).then(data => {
181 |         this.result = data.result
182 |       })
183 |     },
184 |     // 在登录框中，为显示哪个做改变
185 |     change (value, title) {
186 |       this.active = value
187 |       this.title = title
188 |     },
189 |     // 登录成功后
190 |     login (value) {
191 |       this.loginVisible = false
192 |       this.headImgUrl = value
193 |       this.loginIf = 1
194 |     },
195 |     // 去往哪一个子页面
196 |     go (value) {
197 |       this.$router.push(value)
198 |     },
199 |     // 在input里面写值并按enter键，进入serch页面
200 |     searchInf (value) {
201 |       if (value === '') {
202 |         return
203 |       }
204 |       this.$router.push({
205 |         path: '/search',
206 |         query: { keywords: value }
207 |       })
208 |       this.result = {}
209 |     },
210 |     // 监听input值的改变
211 |     changeValue (value) {
212 |       if (value === '') {
213 |         this.result = {}
214 |       }
215 |       this.search(value)
216 |     },
217 |     // 失去焦点时
218 |     blur () {
219 |       this.result = {}
220 |       this.input = ''
221 |     },
222 |     changeInputValue (value) {
223 |       this.result = {}
224 |       this.$refs.input.focus()
225 |       this.input = value
226 |       this.searchInf(value)
227 |     },
228 |     //  退出登录
229 |     loginOut () {
230 |       this.$confirm('此操作将退出登录, 是否继续??', '提示', {
231 |         confirmButtonText: '退出',
232 |         cancelButtonText: '取消',
233 |         type: 'warning'
234 |       }).then(() => {
235 |         this.loginIf = 0
236 |         window.localStorage.removeItem('token')
237 |         window.localStorage.removeItem('phone')
238 |         window.localStorage.removeItem('password')
239 |         window.localStorage.removeItem('imgUrl')
240 |         window.localStorage.removeItem('accountId')
241 |         window.localStorage.removeItem('getAccountId')
242 |         window.location.reload()
243 |       }).catch(() => {
244 |         this.$message({
245 |           type: 'info',
246 |           message: '已取消退出'
247 |         })
248 |       })
249 |     },
250 |     getInf () {
251 |       this.$http.get(`/user/playlist?uid=${this.accountId}`).then(data => {
252 |         this.playlists = data.playlist
253 |       })
254 |     },
255 |     goMyMusic (name) {
256 |       this.$router.push({
257 |         path: '/myMusic',
258 |         query: {
259 |           name: name
260 |         }
261 |       })
262 |     }
263 |   },
264 |   computed: {
265 |     // 头像地址
266 |     headImgUrl: {
267 |       get () {
268 |         if (window.localStorage.getItem('phone') && window.localStorage.getItem('password')) {
269 |           return window.localStorage.getItem('imgUrl')
270 |         }
271 |         return ''
272 |       },
273 |       set () {
274 |       }
275 |     },
276 |     activeIndex () {
277 |       return this.$store.state.activeName
278 |     },
279 |     // 从vuex中得到用户id
280 |     accountId () {
281 |       return this.$store.state.accountId
282 |     }
283 |   }
284 | }
285 | </script>
286 | <style lang="stylus" scoped>
287 |   .container
288 |     margin-bottom 50px
289 |   .music
290 |     position fixed
291 |     bottom 0
292 |     width 100%
293 |   .el-menu-demo
294 |     display flex
295 |     justify-content center
296 |     span
297 |       cursor pointer
298 |       position relative
299 |       margin auto 0
300 |       font-size 10px
301 |       color #909399
302 |   .el-menu.el-menu--horizontal
303 |     border-bottom none
304 |   .button-group
305 |     text-align center
306 |     .el-button
307 |       /*background-color #252525*/
308 |       color #2f2f2f
309 |       width 200px
310 |       margin 5px 0
311 |       border 1px solid #2f2f2f
312 |       margin-top 20px
313 |       +.el-button
314 |         margin-left 0
315 |         margin-bottom 30px
316 |   .el-input
317 |     width auto
318 |     margin auto 20px
319 |     :focus
320 |       border-color red
321 |   .input>>>.el-input__inner
322 |     border-radius 20px
323 |     height: 33px
324 |     font-size 12px
325 |     width 90%
326 |   i
327 |     margin-right 10px
328 |     font-size 1.3em
329 |   .music-enter-active, .music-leave-active
330 |     transition opacity 1s
331 |   .music-enter, .music-leave-to
332 |     opacity 0
333 |   .search
334 |     position absolute
335 |     left 750px
336 |     width 220px
337 |     background-color black
338 |     border 3px solid #252525
339 |     z-index 20
340 |     padding 10px 10px 0 10px
341 |     border-radius 5px
342 |     .item
343 |       width 130px
344 |       //超粗文字部分，隐藏
345 |       overflow hidden
346 |       // 文本被修建
347 |       text-overflow ellipsis
348 |       white-space nowrap
349 |       position relative
350 |       left 70px
351 |       top -20px
352 |       font-size 12px
353 |       cursor pointer
354 |       padding 0 5px
355 |     .line
356 |       position relative
357 |       top -10px
358 |   .item:hover
359 |     box-shadow 0 0 10px red
360 |   .el-popover
361 |     margin 0
362 |     li:hover
363 |       background-color #eeeeee
364 |   .el-aside
365 |     background-color #111111
366 |     position fixed
367 |     left 0
368 |     top 50px
369 |     height 100%
370 |     padding 20px 5px
371 |   .el-main
372 |     margin-left 230px
373 |     margin-top 50px
374 |   .el-header
375 |     z-index 5
376 |     position fixed
377 |     width 100%
378 |     left 0
379 |     top 0
380 |   .aside
381 |     cursor pointer
382 |     padding 10px 10px 0 10px
383 |     height 50px
384 |     font-size 12px
385 |     img
386 |       width 40px
387 |       height 40px
388 |     div
389 |       position relative
390 |       left 50px
391 |       top -40px
392 |       width 150px
393 |       span
394 |         display inline-block
395 |         width 150px
396 |         overflow hidden
397 |         text-overflow ellipsis
398 |         white-space nowrap
399 |         ~span
400 |           font-size 12px
401 |           color #888888
402 |   .aside:hover
403 |     background-color #2d2c2c
404 |   .avatar
405 |     width 55px
406 |     height 55px
407 |     border-radius 50%
408 |     margin 10px 20px
409 |     +span
410 |       cursor pointer
411 |       position relative
412 |       left 20px
413 |       top -20px
414 |   .mySinger
415 |     color #888888
416 |     font-size 14px
417 |     box-sizing border-box
418 |     padding 5px 20px 5px 20px
419 |     cursor pointer
420 |   .mySinger:hover
421 |     color white
422 |     background-color #2d2c2c
423 | </style>
424 | 


--------------------------------------------------------------------------------