VUE---爬虫播放器(三)---页面布局--vue3

朴灿烈づ我的快乐病毒、 2022-12-27 07:43 171阅读 0赞

> 目前代码已经基本写完,还有细节没有处理，除配置文件外，一共600多行代码效果如下  
> ![在这里插入图片描述][20201208215734918.gif]
> 
> vue3中 beforeDestroy变成了beforeUnmount

# 调试 #

使用火狐浏览器 F12  
![在这里插入图片描述][20201208221824408.png]  
然后页面就会出现这个  
![在这里插入图片描述][20201208221842755.png]

# 页面布局 #

## 搜索栏 ##

使用vant3的搜索 [vant3 search 文档入口][vant3 search]

<van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

![在这里插入图片描述][20201208221452961.png]

## 歌曲列表 ##

使用了vant3的tabs标签页 [vant3 tabs 文档入口][vant3 tabs]  
使用在单歌和喜欢这里  
![在这里插入图片描述][20201208221248766.gif]  
vant3 tabs支持粘性布局和吸顶 可以拿来用 对我们就是cv工程师  
![图片来自网络][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]当没有内容的时候展示空状态 使用vant3空状态 [vant3 空状态][vant3]

<van-empty description="我是你的小可爱~" />

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

## 底部歌曲简略 ##

默认没有加载 或者加载中都用vant3 图片组件的默认猫咪  
让这个猫猫所在的图片不停的旋转  
绿色块块将写切割功能  
![在这里插入图片描述][20201208222029310.gif]

旋转样式如下

.transr {
      float: left;
      animation: rotate 10s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

## 歌曲播放详细页面 ##

使用scroll来实现歌词滚动  
底部的图像滚动和上面的实现方法一样  
左上角图标返回歌单  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

<van-icon name="arrow-left" color="#42b983" style="position: fixed;top:0;left:0;z-index:9999" size="2rem" @click="isPlays = false" />
        <div class="transfr" id="gunDoc">
          <p v-for="item in docs" :key="item" style="color: white">
            <span :class="{ gop: item.time === isP }">{
       { item.doc }}</span>
          </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
        </div>
        <div style="position: fixed;bottom: 0px;width: 100%">
          <van-image round width="5rem" height="5rem" :src="imgUrl" id="img" class="trans" />
          <van-slider v-model="value" active-color="#54967A" style="width: 100%" bar-height="8px" >
            <template #button>
              <div class="custom-button">{
       { value }}</div>
            </template>
          </van-slider>
    
          <van-icon :name="isPlay" size="4rem" style="position: absolute;left: 41%;top: 10px" color="#E3EEBC" @click="playOrpause" />
        </div>

:class="\{ gop: item.time === isP \}"动态绑定样式 来改变当前歌词样式  
由于歌词是带有时间戳的 可以根据时间来判断当前歌词 并让它自己滚动

### 获取歌词小插曲 ###

本系列上个文章只列了找到的几个接口 [传送门][Link 1]  
歌词接口也找到了，但是需要伪造referer  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]  
**GET**  
https://c.y.qq.com/lyric/fcgi-binfcg\_query\_lyric\_new.fcg?songmid=歌曲id和播放Id不同，为获取歌曲详情里的songid  
需要伪造referer为"https://y.qq.com/portal/player.html"

获取的结果为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]  
看到这串字母，首先想到的是base64加密  
我们可以拿到在线base64解码去尝试下 网上随便找个都能解  
得到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]  
js处理策略为  
res为请求返回结果

decodeURIComponent(
              escape(atob(JSON.parse(res.data.slice(18, -1)).lyric))
            );

后续会推出  
  
每个平台的详细搭建过程  
  
前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[20201208215734918.gif]: /images/20221120/a91a0520e98e42b7b9ed3abff20ed6d2.png
[20201208221824408.png]: /images/20221120/5706f47dfe294a78802c086c3bbb73a7.png
[20201208221842755.png]: /images/20221120/6ceff063ff754af59084efb9c7452e81.png
[vant3 search]: https://vant-contrib.gitee.io/vant/next/#/zh-CN/search
[20201208221452961.png]: /images/20221120/5cc5aa50419e4cb9b2d97b285208edc0.png
[vant3 tabs]: https://vant-contrib.gitee.io/vant/next/#/zh-CN/tab
[20201208221248766.gif]: /images/20221120/1a5aec7a56144a148b5c8896bda55f4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020120822163076.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[vant3]: /images/20221120/e3c525a1e1f147938b0bf49c993102e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221120/94affd080410489ca8766619d6641b53.png
[20201208222029310.gif]: /images/20221120/08f1c3d225e4408ca40f6680befbbec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221120/73c9fc489ef54beebe62839d703cf956.png
[Link 1]: https://blog.csdn.net/qq_42027681/article/details/110733250
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221120/62c9f2e401374700a18038e6f8d500e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: /images/20221120/193b170df332450d917b5a391a0a8d2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: /images/20221120/fdf66d22832f44ce93918faaa88f7014.png
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1be8ffd819b448d6b285e0ec3d0b3555.png