A preface.

Vue comprehensive application, teach you to develop a music player, can listen to songs, can see popular messages, can watch videos, development has the following functions:

  1. Song search
  2. The songs
  3. Song cover
  4. Song reviews
  5. The animation
  6. Video playback

Ii. The effect picture is as follows

Song search

  1. Press Enter (V-on). Enter)
  2. Query data (AXIOS interface V-Model)
  3. Render data (V-for array that)

Song Search interface

Request address: https://autumnfish.cn/search request method: get request parameters: keywords (query keywords) response content: song search resultsCopy the code

Note:

When the data returned by the server is complex, pay attention to the hierarchy

Four. Song playing

  1. Hit Play (V-on, custom parameters)
  2. Song Address retrieval (interface, song ID)
  3. Song Address Setting (V-bind)

Song URL interface

Request address: https://autumnfish.cn/song/url request method: get request parameters: id id (song) response content: song url addressCopy the code

Note:

  • The song ID depends on the results of the song search and is concerned about unused data

Song cover

  1. Hit Play (add logic)
  2. Song Cover Acquisition (Interface Song ID)
  3. Song Cover Setup (V-bind)
Request address: https://autumnfish.cn/song/detail request method: get request parameters: ids (id) of songs response content: song details information (including the cover)Copy the code

Note:

  • Manipulate attributes in VUE via V-bind
  • Data that cannot be obtained locally has corresponding interfaces

Song reviews

  1. Hit Play (add logic)
  2. Song Review Get (interface song ID)
  3. Song Review Rendering (V-for)
Request address: https://autumnfish.cn/comment/hot?type=0 request method: get request parameters: id (song id, address of the fixed type 0) response content: songs popular commentsCopy the code

Note:

  • Generate the list in VUE via V-for

The animation

  1. Monitor music playing (V-on Play)
  2. Listen to music pause (V-on pause)
  3. Manipulating class names (V-bind)

Note:

  • The audio paly event is triggered when the music is playing
  • The pause event for the Audio tag is triggered when the music is paused
  • The class name is set as an object, depending on whether the value is true or false

Video playback

  1. Mv Icon Display (V-IF)
  2. Mv Address acquisition (interface MVID)
  3. Mask layer (V-show V-ON)
  4. Mv Address Setting (V-bind)
Request address: https://autumnfish.cn/mv/url request method: get request parameters: id (mvid, 0 means no mv) content of the response: the address of the mvCopy the code

Pay attention to

  • Different interfaces require different data. Read the document carefully
  • Page structure is complex, to review
  • Data is defined in data
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> <! < span style> /* * {margin: 0; padding: 0; } */ .player_loge { position: absolute; top: 20px; left: 20px; z-index: 3; width: 80px; height: 21px; font-size: 100%; } .player_loge a { text-decoration: none; color: rgb(135, 146, 160); cursor: pointer; } </style> </head> <body style="background-color: rgb(96, 128, 160);" > <div class="wrap"> <! - the player subject area - > < h1 class = "player_loge" > < a href = "#" > small culvert music < / a > < / h1 > < div class = "play_wrap" id = "player" > < div class="search_bar"> <! <input type="text" autocomplete="off" V-model ='query' @keyup.enter="searchMusic" /> </div> <! <div class='song_wrapper'> <ul class="song_list"> <li v-for="item in musicList"> <! <a href="javascript:;" @ click = 'playMusic (item id) "> < / a > < input type =" button "value =" play "@ click =' playMusic (item. Id) '> < b > {{item. The name}} < / b > <input type="button" value="mv" v-if="item.mvid! =0" @click="playMv(item.mvid)"> <span v-if="item.mvid! =0" @click="playMv(item.mvid)"> <i></i> </span> </li> </ul> </div> <! <img SRC ="" Alt ="" class="play_bar"> <img SRC ="" Alt ="" class="disc autoRotate"> <img :src="musicCover" alt="" class="cover autoRotate"> </div> </div> <! <div class="comment_wrapper"> <h5 class="title"> popular comments </h5> <div class="comment_list"> <dl v-for="item in hotComments"> <! - comments on the head - > < dt > < img: SRC = "item. User. AvatarUrl" Alt = "" > < / dt > < dd class =" name "> {{item. Nickname}} < / dd > < dd class="detail">{{item.content}}</dd> </dl> </div> </div> <! <div class="audio_con"> <audio ref='audio' @play='play' @pause='pause' : SRC ="musicUrl" controls autoplay loop class="myaudio"></audio> </div> <! <div class="video_con" v-show='isShow' style="display: none;" > <video :src="mvUrl" controls="controls"></video> <div class="mask" @click="hide"></div> </div> </div> <! Version, development environment, contains useful command-line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > <! - website provides axios online address -- -- > < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script > < script Type ="text/javascript"> // Set the base address of axios axios.defaults.baseURL = 'https://autumnfish.cn'; // axios.defaults.baseURL = 'http://localhost:3000'; Var app = new vue ({el: "#player", data: {// query: "", // musicList: [], // musicUrl: // hotComments: [], // isPlay: false, isShow: false, // mv address mvUrl: SearchMusic: function () {var that = this; axios.get("https://autumnfish.cn/search?keywords=" + this.query) .then(function (response) { // console.log(response); // console.log(response.data.result.songs) that.musicList = response.data.result.songs; })}, // playMusic: function (musicId) {var that = this; // console.log(musicId); axios.get("https://autumnfish.cn/song/url?id=" + musicId) .then(function (response) { // console.log(response); // console.log(response.data.data[0].url); that.musicUrl = response.data.data[0].url; }, Function (err) {})/song/details for axios. Get (' https://autumnfish.cn/song/detail?ids= '+ musicId). Then (function (response) { // console.log(response); // console.log(response.data.songs[0].al.picUrl); that.musicCover = response.data.songs[0].al.picUrl; }, Function (err) {}) / / song reviews axios. Get (' https://autumnfish.cn/comment/hot?type=0&id= '+ musicId). Then (function (response)  { // console.log(response); // console.log(response.data.hotComments); that.hotComments = response.data.hotComments; }, function (err) { }) }, play: function () { // console.log('play'); this.isplay = true; }, pause: function () { // console.log('pause') this.isplay = false; }, // playMv playMv: function (mvid) {var that = this; axios.get('https://autumnfish.cn/mv/url?id=' + mvid) .then(function (response) { // console.log(response); console.log(response.data.data.url); that.isShow = true; that.mvUrl = response.data.data.url; console.log(that.mvUrl); }, function (err) { }) }, hide: function () { this.isShow = false } } }) </script> </body> </html>Copy the code