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

 

亲自测试了,可以正常的。不会报错。动态完成了赋值。

 

这种alt属性标签加文字内容,是可以满足SEO优化排名需求的,有助于蜘蛛爬虫抓取图片的时候进行分类存档。

好了,本次内容就分享到这里。下一期内容和大家分享,第三个栏目的渲染“热门品牌”

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

golang开发环境搭建与踩坑记录

文章目录 一、安装下载1、go环境2、ide 二、基本使用1、运行2、结构体与方法函数指针3、闭包4、指针5、map6、接口7、异常 三、包管理1、go mod语法2、项目下载所有依赖 一、安装下载 1、go环境 下载地址&#xff1a;https://go.dev/dl/ 或者&#xff1a;https://golang.goog…

python的with语句

1.with语句的作用 在 Python 中&#xff0c;with 语句用于创建一个上下文管理器&#xff0c;以更简洁和安全的方式管理资源。 其主要优点是可以确保在代码块执行完毕后&#xff0c;相关资源能够被正确释放或清理&#xff0c;即使在代码块内部发生了异常。 以下是一个使用 with…

【动态规划】力扣2266.统计打字方案数

Alice 在给 Bob 用手机打字。数字到字母的 对应 如下图所示。在这里插入图片描述 为了 打出 一个字母&#xff0c;Alice 需要 按 对应字母 i 次&#xff0c;i 是该字母在这个按键上所处的位置。 比方说&#xff0c;为了按出字母 ‘s’ &#xff0c;Alice 需要按 ‘7’ 四次。…

LLM推理需要占用多少显存

搬运&#xff1a; AI开发者de频道&#xff1a;专题文章显示

c++一句话求前缀和,不用循环

partial_sum 是 C 标准库中的一个函数&#xff0c;用于计算给定范围内元素的部分和。它接受三个参数&#xff1a; 起始迭代器&#xff08;包含在计算范围内的第一个元素&#xff09;结束迭代器&#xff08;不包含在计算范围内的最后一个元素&#xff09;输出迭代器&#xff08…

DP-适配器模式代码重新理解

