06、Vue简易版网易云——首页数据渲染

网易云——首页数据渲染"/>

06、Vue简易版网易云——首页数据渲染

1、前置准备

为了方便网络请求的统一管理，我们先会封装一个网络请求。步骤如下：

1、在src下新建如下目录和文件

2、在request.js中封装一个网络请求

import axios from "axios";
// 设置请求的根路径
axios.defaults.baseURL = "http://localhost:9000"
export default axios;

2、推荐音乐数据请求和渲染

1、静态页面铺设

1、静态效果图

2、铺设步骤

1、 在main.js中导入vant组件库的layout布局和图片的组件

import { Col, Row } from 'vant';
import { Image as VanImage } from 'vant';
Vue.use(VanImage);
Vue.use(Col);
Vue.use(Row);

2、在src/views/home/index.vue中进行页面渲染

<template><div><p class="title">推荐歌单</p><van-row><van-col span="8"><van-imagewidth="100%"height="3rem"fit="cover"src=".jpeg"/><p class="song_name"></p></van-col></van-row></div>
</template><script>
export default {};
</script><style lang="less" scoped>
/* 标题 */
.title {padding: 0.266667rem 0.24rem;margin: 0 0 0.24rem 0;background-color: #eee;color: #333;font-size: 15px;
}
/* 推荐歌单 - 歌名 */
.song_name {font-size: 0.346667rem;padding: 0 0.08rem;margin-bottom: 0.266667rem;word-break: break-all;text-overflow: ellipsis;display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2; /** 显示的行数 **/overflow: hidden; /** 隐藏超出的内容 **/
}
</style>

2、动态数据请求及渲染

在动态数据请求之前我们要先打开本地的后台项目，在之前的笔记中已经给出了，有问题可以私信，这里不详细解释。

1、 在src/api/home.js文件中封装请求推荐音乐的方法

// 导入封装好的网络请求
import request from '@/utils/request'
/*** 用于获取首页最新音乐的请求* @param {外界传入的参数} params * @returns */
export const recommendMusic = params => request({url: '/personalized',params
})

2、 在src/api/index.js中导出封装好的api

import {recommendMusic
} from '@/api/home.js'/*** 导出获取推荐音乐的api*/
export const recommendMusicAPI = recommendMusic;

3、在src/views/home/index.vue调用api进行数据获取

//此前代码省略。。。。。
<script>
// 导入推荐音乐的api
import { recommendMusicAPI } from "@/api/index.js";
export default {// 数据对象data() {return {// 推荐音乐数据列表recommendMusicList: [],};},// 在vue生命周期的创建阶段异步获取数据async created() {const recommendMusic = await recommendMusicAPI({// 参数限定，获取6条数据limit: 6,});// 将获取到的数据赋值给推荐音乐数据列表this.recommendMusicList = recommendMusic.data.result;console.log(this.recommendMusicList);},
};
</script>
//此后代码省略。。。。。

4、 在src/views/home/index.vue利用v-for渲染数据

-->
<template><div><p class="title">推荐歌单</p><van-row gutter="6"><van-col span="8" v-for="item in recommendMusicList" :key="item.id"><van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" /><p class="song_name">{{ item.name }}</p></van-col></van-row></div>
</template>

5、效果图

3、最新音乐数据请求和渲染

1、静态页面铺设

1、静态效果图

2、铺设步骤

1、在main.js中导入需要使用的组件

import { Icon } from 'vant';
import { Cell } from 'vant';
Vue.use(Cell);
Vue.use(Icon);

2、在src/views/home/index.vue中进行页面渲染

<template><div><!--推荐音乐 --><p class="title">推荐歌单</p><van-row gutter="6"><van-col span="8" v-for="item in recommendMusicList" :key="item.id"><van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" /><p class="song_name">{{ item.name }}</p></van-col></van-row><!-- 最新音乐 --><p class="title">最新音乐</p><van-cell title="单元格" label="描述信息"><template #right-icon><van-icon name="play-circle-o" size="0.8rem" /></template></van-cell></div>
</template>

2、动态数据请求及渲染

1、 在src/api/home.js文件中封装请求推荐音乐的方法

/*** 用于获取最新音乐* @param {外界传入的参数} params * @returns*/
export const newMusic = params => request({url: '/personalized/newsong',params
})

2、 在src/api/index.js中导出封装好的api

import {newMusic
} from './home.js'/*** 导出最新音乐的api*/
export const newMusicAPI = newMusic

3、在src/views/home/index.vue调用api进行数据获取

<script>
// 导入推荐音乐的api
import { recommendMusicAPI, newMusicAPI } from "@/api/index.js";
export default {// 数据对象data() {return {// 推荐音乐数据列表recommendMusicList: [],//最新音乐数据列表newMusicList: [],};},// 在vue生命周期的创建阶段异步获取数据async created() {//省略获取推荐音乐的代码const newMusic = await newMusicAPI({limit: 20,});this.newMusicList = newMusic.data.result;},
};
</script>

4、 在src/views/home/index.vue利用v-for渲染数据

<template><div><!--推荐音乐 --><p class="title">推荐歌单</p><van-row gutter="6"><van-col span="8" v-for="item in recommendMusicList" :key="item.id"><van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" /><p class="song_name">{{ item.name }}</p></van-col></van-row><!-- 最新音乐 --><p class="title">最新音乐</p><van-cell:title="item.name":label="item.name + ' --- ' + item.song.artists[0].name"v-for="item in newMusicList":key="item.id"><template #right-icon><van-icon name="play-circle-o" size="0.8rem" /></template></van-cell></div>
</template>

5、效果图

总结：本小节主要对首页的布局进行了设计，同时动态的请求了后台的数据。主要掌握以下几点
1、如何封装一个网络请求
2、如何调用封装好的网路请求获取后台数据
3、如何使用vant组件进行布局
4、如何将获取到的数据动态渲染到页面上