How to use Vue to implement a page design imitating Gudong FM?

Vue.js is a popular JavaScript framework. If you want to know how to use Vue to implement a Gudong FM-like page design, here are some basic steps and techniques.

Step 1: Understand the page design and functions of Gudong FM

Before you start using Vue.js, you need to first understand the page design and functions of Gudong FM.

Gudong FM is a music app, which is mainly divided into three pages: personal center, music list and playback page. The personal center page displays user information, the music list page displays the song list, and the playback page displays the currently playing music and corresponding control buttons.

Step 2: Build a Vue project

To use Vue.js to build a Gudong-like FM page, you need to install Node.js and use the npm tool provided by Node.js to install the Vue CLI.

Open the command line terminal and use the following command to install Vue CLI:

npm install -g vue-cli

After the installation is complete, you can use the following command in the command line window to create a new Vue.js project:

vue init webpack my-project

Among them, my-project is the name of the project, you can modify it according to your needs.

Step 3: Implement page design

1. First, create three components in the App.vue file: Personal, MusicList and Player.

<template>
  <div>
    <Personal />
    <MusicList />
    <Player />
  </div>
</template>

<script>
import Personal from './components/Personal.vue'
import MusicList from './components/MusicList.vue'
import Player from './components/Player.vue'

export default {
  name: 'app',
  components: {
    Personal,
    MusicList,
    Player
  }
}
</script>

2. Create a Personal component to display personal information.

<template>
  <div class="personal">
    <div class="avatar-box">
      <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="./assets/avatar.png"  alt="头像">
    </div>
    <div class="user-info">
      <div class="username">{{ username }}</div>
      <div class="user-email">{{ email }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personal',
  data () {
    return {
      username: '张三',
      email: 'zhangsan@example.com'
    }
  }
}
</script>

3. Create a MusicList component to display the song list.

<template>
  <div class="music-list">
    <div class="music-item" v-for="(item, index) in musicList" :key="index">
      <div class="music-thumbnail">
        <img src="/static/imghwm/default1.png"  data-src="item.thumbnail"  class="lazy"  : alt="歌曲封面">
      </div>
      <div class="music-info">
        <div class="music-name">{{ item.name }}</div>
        <div class="music-artist">{{ item.artist }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicList',
  data () {
    return {
      musicList: [
        {
          name: '浪子回头',
          artist: '刘德华',
          thumbnail: './assets/album1.jpg'
        },
        {
          name: '夏天的风',
          artist: '周杰伦',
          thumbnail: './assets/album2.jpg'
        },
        {
          name: '告白气球',
          artist: '周杰伦',
          thumbnail: './assets/album3.jpg'
        }
      ]
    }
  }
}
</script>

4. Create the Player component to display the player and control buttons.

<template>
  <div class="player">
    <div class="music-info">
      <div class="music-name">{{ currentMusic.name }}</div>
      <div class="music-artist">{{ currentMusic.artist }}</div>
    </div>
    <div class="player-controls">
      <button class="prev-btn" @click="prev">上一首</button>
      <button class="play-btn" @click="play">{{ playing ? '暂停' : '播放' }}</button>
      <button class="next-btn" @click="next">下一首</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Player',
  data () {
    return {
      currentMusic: {},
      playing: false,
      musicList: [
        {
          name: '浪子回头',
          artist: '刘德华',
          url: './assets/songs/song1.mp3',
          thumbnail: './assets/album1.jpg'
        },
        {
          name: '夏天的风',
          artist: '周杰伦',
          url: './assets/songs/song2.mp3',
          thumbnail: './assets/album2.jpg'
        },
        {
          name: '告白气球',
          artist: '周杰伦',
          url: './assets/songs/song3.mp3',
          thumbnail: './assets/album3.jpg'
        }
      ]
    }
  },
  methods: {
    play () {
      this.playing = !this.playing
    },
    prev () {
      // 上一首
    },
    next () {
      // 下一首
    }
  }
}
</script>

Step 4: Implement page interaction

1. Bind click events to the song list in the MusicList component.

<template>
  <div class="music-item" v-for="(item, index) in musicList" :key="index" @click="playMusic(index)">
    ...
  </div>
</template>

<script>
export default {
  name: 'MusicList',
  methods: {
    playMusic (index) {
      this.$parent.$refs.player.currentMusic = this.musicList[index]
    }
  }
}
</script>

2. Implement the playback control function in the Player component.

<template>
  <div class="player">
    ...
  </div>
</template>

<script>
export default {
  name: 'Player',
  data () {
    return {
      // 省略
    }
  },
  methods: {
    play () {
      if (this.currentMusic.url) {
        const audio = this.$refs.audio
        if (this.playing) {
          audio.pause()
        } else {
          audio.play()
        }
        this.playing = !this.playing
      }
    },
    prev () {
      const index = this.musicList.indexOf(this.currentMusic)
      let prevIndex = index - 1
      if (prevIndex < 0) {
        prevIndex = this.musicList.length - 1
      }
      this.currentMusic = this.musicList[prevIndex]
    },
    next () {
      const index = this.musicList.indexOf(this.currentMusic)
      let nextIndex = index + 1
      if (nextIndex >= this.musicList.length) {
        nextIndex = 0
      }
      this.currentMusic = this.musicList[nextIndex]
    }
  }
}
</script>

Step 5: Run the project

Execute the following command in the project root directory:

npm install
npm run dev

In this way, you can see the imitation Gudong FM in the browser page. When you click on a song in the song list, the player will automatically switch to that song and start playing.

Summary:

Using Vue.js to build a page imitating Gudong FM requires mastering the following basic skills:

• Install Vue CLI and create a Vue.js project;
• Implement the page requirements, including three components: Personal, MusicList and Player;
• Implement the page interaction, including the click event of the song list and the playback control function of the player.

Through the study of this article, you should already understand these basic skills, and you can start trying to use Vue.js to build your own imitation Gudong FM page.

The above is the detailed content of How to use Vue to implement a page design imitating Gudong FM?. For more information, please follow other related articles on the PHP Chinese website!