package com.designpatterns.adapter;/*** 定义鸭子接口*/ public interface Duck {/*** 定义鸭子呱呱叫(quack)*/public void quack();public void fly(); }package com.designpatterns.adapter;/*** 实现一个绿头鸭*/ public class MallarDuck implements Duck{Overridepubl…

Linux中运用xsync实现免密集群分发

一、前言 今天搭建了三台虚拟机的集群&#xff0c;在集群中部分操作在三台虚拟机上的操作都一致&#xff0c;为了提高效率&#xff0c;就需要配置xsync实现集群分发。 二、设置免密登录 1.生成公钥和私钥 ssh-keygen -t rsa一直敲回车&#xff0c;会生成两个文件&#xff0c…

C#中处理Socket粘包

在C#中使用Socket进行网络通信时&#xff0c;粘包问题是常见的。粘包问题通常发生在TCP协议中&#xff0c;因为TCP是流式协议&#xff0c;数据可能会被分割成多个包发送&#xff0c;也可能多个小包会被合并成一个大包接收。 处理粘包问题的常见方法是使用消息分隔符或消息长度…

【Qt+opencv】ROI与图像混合

文章目录 前言ROIROI是什么如何提取ROI 图像混合整体混合线性混合 局部混合 总结 前言 在计算机视觉和图像处理中&#xff0c;我们经常需要对图像的某一部分&#xff08;也就是ROI&#xff0c;Region of Interest&#xff09;进行操作。这些操作可能包括滤波、缩放、旋转等。同…

SpringBoot 跨域请求处理全攻略:从原理到实践

文章目录 SpringBoot 如何处理跨域请求&#xff1f;你能说出几种方法&#xff1f;跨域请求概述跨域解决方案1. 使用CrossOrigin注解2. 使用WebMvcConfigurer配置类3. 使用过滤器&#xff08;Filter&#xff09;4. 使用Spring Security处理CORS5.使用Spring Cloud Gateway处理CO…

灵雀云AML:赋能金融AI,构建数智时代核心竞争力

在人工智能&#xff08;AI&#xff09;技术的迅猛发展中&#xff0c;金融行业正迈入变革的新时代。AI不仅在优化投资决策、信用评估、实时监控和欺诈识别方面展现出强大功能&#xff0c;还极大地提升了客户体验、降低了运营成本&#xff0c;并推动了产品创新。面对智能时代的挑…

C#知识|账号管理系统:多条件动态查询条件的编写。

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 在项目开发中涉及到许多通过多个条件勾选来实现动态的多个条件查询的情况&#xff0c; 此节记录多条件查询的后台代码编写&#xff0c;以下为学习笔记。 01 实现原理 通过界面输入框输入或者下拉框下拉选择任意查询…

《RuoYi基于SpringBoot+Vue前后端分离的Java快速开发框架学习》系列博客_Part2_添加菜单

系列文章目录 Part1:启动RouYi 文章目录 系列文章目录Part1:启动RouYi 实现添加菜单功能来显示新的音图分析页面&#xff08;所截图片都是在已经添加菜单完成后的情况下&#xff09;一、建立一个菜单二、建立数据库1、通过数据库软件建立一个表&#xff0c;供我们使用&#xf…

强化学习算法DQN实现

DQN的基本思想 Q学习&#xff1a;Q学习是一种基于值函数的强化学习方法&#xff0c;目的是通过学习状态-动作值函数Q(s, a)来指导智能体的动作选择。Q函数表示在状态s采取动作a后能够获得的期望总回报。 深度神经网络&#xff1a;使用深度神经网络来近似Q函数。输入是状态s&am…

【Ngix】快速上手,由浅入深

内容概述 1、nginx 简介 &#xff08;1&#xff09;介绍 nginx 的应用场景和具体可以做什么事情 &#xff08;2&#xff09;介绍什么是反向代理 &#xff08;3&#xff09;介绍什么是负载均衡 &#xff08;4&#xff09;介绍什么是动静分离 2、nginx 安装 &#xff08;1…

Leetcode - 周赛406

目录 一&#xff0c;3216. 交换后字典序最小的字符串 二&#xff0c;3217. 从链表中移除在数组中存在的节点 三&#xff0c;3218. 切蛋糕的最小总开销 I 四&#xff0c;3219. 切蛋糕的最小总开销 II 一&#xff0c;3216. 交换后字典序最小的字符串 本题要求交换一次相邻字符…

C++编程逻辑讲解step by step:静态数组长度后确定还能编译成功

定义 定义一维数组的一般格式为 类型标识符 数组名&#xff3b;常量表达式&#xff3d;&#xff1b; 例如&#xff1a; int a&#xff3b;10&#xff3d;; 问题 很多人写成这样&#xff1a; int n; cin>>n; int a[n]; 这个写法已经明确&#xff0c;是错的&…

新建vue项目和安装第三方库

安装vue 打开vscode编辑器&#xff0c;按Ctrl组合键打开终端&#xff0c;在命令行中运行以下命令 npm create vuelatest项目初始化完成&#xff0c;可执行以下命令&#xff1a; cd vue-project --切换到项目目录 npm install -- 安装依赖包 npm run dev -- 运行项目安装 …

大数据架构对比记录

Lambda架构 -维护两套项目&#xff0c;开发和维护成本高 -两套链路&#xff0c;数据容易不一致 -数据计算成本大&#xff08;例如原定每小时计算一次&#xff0c;但有额外新需求需要计算两点半-三点半之间数据&#xff0c;则需要重新计算&#xff09; Kappa -过于依赖kafka消…

FPGA:基于复旦微FMQL10S400 /FMQL20S400 国产化核心板

复旦微电子是国内集成电路设计行业的领军企业之一&#xff0c;早在2000年就在香港创业板上市&#xff0c;成为行业内首家上市公司。公司的RFID芯片、智能卡芯片、EEPROM、智能电表MCU等多种产品在市场上的占有率位居行业前列。 今天介绍的是搭载复旦微 FMQL10S400/FMQL20S400的…