Vue音乐--搜索页面03_热门搜索组件

大概步骤:

在这里插入图片描述

目标效果

在这里插入图片描述


三、新建热门搜索关键词组件的数据获取和布局

  • 要点

    • QQ音乐移动端网页抓取热门搜索的关键词数据
    • 截取关键词数据数组的前10个
    • 对数据列表布局为圆角边框样式
    • 点击热门搜索关键词,关联到输入框中
  • (一)抓取热门搜索关键词数据

在这里插入图片描述
在这里插入图片描述
↓ api - ->search.js

import jsonp from '@/common/js/jsonp'	//引入jsonp模块
import {
   commonParams,object} from './config'	//引入公共hash和自定义回调名

//获取热门搜索关键词数据
export function getHotKey(){
   
	//自己判断截取出url前半段
	const urlfront = 'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg'

	//把hash做成对象,es6创建对象并赋值,
	//hash获取不了,要手动输入所有,把对象分2类,固定和不固定
	
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以指导你如何用Vue3仿写网易云音乐页面。首先,你需要安装Vue CLI并创建一个新的Vue项目。你可以使用以下命令安装Vue CLI: ``` npm install -g @vue/cli ``` 然后,你可以使用以下命令创建新的Vue项目: ``` vue create netease-cloud-music ``` 接下来,你需要安装网易云音乐API。你可以使用以下命令安装: ``` npm install --save neteasecloudmusicapi ``` 然后,你可以使用以下命令安装Element Plus UI库: ``` npm install element-plus --save ``` 接下来,你需要创建网易云音乐的UI。你可以使用Element Plus或者其他UI库来创建UI组件。这里为了方便,我们选择使用Element Plus。 在这个过程中,你需要仿写网易云音乐的首页、歌单页面和歌曲播放页面。你可以根据网易云音乐的UI设计来创建UI组件,并使用Vue Router来实现路由。 具体的实现可以参考以下代码示例: ```html <template> <div class="home"> <div class="header"> <div class="logo"> <img src="./assets/logo.png" alt="logo"> </div> <div class="search"> <el-input placeholder="搜索音乐、歌词、电台"></el-input> </div> <div class="nav"> <el-menu mode="horizontal"> <el-menu-item index="1">发现音乐</el-menu-item> <el-menu-item index="2">我的音乐</el-menu-item> <el-menu-item index="3">朋友</el-menu-item> <el-menu-item index="4">商城</el-menu-item> <el-menu-item index="5">音乐人</el-menu-item> <el-menu-item index="6">下载客户端</el-menu-item> </el-menu> </div> <div class="user"> <el-dropdown trigger="click"> <span class="el-dropdown-link"> <img src="./assets/avatar.jpg" alt="avatar"> <i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>我的主页</el-dropdown-item> <el-dropdown-item>我的消息</el-dropdown-item> <el-dropdown-item>账号设置</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> <div class="banner"> <el-carousel trigger="click" indicator-position="outside"> <el-carousel-item v-for="banner in banners" :key="banner.imageUrl"> <img :src="banner.imageUrl" alt="banner"> </el-carousel-item> </el-carousel> </div> <div class="recommend"> <h2>推荐歌单</h2> <div class="playlists"> <div class="playlist" v-for="playlist in playlists" :key="playlist.id"> <div class="cover"> <img :src="playlist.coverImgUrl" alt="cover"> <div class="playcount"> <i class="el-icon-headset"></i> <span>{{ playlist.playCount }}</span> </div> </div> <div class="name">{{ playlist.name }}</div> </div> </div> </div> </div> </template> <script> import axios from 'axios'; import { ElCarousel, ElCarouselItem, ElInput, ElMenu, ElMenuItem, ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'; export default { components: { ElCarousel, ElCarouselItem, ElInput, ElMenu, ElMenuItem, ElDropdown, ElDropdownItem, ElDropdownMenu, }, data() { return { banners: [], playlists: [], } }, mounted() { axios.get('api/banners') .then(response => { this.banners = response.data; }) .catch(error => { console.log(error); }); axios.get('api/playlists') .then(response => { this.playlists = response.data; }) .catch(error => { console.log(error); }); } } </script> <style> .home { margin: 0 auto; width: 1200px; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .logo img { height: 32px; } .search { width: 400px; } .nav { flex: 1; } .user img { height: 32px; margin-right: 8px; } .banner { margin-bottom: 20px; } .recommend { margin-bottom: 20px; } .playlists { display: flex; flex-wrap: wrap; } .playlist { width: 200px; margin-right: 20px; margin-bottom: 20px; } .cover { position: relative; width: 200px; height: 200px; overflow: hidden; } .cover img { width: 100%; height: 100%; } .playcount { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; } .playcount i { margin-right: 8px; } </style> ``` 这是一个简单的Vue组件,仿写了网易云音乐的首页。你需要将API请求的URL替换为实际的网易云音乐API URL,并根据API返回的数据来显示歌单和轮播图。另外,你也需要在Vue项目中定义路由和UI组件来实现完整的网易云音乐页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值