Comment utiliser Vue pour implémenter une conception de page imitant Gudong FM ?

Vue.js est un framework JavaScript populaire. Si vous souhaitez savoir comment utiliser Vue pour implémenter une conception de page de type Gudong FM, voici quelques étapes et techniques de base.

Étape 1 : Comprendre la conception et les fonctions de la page de Gudong FM

Avant de commencer à utiliser Vue.js, vous devez comprendre la conception de la page et les fonctions de Gudong FM.

Gudong FM est une application musicale principalement divisée en trois pages : centre personnel, liste de musique et page de lecture. La page du centre personnel affiche les informations utilisateur, la page de la liste musicale affiche la liste des chansons et la page de lecture affiche la musique en cours de lecture et les boutons de commande correspondants.

Étape 2 : Créer un projet Vue

Pour utiliser Vue.js pour créer une page Gudong FM, vous devez installer Node.js et utiliser l'outil npm fourni par Node.js pour installer la CLI Vue.

Ouvrez le terminal de ligne de commande et utilisez la commande suivante pour installer Vue CLI :

npm install -g vue-cli

Une fois l'installation terminée, vous pouvez utiliser la commande suivante dans la fenêtre de ligne de commande pour créer un nouveau projet Vue.js :

vue init webpack my-project

Où , mon-projet est le nom du projet , vous pouvez le modifier selon vos besoins.

Étape 3 : Implémenter la conception de la page

1. Tout d'abord, créez trois composants dans le fichier App.vue : Personnel, MusicList et 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. Créez un composant personnel pour afficher des informations personnelles.

<template>
  <div class="personal">
    <div class="avatar-box">
      <img class="avatar" 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. Créez le composant MusicList pour afficher la liste des chansons.

<template>
  <div class="music-list">
    <div class="music-item" v-for="(item, index) in musicList" :key="index">
      <div class="music-thumbnail">
        <img :src="item.thumbnail" 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. Créez le composant Player pour afficher le lecteur et les boutons de contrôle.

<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>

Étape 4 : Implémenter l'interaction avec la page

1. Liez les événements de clic à la liste de chansons dans le composant MusicList.

<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. Implémentez la fonction de contrôle de lecture dans le composant Player.

<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>

Étape 5 : Exécutez le projet

Exécutez la commande suivante dans le répertoire racine du projet :

npm install
npm run dev

De cette façon, vous pouvez voir la page de Fake Gudong FM dans le navigateur. Lorsque vous cliquez sur une chanson dans la liste des chansons, le lecteur passe automatiquement à cette chanson et commence à jouer.

Résumé :

Utiliser Vue.js pour créer une page imitant Gudong FM nécessite la maîtrise des compétences de base suivantes :

• Installer Vue CLI et créer un projet Vue.js
• implémenter les exigences de la page, y compris trois composants : Personnel ; , MusicList et Player ;
• implémente l'interaction des pages, y compris les événements de clic sur les listes de chansons et les fonctions de contrôle de lecture du lecteur.

Après avoir étudié cet article, vous devriez déjà comprendre ces compétences de base et pouvoir commencer à essayer d'utiliser Vue.js pour créer votre propre page d'imitation de Gudong FM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!