基于vue创建的悦听音乐盒子

最新推荐文章于 2023-01-12 16:17:00 发布

要！

最新推荐文章于 2023-01-12 16:17:00 发布

阅读量2.2k

点赞数

分类专栏： it技术交流文章标签： vue.js visual studio code

本文链接：https://blog.csdn.net/textare_/article/details/106955959

版权

本文介绍了一个基于Vue.js的音乐盒子项目，详细讲述了如何利用Vue的核心特性实现界面展示、搜索音乐、播放控制等功能。项目适用于熟悉HTML、布局和Vue基础知识的开发者，通过实践加深对Vue框架的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

本次项目实验环境：HBuilder或vs code即可
相关知识内容：基本的html知识，布局知识，vue知识以及包含接口ajax的应用

效果图

1.界面
在这里插入图片描述
2.搜索音乐

3.播放音乐

4.查看音乐进度条

5.查看评论

6.播放mv

上述主要实现的就是这些效果了，完成最基本的音乐盒子功能。
接下来是代码实现功能。

1.主页设计player.html布局设计

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="img/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='song_wrapper'>
          <ul class="song_list">
            <li v-for="item in musicList">
              <!-- 点击放歌 -->
              <a href="javascript:;" @click='playMusic(item.id)'></a>
              <b>{
   {
   item.name}}</b>
              <span>
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
              </span>
            </li>

          </ul>
          <img src="img/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="img/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="img/disc.png" class="disc autoRotate" />
          <img :src="coverUrl==''?'./img/cover.png':coverUrl" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name">{
   {
   item.user.nickname}}</dd>
              <dd class="detail">
                {
   {
   item.content}}
              </dd>
            </dl>

最低0.47元/天解锁文章