vue3前端开发-小兔鲜项目-一级页面banner图渲染

vue3前端开发-小兔鲜项目-一级页面banner图渲染!其实,首页的banner渲染代码可以拿来复用的,只是区别在于,传递的接口参数不一样而已。默认是1-首页banner;2-一级分类页面banner图。


1:改造一下之前的获取banner的接口调用函数,增加一个参数对象。

写好默认的值1.(不赋值的情况下,就是这个默认值1)

//获取banner
export function getBannerAPI(params = {}) {//默认是1,商品为2const { distributionSite = '1' } = paramsreturn httpInstance({url:'/home/banner',params:{distributionSite}})}

我们增加了一个参数对象params.而且做好了默认值的设置。(用的是一种解构赋值的模式)


2:把之前HomeBanner.vue里面的代码,拿过来,

//加载banner
const bannerList = ref([])
const getBanner = async () =>{const res = await getBannerAPI({ distributionSite:'2'})bannerList.value = res.result
}
onMounted(()=> getBanner())

需要提前引入接口函数:

import { getBannerAPI } from "@/apis/home"

3:修改完善页面内容。

在template里面新增banner的渲染模块内容。

<div class="top-category"><div class="container m-top-20"><!--面包屑导航--><div class="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item></el-breadcrumb></div><!--banner区域--><div class="home-banner"><el-carousel height="500px"><el-carousel-item v-for="item in bannerList" :key="item.id"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel></div></div></div>

 


经过以上的改动。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。

 

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

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

相关文章

第5章 单片机的中断系统

5.1 中断的概念 5.2 中断控制系统 5.3 中断处理过程 5.4 中断的编程及应用举例 5.1 中断的概念 日常生活的中断现象举例 中断是指在突发事件到来时先中止当前正在进行的工作&#xff0c;转而去处理突发事件。待处理完成后&#xff0c;再返回到原先被中止的工作处&#xff…

【STM32】LED闪烁LED流水灯蜂鸣器(江科大)

LED正极&#xff1a;外部长脚、内部较小 LED负极&#xff1a;外部短脚、内部较大 LED电路 限流电阻&#xff1a;保护LED&#xff0c;调节LED亮度&#xff08;本实验用面包板为了方便&#xff0c;省去了限流电阻&#xff0c;设计电路时要加上&#xff09; 左上图&#xff1a;低…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十六章 Linux驱动初探

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

阿尔泰科技工业电脑IPC-8363工控机

概述&#xff1a; IPC-8363是一款支持 LGA 1200 Intel 10th/11th Generation Core™ i9/i7/i5/i3, Celeron and Pentium processor 的工业电脑。配置2组独立 SO-DIMM DDR4 2666/2933MHz内存&#xff0c;最大可扩展至128GB。 主要技术指标&#xff1a; 产品图示&#xff1a; 系…

Codeforces Round 672 (Div. 2) C1. Pokémon Army (easy version) (DP)

不知道能不能用贪心&#xff0c;反正我是没看出来&#xff0c;所以用DP求解。 首先分析一下题意&#xff0c;我们要在一段序列中取出一段子序列&#xff0c;然后让这段子序列按顺序逐个先加后减最终得到的结果最大。 如果要用DP&#xff0c;那么我们首先就要思考怎么表示状态…

Apache SeaTunnel——OLAP 引擎的数据动脉

导读本文将分享如何利用 Apache SeaTunnel 将各个业务系统的数据同步到 OLAP 引擎。 主要内容包括以下六大部分&#xff1a; 1. Apache SeaTunnel 项目介绍 2. Apache SeaTunnel 核心功能 3.SeaTunnel 在 OLAP 场景下的应用 4. 社区近期计划 5. WhaleTunnel 产品特性 6. …

深入解析:`cat` 与 `less` 命令在文件查看中的应用与对比

深入解析&#xff1a;cat 与 less 命令在文件查看中的应用与对比 深入解析&#xff1a;cat 与 less 命令在文件查看中的应用与对比 大纲&#xff1a;摘要&#xff1a;内容&#xff1a; 引言cat 命令详解 基本用法常用选项实际应用示例 less 命令详解 基本用法常用选项实际应用…

idea怎么配置gradle多个版本

1.背景 gradle版本很多,而且很多时候版本是不兼容的,我们希望拉取下来的代码就包含已经配置好的版本,而不是去配置本机的gradle版本..... 意思就是要实现项目A可以用6.X版本 项目B可以使用7.X版本 项目C可以用9.X版本..... 2.配置方式 步骤一:项目根路径下保留一个文件夹…

预约之道:服务预约群管理机器人的搭建关键与源码探究

在如今高效便捷的服务需求背景下&#xff0c;服务预约群管理机器人能够极大地提升预约流程的效率和用户体验。本文将深入探讨服务预约群管理机器人的搭建关键&#xff0c;并对其源码进行详细探究。 一、服务预约群管理机器人的应用场景和优势 &#xff08;一&#xff09;应用…

MySQL事务管理详解:特性、问题与解决方案

什么是事务&#xff1f; 事务是一个不可分割的数据库操作序列&#xff0c;也是数据库并发控制的基本单位&#xff0c;其执行的结果必须使数据库从一种一致性状态变到另一种一致性状态。事务是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。 事务的四大特…

SMU Summer 2024 Contest Round 5

SMU Summer 2024 Contest Round 5 2024.7.19 9:00————12:00 过题数1/7 补题数4/7 Robot Takahashi Connect 6 Strange Balls Linear Probing Red Polyomino Stronger Takahashi Predilection A - Robot Takahashi 我太菜了dbq 一开始想用三分&#xff0c;写完交上去发现…

智能家居和智能家电有什么区别?

智能家居和智能家电在定义、涵盖范围、功能特点以及系统集成度等方面存在显著区别。 一、定义 智能家居&#xff1a;智能家居是指通过物联网技术、人工智能技术等先进技术&#xff0c;将家居设备与互联网连接起来&#xff0c;实现智能化控制和管理的一种新型生活方式。它不仅…

Docker搭建Harbor

1.什么是Harbor Harbor 是 vMware 公司开源的企业级 Docker 〖egistry 项日&#xff0c;其日标是帮助用户迅速搭建一个企业级的 Docker Registry 服务。Harbor以 Docker 公司开源的 Registry 为基础&#xff0c;提供了图形管理UI 、基于角色的访问控制(Role Based Accesscontr…

活动回顾 | AutoMQ 联合 GreptimeDB 共同探讨新能源汽车数据基础设施

7 月 13 日&#xff0c;AutoMQ 携手 GreptimeDB“新能源汽车数据基础设施” 主题 meetup 在上海圆满落幕。本次论坛多角度探讨如何通过创新的数据管理和存储架构&#xff0c;提升汽车系统的性能、安全性和可靠性&#xff0c;从而驱动行业的持续发展和创新&#xff0c;涵盖 Auto…

PHP萌宠之家微信小程序系统源码

&#x1f43e;萌宠之家微信小程序&#x1f43e; —— 铲屎官们的温馨小窝✨ &#x1f3e0;【一键开启萌宠乐园】&#x1f3e0; 亲们&#xff0c;是不是每次刷手机都忍不住想看看那些软萌可爱的毛孩子&#xff1f;现在&#xff0c;有了“萌宠之家”微信小程序&#xff0c;你的…

LeetCode 3112.访问消失节点的最少时间:单源最短路的Dijkstra算法

【LetMeFly】3112.访问消失节点的最少时间&#xff1a;单源最短路的Dijkstra算法 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-time-to-visit-disappearing-nodes/ 给你一个二维数组 edges 表示一个 n 个点的无向图&#xff0c;其中 edges[i] [ui, vi, l…

【柴油机故障诊断】基于斑马优化算法ZOA优化柴油机故障诊断附Matlab代码

% 柴油机故障诊断 - 基于斑马优化算法(Zebra Optimization Algorithm,ZOA)优化Transformer模型 % 代码示例仅为演示用途,实际应用中可能需要根据具体情况进行适当修改 % 初始化参数 maxIterations = 100; % 最大迭代次数 populationSize = 50; % 种群大小 % 斑马优化算法…

【深度学习】【Lora训练4】StabelDiffusion,人物lora训练

启动&#xff1a; docker run -it --gpus all --net host -v /ssd/xiedong/xiezhenceshi/lora_train:/ssd/xiedong/xiezhenceshi/lora_train kevinchina/deeplearning:pytorch2.3.0-cuda12.1-cudnn8-devel-xformers-lora-train bashrootgpu16:/workspace/lora-scripts# python…

6. JavaSE ——【深入理解Java中的按位运算符】

&#x1f4bb; 开场白 欢迎来到我的技术博客&#xff01;在这里&#xff0c;我们将一起探索编程的奥秘&#xff0c;分享代码的智慧&#xff0c;让技术改变生活。让我们开始这段精彩的旅程吧&#xff01;&#x1f680;&#x1f4bb;&#x1f310; &#x1f4d6;个人主页&#xf…

PostgreSQL的Json数据类型如何使用

PostgreSQL中的JSON数据类型提供了一种灵活的方式来存储JSON&#xff08;JavaScript Object Notation&#xff09;数据。JSON是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。在PostgreSQL中&#xff0c;你可以使用JSON和JSONB&…