• vue+element模仿实现PC端网易云，对接第三方接口

    一、项目预览

    在线预览：点击访问

    其他项目访问：点击访问

     项目使用传统vue项目结构实现，前端采用element实现。

    element官网：Element - The world's most popular Vue UI framework

     

    二、 项目效果图

    1.首页

    2.歌单详情列表

     

    3.歌曲在线播放

     

    4.搜索实时推荐

     5.歌曲在线实时搜索

    6.歌曲待播放列表

     7.扫码登录

    8.验证码登录

     

    三、代码实现

    1.第三方接口api请求地址：

    http://www.codeman.ink:3000

    2.歌单详情源码

    1. <template>
    2.   <div class="musicListDetail" v-loading="!musicListDetail">
    3.     
    4.     <div class="listInfo">
    5.       
    6.       <div class="listAvatar">
    7.         <img :src="musicListDetail?musicListDetail.coverImgUrl:''" alt="" />
    8.       div>
    9.       <div class="right">
    10.         
    11.         <div class="title">
    12.           <div class="titleTag">歌单div>
    13.           <div class="titleContent">{{ musicListDetail?musicListDetail.name:'' }}div>
    14.         div>
    15.         
    16.         <div class="user">
    17.           <div class="userAvatar">
    18.             <img :src="musicListDetail&&musicListDetail.creator?musicListDetail.creator.avatarUrl:''" alt="" />
    19.           div>
    20.           <div
    21.             class="userName">
    22.             {{ musicListDetail&&musicListDetail.creator?musicListDetail.creator.nickname:'' }}
    23.           div>
    24.           <div class="createTime">
    25.             {{ musicListDetail?musicListDetail.createTime:'' | showDate }}创建
    26.           div>
    27.         div>
    28.         
    29.         <div class="buttons">
    30.           <div class="buttonItem playAll" @click="playAll">
    31.             <i class="iconfont icon-bofang playAll">i>
    32.             <span>播放全部span>
    33.           div>
    34.           <div class="buttonItem">
    35.             <i class="iconfont icon-xihuan">i>
    36.             <span>收藏span>
    37.           div>
    38.           <div class="buttonItem">
    39.             <i class="iconfont icon-zhuanfa">i>
    40.             <span>分享span>
    41.           div>
    42.         div>
    43.         
    44.         <div class="tags">
    45.           标签：
    46.           <div
    47.             class="tagItem"
    48.             v-for="(item, index) in musicListDetail?musicListDetail.tags:[]"
    49.             :key="index"
    50.           >
    51.             {{ item }}
    52.           div>
    53.           <div v-if="!musicListDetail||!musicListDetail.tags||musicListDetail.tags.length == 0">暂无标签div>
    54.         div>
    55.         
    56.         <div class="otherInfo">
    57.           <div class="musicNum">
    58.             歌曲 : {{ musicListDetail.trackCount | handleNum }}
    59.           div>
    60.           <div class="playCount">
    61.             播放 : {{ musicListDetail.playCount | handleNum }}
    62.           div>
    63.         div>
    64.         <div class="desc">
    65.           简介 :
    66.           {{
    67.             musicListDetail.description
    68.               ? musicListDetail.description
    69.               : "暂无简介"
    70.           }}
    71.         div>
    72.       div>
    73.     div>
    74.     
    75.     <div class="musicList">
    76.       <el-tabs value="first">
    77.         <el-tab-pane label="歌曲列表" name="first">
    78.           
    79.           <el-table
    80.             :data="musicListDetail.tracks"
    81.             size="mini"
    82.             style="width: 100%"
    83.             @row-dblclick="clickRow"
    84.             @cell-click="clickCell"
    85.             highlight-current-row
    86.             stripe
    87.             lazy
    88.             :row-key="
    89.               (row) => {
    90.                 return row.id;
    91.               }
    92.             "
    93.             v-infinite-scroll="this.$store.state.isLogin ? loadMore : ''"
    94.             :infinite-scroll-disabled="scrollLoadDisabled"
    95.             :infinite-scroll-distance="1500"
    96.             :infinite-scroll-immediate="false"
    97.           >
    98.             <el-table-column
    99.               label=""
    100.               width="40"
    101.               type="index"
    102.               :index="handleIndex"
    103.             >
    104.             el-table-column>
    105.             <el-table-column label="" width="23">
    106.               
    107.               <i class="iconfont icon-download">i>
    108.             el-table-column>
    109.             <el-table-column prop="name" label="音乐标题" min-width="350">
    110.             el-table-column>
    111.             <el-table-column prop="ar[0].name" label="歌手" min-width="120">
    112.             el-table-column>
    113.             <el-table-column prop="al.name" label="专辑" min-width="170">
    114.             el-table-column>
    115.             <el-table-column prop="dt" label="时长" min-width="100">
    116.             el-table-column>
    117.             
    118.           el-table>
    119.           <div class="loadMore" v-if="isMore && !this.$store.state.isLogin">
    120.             登陆后查看更多音乐
    121.           div>
    122.           <div class="placeholder" v-else>div>
    123.           
    124.         el-tab-pane>
    125.       el-tabs>
    126.     div>
    127.  
    128.     
    129.     <go-top scrollObj=".musicListDetail">go-top>
    130.   div>
    131. template>
    132.  
    133. <script>
    134. import { formatDate, handleNum, handleMusicTime } from "@/plugins/utils";
    135. import Comment from "@/components/comment/Comment";
    136. import GoTop from "@/components/goTop/GoTop.vue";
    137. import UserListCard from "@/components/userListCard/UserListCard.vue";
    138.  
    139. export default {
    140.   name: "MusicListDetail",
    141.   data() {
    142.     return {
    143.       musicListDetail: {
    144.         trackIds:[],
    145.         tracks:[]
    146.       },
    147.       comments: {},
    148.       // 当前评论页数
    149.       currentCommentPage: 1,
    150.       // 是否还有更多音乐
    151.       isMore: false,
    152.       // 是否禁止滚动加载
    153.       scrollLoadDisabled: false,
    154.     };
    155.   },
    156.   components: {
    157.     Comment,
    158.     GoTop,
    159.     UserListCard,
    160.   },
    161.   methods: {
    162.     // 请求
    163.     // 根据传来的 id 查询歌单
    164.     async getMusicListDetail() {
    165.       var timestamp = Date.parse(new Date());
    166.       // console.log(this.$route.params.id);
    167.       let result = await this.$request("/playlist/detail", {
    168.         id: this.$route.params.id,
    169.         timestamp,
    170.       });
    171.       // console.log(result);
    172.       this.musicListDetail = result.data.playlist;
    173.       // console.log(this.musicListDetail);
    174.       // 判断是否还有更多音乐
    175.       if (
    176.         this.musicListDetail.tracks.length !=
    177.         this.musicListDetail.trackIds.length
    178.       ) {
    179.         this.isMore = true;
    180.       }
    181.       // 处理播放时间
    182.       this.musicListDetail.tracks.forEach((item, index) => {
    183.         this.musicListDetail.tracks[index].dt = handleMusicTime(item.dt);
    184.       });
    185.     },
    186.     // 获取歌曲详情
    187.     async getMusicDetail(ids) {
    188.       if (this.isMore == false) return;
    189.       this.scrollLoadDisabled = true;
    190.  
    191.       let res = await this.$request("/song/detail", { ids });
    192.       // 处理时间
    193.       console.log(res);
    194.       res.data.songs.forEach((item, index) => {
    195.         res.data.songs[index].dt = handleMusicTime(item.dt);
    196.       });
    197.       this.musicListDetail.tracks.push(...res.data.songs);
    198.       // 判断是否还有更多音乐
    199.       if (
    200.         this.musicListDetail.tracks.length <
    201.         this.musicListDetail.trackIds.length
    202.       ) {
    203.         this.isMore = true;
    204.         this.scrollLoadDisabled = false;
    205.       } else {
    206.         this.isMore = false;
    207.       }
    208.     },
    209.  
    210.     // 事件函数
    211.     handleIndex(index) {
    212.       // console.log(index);
    213.       index += 1;
    214.       if (index < 10) {
    215.         return "0" + index;
    216.       } else {
    217.         return index;
    218.       }
    219.     },
    220.     // 双击table的row的回调
    221.     async clickRow(row) {
    222.       console.log(row);
    223.       // 将musicId提交到vuex中 供bottomControl查询歌曲url和其它操作
    224.       this.$store.commit("updateMusicId", row.id);
    225.       // 如果歌单发生变化,则提交歌单到vuex
    226.       if (this.musicListDetail.id != this.$store.state.musicListId) {
    227.         // 将歌单传到vuex
    228.         this.$store.commit("updateMusicList", {
    229.           musicList: this.musicListDetail.tracks,
    230.           musicListId: this.musicListDetail.id,
    231.         });
    232.       }
    233.  
    234.       // let result = await this.$request("/song/url", { id: row.id, br: 320000 });
    235.       // console.log(result.data.data[0].url);
    236.       // this.$store.commit("updateMusicUrl", result.data.data[0].url);
    237.     },
    238.     // 点击播放全部按钮的回调
    239.     playAll() {
    240.       this.$store.commit("updateMusicId", this.musicListDetail.tracks[0].id);
    241.       this.$store.commit("updateMusicList", {
    242.         musicList: this.musicListDetail.tracks,
    243.         musicListId: this.musicListDetail.id,
    244.       });
    245.     },
    246.     handleDOM(current, last) {
    247.       if (document.querySelector(".musicListDetail")) {
    248.         let tableRows = document
    249.           .querySelector(".musicListDetail")
    250.           .querySelectorAll(".el-table__row");
    251.         // 遍历当前musicList 找到当前播放的index的行进行渲染
    252.         // console.log(tableRows);
    253.         let index = this.musicListDetail.tracks.findIndex(
    254.           (item) => item.id == current
    255.         );
    256.         // console.log(index);
    257.         if (index != -1) {
    258.           // 直接修改dom样式的颜色无效  可能是因为第三方组件的原故
    259.           // 通过引入全局样式解决
    260.           // 将正在播放的音乐前面的索引换成小喇叭
    261.           tableRows[index].children[0].querySelector(
    262.             ".cell"
    263.           ).innerHTML = `
      `      ;
    264.           tableRows[index].children[0]
    265.             .querySelector(".iconfont")
    266.             .classList.add("currentRow");
    267.           tableRows[index].children[2]
    268.             .querySelector(".cell")
    269.             .classList.add("currentRow");
    270.         }
    271.         // 清除上一首的样式
    272.         if (last != -1) {
    273.           let lastIndex = this.musicListDetail.tracks.findIndex(
    274.             (item) => item.id == last
    275.           );
    276.           if (lastIndex != -1) {
    277.             // 将上一个播放的dom的小喇叭换回索引
    278.             tableRows[lastIndex].children[0].querySelector(
    279.               ".cell"
    280.             ).innerHTML = `
      ${
    281.               lastIndex + 1 < 10 ? "0" + (lastIndex + 1) : lastIndex + 1
    282.             }
      `;
  • // 将上一首的类名删掉 小喇叭的html已经被替换了，不需要再还原
  • tableRows[lastIndex].children[2]
  • .querySelector(".cell")
  • .classList.remove("currentRow");
  • }
  • }
  • }
  • },
  • // 点击加载所有音乐的回调
  • loadMore() {
  • if (!this.$store.state.isLogin) {
  • this.$message.error("请先进行登录操作!");
  • return;
  • }
  • // console.log("加载所有音乐");
  • // this.isMore = false;
  • let arr = this.musicListDetail.trackIds.slice(
  • this.musicListDetail.tracks.length
  • );
  • if (arr.length > 100) {
  • arr = arr.slice(0, 100);
  • }
  • // console.log(arr.length);
  • let ids = "";
  • arr.forEach((item) => {
  • ids += item.id + ",";
  • });
  • ids = ids.substr(0, ids.length - 1);
  • // console.log(ids);
  • this.getMusicDetail(ids);
  • },
  • async clickCell(row, column, cell) {
  • // 判断点击的是下载按钮
  • if (cell.querySelector(".icon-download")) {
  • // 请求该歌曲的url
  • console.log(row);
  • let res = await this.$request("/song/url", { id: row.id });
  • console.log(res.data.data[0].url);
  • console.log(res);
  • if (res.data.data[0].url == null) {
  • this.$message.warning("暂时无法获取该资源哦!");
  • return;
  • }
  • // 匹配资源的域名
  • let url = res.data.data[0].url.match(/\http.*?\.net/);
  • // 匹配域名名称，并匹配对应的代理
  • let serve = url[0].match(/http:\/(\S*).music/)[1];
  • if (
  • serve != "/m7" &&
  • serve != "/m701" &&
  • serve != "/m8" &&
  • serve != "/m801"
  • ) {
  • // 没有对应的代理
  • this.$message.error("匹配不到对应的代理,下载失败!");
  • return;
  • }
  • // 截取后面的参数
  • let params = res.data.data[0].url.slice(url[0].length);
  • // console.log(url[0], serve, params);
  • let downloadMusicInfo = {
  • url: serve + params,
  • name:
  • row.name +
  • " - " +
  • row.ar[0].name +
  • "." +
  • res.data.data[0].type.toLowerCase(),
  • };
  • console.log(downloadMusicInfo);
  • this.$store.commit("updateDownloadMusicInfo", downloadMusicInfo);
  • }
  • },
  • },
  • computed: {},
  • watch: {
  • // "$store.state.currentIndex"(currentIndex, lastIndex) {
  • // // 目前没什么好思路 直接操作原生DOM
  • // console.log(currentIndex, lastIndex);
  • // // this.handleTableDOM(currentIndex, lastIndex);
  • // },
  • "$store.state.musicId"(current, last) {
  • this.handleDOM(current, last);
  • },
  • "$store.state.defaultPlay"(current, last) {
  • console.info('defaultPlay2');
  • this.playAll();
  • },
  • },
  • filters: {
  • showDate(value) {
  • // 1、先将时间戳转成Date对象
  • const date = new Date(value);
  • // 2、将date进行格式化
  • return formatDate(date, "yyyy-MM-dd");
  • },
  • handleNum,
  • },
  • created() {},
  • async mounted() {
  • await this.getMusicListDetail();
  • this.$nextTick(() => {
  • // 判断是否和上一次打开的歌单相同
  • if (this.$route.params.id == this.$store.state.musicListId) {
  • this.handleDOM(this.$store.state.musicId);
  • }
  • });
  • },
  • };
  • script>
  • <style scoped>
  • .musicListDetail {
  • overflow-y: scroll;
  • }
  • .listInfo {
  • display: flex;
  • padding: 25px 15px;
  • align-items: center;
  • }
  • .listAvatar {
  • width: 150px;
  • height: 150px;
  • overflow: hidden;
  • border-radius: 10px;
  • margin-right: 15px;
  • position: relative;
  • }
  • .listAvatar::after {
  • content: "";
  • position: absolute;
  • height: 100%;
  • width: 100%;
  • left: 0;
  • top: 0;
  • background: url("../../assets/img/imgLoading.png") no-repeat;
  • background-size: contain;
  • z-index: -1;
  • }
  • .listAvatar img {
  • width: 100%;
  • }
  • .right {
  • width: calc(100% - 200px);
  • }
  • .title {
  • display: flex;
  • align-items: center;
  • }
  • .titleTag {
  • font-size: 12px;
  • color: #ec4141;
  • border: 1px solid #ec4141;
  • padding: 1px 2px;
  • border-radius: 2px;
  • margin-right: 5px;
  • transform: scale(0.8);
  • }
  • .titleContent {
  • font-size: 20px;
  • font-weight: 600;
  • color: #373737;
  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;
  • width: 90%;
  • }
  • .user {
  • display: flex;
  • align-items: center;
  • margin-top: 8px;
  • font-size: 12px;
  • }
  • .userAvatar {
  • height: 25px;
  • width: 25px;
  • margin-right: 8px;
  • }
  • .userAvatar img {
  • width: 100%;
  • border-radius: 50%;
  • }
  • .userName {
  • color: #6191c2;
  • margin-right: 8px;
  • cursor: pointer;
  • }
  • .createTime {
  • transform: scale(0.9);
  • }
  • .buttons {
  • margin: 8px 0 0 -5px;
  • display: flex;
  • }
  • .buttonItem {
  • font-size: 12px;
  • padding: 8px 15px;
  • border: 1px solid #ddd;
  • border-radius: 20px;
  • transform: scale(0.9);
  • }
  • .buttonItem i {
  • font-size: 12px;
  • margin-right: 3px;
  • transform: scale(0.9);
  • }
  • .playAll {
  • background-color: #ec4141;
  • color: white;
  • }
  • .tags {
  • margin: 8px 0 0 -30px;
  • display: flex;
  • font-size: 12px;
  • transform: scale(0.9);
  • }
  • .tagItem {
  • color: #6191c2;
  • margin-right: 5px;
  • }
  • .otherInfo {
  • margin: 5px 0 0 -30px;
  • display: flex;
  • font-size: 12px;
  • transform: scale(0.9);
  • }
  • .musicNum {
  • margin-right: 13px;
  • }
  • .desc {
  • margin: 5px 0 0 -30px;
  • font-size: 12px;
  • transform: scale(0.9);
  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;
  • }
  • .musicList {
  • margin: -15px 15px 0;
  • }
  • .page {
  • width: 100%;
  • text-align: center;
  • padding-bottom: 20px;
  • }
  • .placeholder {
  • width: 100%;
  • height: 50px;
  • }
  • .loadMore {
  • width: 100%;
  • height: 50px;
  • font-size: 12px;
  • color: #aaa;
  • text-align: center;
  • line-height: 50px;
  • transform: scale(0.9);
  • }
  • .red {
  • color: #ec4141;
  • }
  • .commentList /deep/ .el-loading-spinner {
  • top: 40px;
  • }
  • .tips {
  • font-size: 14px;
  • margin: 30px 0;
  • text-align: center;
  • }
  • style>

    • 四、总结

    项目功能完整，后续可能将不断升级。

    关注作者，及时了解更多好项目！

    作者主页也有更多好项目分享！

    获取源码或如需帮助，可通过博客后面名片+作者即可！

     其他作品集合（主页更多）：

    1. 《uni-app小程序，基于vue实现电商商城》
    2. 《uni-app基于vue实现商城小程序》
    3. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui实现请假考勤系统》
    4. 《vue+element实现电商商城礼品代发网，商品、订单管理》
    5. 《vue+vant2完美实现香奈儿移动端商城网站》
    6. 《vue+elementui实现联想购物商城，样式美观大方》
    7. 《vue+elementui实现英雄联盟道具城》
    8. 《vue+elementui实现app布局小米商城，样式美观大方，功能完整》
    9. 《vue完美模拟pc版快手，实现短视频，含短视频详情播放》
  • 相关阅读:
    智云通CRM：读懂客户的五种“成交信号”，恰到好处地收单？
    【CSS】使用 CSS 实现一个宽高自适应的正方形
    uniapp获取视频第一帧作为封面图
    git rebase -i 详解
    虹科新闻 | 虹科电子与 Mend 正式建立合作伙伴关系
    untitle
    驱动开发 基于gpio子系统来实现对stm32开发板的led亮灭实现，附加定时器实现一秒亮灭（软件：vscode）
    worthington丨worthington用于细胞收获的胰蛋白酶
    Spark -- Spark3.2.2集成Hudi 0.11.1并同步Hive 3.1.3
    设计模式-代理模式-静态代理和动态代理在Java中的使用示例
  • 原文地址：https://blog.csdn.net/lucky_fang/article/details/134438401