React16.13.1网抑云实战（第二周）| 播放条组件、路由配置、Api项目双部署

项目源码地址,第一时间更新 github.com/yayxs/Netea…

wiki 地址以及Api接口说明 github.com/yayxs/Netea…

前情提要

读读评论

项目和其用到的API 已经部署上线，详细请看 wiki 文档，感谢评论

感谢用户 @OldMan23837

系列文章

React16.13.1网抑云实战（第一周）| axios封装、轮播图实现、alias别名

第二周成果展示

完成部分

首先封装几个公用的组件，主要工作量在底部的播放控制条
跑通react-router-dom react-router-config 的配置
Api 接口部署上线，项目部署上线

底部核心播放bar

底部最核心的功能就是对音乐的播放，还有就是进度条，对音乐的播放，利用 HTML5 新增的标签 ,动态的改变 SRC 属性

audioRef.current.src = getAudioSrc("442869203");
    // 开始播放
    setNowIsPaly(false);
    audioRef.current
      .play()
      .then((res) => {
        setNowIsPaly(true);
      })
      .catch((err) => {
        setNowIsPaly(false);
      });

红色滑动条

利用antd 的 Slider滑动输入条，修改其样式

  .pbar {
        width: 493px;
        .ant-slider {
          padding: 0;
          margin: 0;
          width: 493px;
          height: 9px;
          .ant-slider-rail {
            width: 493px;
            border-radius: 2px;
            height: 9px;
            background-color: #535353;
          }
          .ant-slider-track {
            height: 9px;
            background-color: #c70c0c;
          }
          .ant-slider-step {
            border-radius: 2px;
            height: 9px;
          }
          .ant-slider-handle {
            width: 22px;
            height: 24px;
            margin-top: -7px;
            background: url("../../../assets//images/sprite_icon.png") 0 -250px;
            border: none;
          }
        }
        .time {
          position: absolute;
          top: 21px;
          right: 215px;
          color: #797979;
          span {
            color: #a1a1a1;
          }
          text-shadow: 0 1px 0 #121212;
        }
      }

注意上文我们引入背景图片的方式 通过 background: url("../../../assets/images/sprite_icon.png") 0 -250px;

这是我们使用 sass 但是使用 styled-components 就不能这样直接引入了，否则会找不到，可通过

import arrowImg from "../../../../../../assets/images/arrow_banner_sprite.png";

然后使用的时候

background: url(${arrowImg});

还有一点，关于鼠标滑过的高亮效果其实是精灵图的位置发生了变化

&:hover {
     background-position: 0 -360px;
    }

路由配置

路由配置方案，采用 react-router-config 这也是官方推荐的静态路由配置方案，具体的路由表见项目 @/router/routesConfig.js

从页面来分析的话

// 发现音乐 : 推荐 排行榜 歌单 主播电台 歌手 新碟上架
// 我的音乐 :
// 朋友 :
// 商城 :
// 音乐人
// 下载客户端

     {
        component: YYAlbumPage,
        path: "/discover/album",
      },
    ],
  },
  // 我的音乐
  {
    component: YYMyPage,
    path: "/my",
  },
  // 朋友
  {
    component: YYFriendPage,
    path: "/friend",
  },
  // 下载客户端
  {
    component: YYDownloadPage,
    path: "/download",
  },

项目部署上线

Api接口

关于项目中所用到的网易云的接口 已经完成部署 短时间不会下线，你也可以直接使用基本的地址是 http://101.201.148.180:3000 (项目部署在 3000端口)

请求示例参考

项目的部署

项目目前通过手动部署的方式，已经部署在阿里云服务，有关 nginx 相关的配置以及一些常用的配置可以看 Nginx | 前端也应晓得常用Nginx命令及配置

不过打包的时候如果遇到一些问题，比如 webpack的一些配置问题。可能需要注释掉

// config/webpack.config.js

// importWorkboxFrom: "cdn",

具体见文末推荐阅读

关联阅读

developers.google.com/web/tools/w…

最后

个人项目，下班时间写，更新慢见谅。正如上文所说，已经部署上线，请关注 http://101.201.148.180/

感谢评论关注 star 的铁汁儿，期待在下一次的读读评论见到你
文档中的外链比较多，见谅，因为是之前简单写过，就不再写一遍呢，在写就是深入了 over

彩蛋

精灵图篇

插件篇

上次忘了说了，如果使用 styled-components 这个方案处理样式的话，需要装个插件最好了

React16.13.1网抑云实战 （第二周）| 播放条组件、路由配置、Api项目双部署