Vue3与.NET6实战之实现点播功能

实现页面点播功能

先看效果

一直在想怎么实现点击就能播放的效果，本人前端太菜了，只能用了一种很丑陋的方式实现了，步骤如下：

• 引入播放器插件
• 设置表的字段
• 前端获取字段数据并存储
• 拼接字符串
• 刷新播放器（不完善）

下面开始第一步

1.引入播放器插件

这里使用的是aplayer插件，地址在这里：APlayer，这是我的组件代码供大家参考：

<template>
  <div id="app">
    <!-- 准备一个容器用来存放音乐播放器 -->
    <div id="aplayer"></div>
  </div>
</template>

<script>
import APlayer from "APlayer"; // 引入音乐插件
import "APlayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { ref, onMounted, reactive, inject } from "vue";
export default {
  name: "App",
  data() {
    return {
      mid: localStorage.getItem("muscid"),
      audio: [
        // 歌曲列表
        {
          name: "极恶都市", // 歌曲名字
          artist: "夏日入侵企画", // 歌曲演唱者
          // 歌曲地址（这里用外链地址）
          url:
            "http://music.163.com/song/media/outer/url?id=570340213.mp3",
          cover:
            "http://p2.music.126.net/ZqJp0p4eDzCUCboH-WZJYA==/109951163326946996.jpg?param=130y130", // 歌曲头像

          lrc: "", // 歌词
          theme: "rgb(127, 218, 180)", // 播放这首歌曲时的主题色
        },
      ],
      info: {
        fixed: true, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: true, // 开启自动播放
        preload: "auto", // 自动预加载歌曲
        loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: "list", //  播放模式，list列表播放, random随机播放
      },
    };
  },

  mounted() {
    // 初始化播放器
    this.initAudio();
  },
  methods: {
    initAudio() {
      // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
      const ap = new APlayer({
        container: document.getElementById("aplayer"),
        audio: this.audio, // 音乐信息
        ...this.info, // 其他配置信息
      });
    },
    goodclick() {},
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  padding: 50px;
  #aplayer {
    width: 480px; // 定个宽度
  }
}
</style>

2.设置表的字段

• 这里的设置字段的意思就是，我们需要点播的话，音乐的外链接地址一定是动态的，需要我们点击哪首，就需要获取那一首的外链接地址，这里我使用的是网易云音乐的外链接地址
• 比如这样的：http://music.163.com/song/media/outer/url?id=255020.mp3，这些外链接地址都有规律，我只需要拼接它的id的值就好了

于是，我在数据库中设置了一个字段：

当然，字段名字不重要，随意设置，我们只需要添加音乐数据时，加上这个字段的值，也就是获取到外链接的地址，这个值在这里获取：远方音乐外链接

3.前端获取字段数据并存储

前端在查询出来所有的音乐数据后，我们点播哪个音乐时，就需要存储哪个音乐的id，它的名字，演唱者都可以存储
以下是我的代码：

	//获取点播数据
    const onPlayer = (row: any) => {
      console.log("操作的那条数据" + JSON.stringify(row.singer));
      tableData.musicId = row.pid;

      localStorage.setItem("musicId", row.pid);
      localStorage.setItem("musicName", JSON.stringify(row.name));
      localStorage.setItem("musicSinger", JSON.stringify(row.singer));
      //timer.value = new Date().getTime();
      reload();
    };

这是页面部分

                      <el-table
                        :data="tableData.list"
                        height="500px"
                        style="width: 100%"
                        @row-click="rowBack"
                      >
                        <el-table-column prop="name" label="歌曲名称" />
                        <el-table-column prop="singer" label="演唱者" />
                        <el-table-column prop="composer" label="作曲者" />
                        <el-table-column prop="album" label="专辑" />
                        <el-table-column prop="duration" label="时长" width="80px" />
                        <el-table-column label="" width="100px">
                          <template #default="scope">
                            <el-button text type="primary" @click="onPlayer(scope.row)"
                              >播放</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>

4.拼接字符串

然后是在播放器组件中拼接字符串，就是把直接存储的值拼接上去

      audio: [
        // 歌曲列表
        {
          name: localStorage.getItem("musicName"), // 歌曲名字
          artist: localStorage.getItem("musicSinger"), // 歌曲演唱者
          // 歌曲地址（这里用外链地址）
          url:
            "https://music.163.com/song/media/outer/url?id=" +
            localStorage.getItem("musicId"),
          cover:
            "http://p2.music.126.net/ZqJp0p4eDzCUCboH-WZJYA==/109951163326946996.jpg?param=130y130", // 歌曲头像

          lrc: "", // 歌词
          theme: "rgb(127, 218, 180)", // 播放这首歌曲时的主题色
        },
      ],

5. 刷新播放器（不完善）

以上就基本设置完成了，但是点击后还需要手动刷新才能播放，这里提供一个不完善的解决方式：通过设置页面刷新来刷新播放器，组件刷新目前不太会，以后再说

• 在App.vue中加入以下代码

<script lang="ts">
//配置页面刷新
import { provide, ref, nextTick } from "vue";
export default {
  setup() {
    const isRouteActive = ref(true);
    const reload = () => {
      isRouteActive.value = false;
      nextTick(() => {
        isRouteActive.value = true;
      });
    };
    provide("reload", reload);
    return {
      isRouteActive,
      reload,
    };
  },
};
</script>

<template>
  <div id="app">
    <RouterView v-if="isRouteActive"></RouterView>
  </div>
</template>

<style scoped>
#app {
  margin: 0%;
  padding: 0%;
  left: 0%;
  top: 0%;
}
/*flex布局类名*/
</style>

我们如何使用呢，看这里！在需要使用页面中引入 const reload: any = inject("reload");然后在点播方法中使用

    //播放
    const onPlayer = (row: any) => {
      console.log("操作的那条数据" + JSON.stringify(row.singer));
      tableData.musicId = row.pid;

      localStorage.setItem("musicId", row.pid);
      localStorage.setItem("musicName", JSON.stringify(row.name));
      localStorage.setItem("musicSinger", JSON.stringify(row.singer));
      //timer.value = new Date().getTime();
      reload();
    };

好，现在就可以了，但是这个组件的刷新，我需要再去学习一下…