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

news2024/9/19 15:18:40

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属性，出现文字内容，可以使用如下方式：