vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染

vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染！今天和大家分享一下，人气推荐栏目的前端页面如何渲染内容。

经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。接下来就是模仿流程操作一遍就行了。

1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。

接口地址：“获取-人气推荐 - 柴柴老师的项目接口”

***

如图，地址信息和调用的方式已经清楚了。

返回的类型是json格式。

对象的具体内容也有了。我们就可以开始编辑代码了。

从index.vue可以看见，我们这一次编辑的组件文件名称，叫做：“HomeHot”

在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。

<script setup>
import HomePanel from './HomePanel.vue'
import { findHotAPI } from '@/apis/home'
import { ref,onMounted} from 'vue'
const hotList = ref([])
const getHotList = async () => {const res = await findHotAPI()hotList.value = res.result
}
onMounted(()=>getHotList())</script><template><!--人气推荐栏目--><HomePanel title="人气推荐" sub-title="人气爆款 不容错过"><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img v-img-lazy :src="item.picture" alt=""><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 426px;li {width: 306px;height: 406px;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.desc {color: #999;font-size: 18px;}}
}
</style>

以上内容就是，已经写好的，HomeHot的模板代码了。

里面可以看见，顶部是脚本，中间是模板，底部是样式。内容比较简单。不再解释了。不懂的可以留言。

我们自定义了一个方法，暴露出去后，在子组件内就可以调用了。

<script setup>
import HomePanel from './HomePanel.vue'
import { findHotAPI } from '@/apis/home'
import { ref,onMounted} from 'vue'
const hotList = ref([])
const getHotList = async () => {const res = await findHotAPI()hotList.value = res.result
}
onMounted(()=>getHotList())</script>

因为这次都是pinia插件，来管理状态对象管理的技术，所以比较省心了。除了必要的import导入之外，剩余的就是直接调用了，赋值了。最后提醒别忘了，引入生命周期函数onMounted。执行我们的函数即可完成数据的动态渲染和赋值。

<template><!--人气推荐栏目--><HomePanel title="人气推荐" sub-title="人气爆款 不容错过"><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img v-img-lazy :src="item.picture" alt=""><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul></HomePanel>
</template>

如图，我们已经做好了，列表的渲染赋值。注意和接口返回的json对象的字段名保持一致。否则会报错。找不到该参数。

我们图片加载使用了懒加载。v-img-lazy。

题外话：

如果你想让图片的alt属性，出现文字内容，可以使用如下方式：