网易云——首页数据渲染"/>
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、如何将获取到的数据动态渲染到页面上
更多推荐
06、Vue简易版网易云——首页数据渲染
发布评论