1 github安装qqmusicapi
1.1 项目目录结构是这样的
1.2 npm install npm start 以后出现这样的结果就是运行成功
2 npm create vite@latest 创建我的一个vue项目
3 运行看看
- cd vue_part
- npm install
- npm run dev
4 创建src/api/axios.js 写一个简单的看看先
- 4.1 创建.env 设置环境变量
- VITE_API_BASE_URL=http://127.0.0.1:3300
- 4.2 axios.js代码
import axios from 'axios'
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 1000000
})
// axios 请求拦截器
request.interceptors.request.use(
(config)=>{
return config;
},
(e)=>{
return Promise.reject(e);
}
);
// axios 响应拦截器
request.interceptors.response.use(
(res)=>{
return res.data;
},
(e)=>{
return Promise.reject(e);
}
);
export default request;
5 创建一个search.vue 试试能不能请求成功
- 5.1 sraech.vue
<template>
<div class="search-container" style="background: #f9f9f9">
<input type="text" v-model="searchQuery" placeholder="搜索歌曲" />
<button @click="performSearch">搜索</button>
<div v-if="searchResults">
<h3>搜索结果</h3>
<ul>
<li v-for="song in searchResults" :key="song.id">
{{ song.name }} - {{ song.artist }}
</li>
</ul>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import request from '../api/axios.js'; // 确保路径正确
const searchQuery = ref('');
const searchResults = ref(null);
const performSearch = async () => {
const response = await request.get('/search', {
params: {
query: searchQuery.value
}
});
searchResults.value = response.data;
//输出看看
console.log(searchResults.value);
};
</script>
<style scoped>
.search-container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
- 5.2 App.vue
<script setup>
import { ref, onMounted } from 'vue';
import Search from "./views/Search.vue";
</script>
<template>
<Search />
</template>
<style scoped>
</style>
- 5.3 yarn run dev
- 输入点搜索试试看
- 出现错误'
- 5.4 解决办法:cors中间键
- cd .. 返回qqmusicapi目录
- npm install cors
- 在app.js文件里面添加: const cors = require('cors');app.use(cors()); 问题就解决了
6 传参错误?
- 6.1
- 6.2
- 6.3 使用formdata来规范参数传递,好吧也不需要,但是学会了可以使用formData
- lg:感兴趣可以看看:【js】FormData作用和用法_js formdata-CSDN博客
- 6.4 规范一下参数的传递,使用键值对参数就可以了
const performSearch = async () => {
// let params = new FormData();
// params.append('key', searchQuery.value);
const response = await request.get('/search', {
params:{
key: searchQuery.value
}
});
searchResults.value = response.data;
//输出看看
console.log(searchResults.value);
};
- 6.5 查看效果:但是对比文档的话不知道pageNo有啥作用好像1 和 2 没区别啊
- 嗷嗷嗷我懂了是指第几页的数据,对比qq音乐搜索就可以发现了
- 6.6 额不下
- 6.6 算是运行起来了,那接下来开始封装api,然后对比文档写好一个搜索页面
- 6.7 明确需求,我是只打算做一个页面的,用来指定一个用户,先获得该用户的歌单,然后在该用户的歌单里面根据歌词搜索想听的歌是哪首,后续其他内容再说吧!
- 6.8 额封装好像多事了,但是为了美观还是封装一下?
7 翻阅文档
- 7.1 修改以后
let params = {'key': searchQuery.value, pageNo: 3, pageSize: 30};
console.log(params);
// const response = await request.get('/search', {
// params:{
// key: searchQuery.value,
// pageNo: 3,
// pageSize: 30
// }
// });
const response =await Search(params);
searchResults.value = response.data;
//输出看看
console.log(searchResults.value);
};
- 7.2 感觉蛮冗余的,新建的api/search.js 用来放我的搜索界面的api
import request from "../api/axios";
export const Search = (data) => {
return request.get("/search", {
params:{
key:data.key,
pageNo:data.pageNo,
pageSize: data.pagesize
},
});
};
- 7.3 试试先能不能返回大量的歌单
- 7.4 看了看qq音乐的页面里面都是可以直接搜索用户的,但是登录以后才能看见
- 7.5 所以登录貌似是必须做的
