【音乐App】—— Vue-music 项目学习笔记：搜索页面开发

最新推荐文章于 2022-03-24 16:53:13 发布

原创

最新推荐文章于 2022-03-24 16:53:13 发布 · 958 阅读

6 ·

CC 4.0 BY-SA版权

本文详细记录了使用Vue开发音乐App搜索页面的过程，包括search-box组件开发、数据获取、热搜功能实现、搜索数据获取及检索、上拉加载、二级路由跳转、错误处理等多个步骤，涉及Vue组件化开发、数据处理、Vuex状态管理以及异步数据处理等技术。

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

【音乐App】—— Vue-music 项目学习笔记：搜索页面开发

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。


搜索歌手歌曲	搜索历史保存

一、搜索页面布局

search-Box组件开发

<div class="search-box">
   <i class="icon-search"></i>
   <input class="box" v-model="query" :placeholder="placeholder"/>
   <i class="icon-dismiss" v-show="query" @click="clear"></i>
</div>

其中：placeholder和其他页面公用，所以，是props传入的
课程中老师卖了个关子：为什么在created的时候去watch收缩框value的变化呢？

export default {
    props: {
       placeholder: {
           type: String,
           default: '搜索歌曲、歌手'
       }
   },
   data() {
       return {
           query: ''
       }
   },
   methods: {
       clear() {
           this.query = ''
       },
       setQuery(query) {
           this.query = query
       }
   },
   created() {
       this.$watch('query', (newQuery) => {
           this.$emit('query', newQuery)
       })
   }
}

search数据获取及应用

数据获取就是普通的jsonp请求抓取，同前面的页面一样

data中维护一个数据
```
hotKey: []
```
抓取到数据后取前10个给hotKey赋值
```
this.hotKey = res.data.hotkey.slice(0, 10)
```

热搜功能开发

拿到数据后开始渲染热搜页面结构

<div class="shortcut-wrapper">
    <div class="shortcut">
         <div class="hot-key">
               <h1 class="title">热门搜索</h1>
               <ul>
                     <li @click="addQuery(item.k)" class="item" v-for="(item, index) in hotKey" :key="index">
                             <span>{
        
        {item.k}}</span>
                    </li>
               </ul>
         </div>
    </div>
</div>

给搜索项添加点击事件，将内容传给子组件select-box的query中

使用search-box的refs来调用他内部的方法

addQuery(query) {
    this.$refs.searchBox.setQuery(query)
}

同时，子组件search-box.vue中需要暴露一个setQuery()
```
setQuery(query) {
    this.query = query
}
```

二、搜索页面suggest组件开发

搜索数据的获取及一次检索功能实现

QQ音乐搜索数据的获取也禁止跨域，需要通过后端配置Webpack强制修改请求头，返回json数据

search组件中监听search-box的query的变化

<search-box ref="searchBox" @query="onQueryChange"></search-box>

data中维护一个数据
```
query: ''
```

如果query发生改变，就赋值给query

onQueryChange(query){
    this.query = query
}

这时就把query传给suggest组件
```
<suggest :query="query"></suggest>
```

suggest组件依赖获取到的query，发送请求检索对应内容

定义数据接口时，有四个值是变化的，所以需要传入四个参数：

const perpage = 20 //抓取数据一页有多少数据

search() {
   search(this.query, this.page, this.showSinger, perpage).then((res) => {
       //console.log(res)
       if(res.code === ERR_OK) {
          this.result = this._genResult(res.data)
           //console.log(this.result)
       }
   })
}

直接拿到的数据是不理想的，需要进行处理

处理后的数据是一个数组，其中包含两个对象：一个歌手、一个歌曲列表

_genResult(data) {
    let ret = []
    if(data.zhida && data.zhida.singerid) {
       //使用es6对象扩展运算符...把两个对象添加到一个对象上
       ret.push({...data.zhida, ...{type: TYPE_SINGER}})
    }
    if(data.song){
       ret = ret.concat(data.song.list)