四、书城开发--3、书城图书部分的开发

书城图书部分

首先我们做书城首页搜索栏下面的图片展示

我们在书城首页组件中通过home请求方法中获取回来的数据中,打印出来可以看到那个banner就是我们现在要的图片

我们在data中定义一个变量banner用来存放获取回来的数据中的banner

然后把它展示出来就可以了,这个banner是一个路径,所以用img中的src即可

然后做猜你喜欢、精选组件

猜你喜欢的数据就存在在请求回来的数据data中的guessYouLike中,同理我们data中定义一个guessYouLike变量来存放这个数据

然后我们做一个猜你喜欢组件叫GuessYouLike.vue,引入到书城首页StoreHome.vue中并注册,并且把获取到的猜你喜欢的数据传给猜你喜欢组件,猜你喜欢组件用props接好

在猜你喜欢组件GuessYouLike.vue中

同理在书城首页StoreHome中引入热门推荐组件,并且定义一个变量recommend来保存获取回来的热门推荐的数据,然后把这个数据传递过去给热门搜索组件

精选组件同理,在书城首页中引入然后把获取的数据传递给精选组件

然后做最后的各类图书组件推荐

这个categoryList就是各类图书中每类推荐的图书,如人文推荐哪几本书,体育推荐那几本书。这里这个categoryList是一个二维数组,我们是在书城首页组件中通过for循环把比如科学类给category-book组件,该组件中就科学类推荐的那几本书也循环展示完。这个category-book中是循环这类学科的推荐书籍们,在书城首页把某学科的推荐图书们的数据即:data="item"传过去

最后做所有学科

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

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

相关文章

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】 题目描述:解题思路一:单调栈解题思路二:解题思路三: 题目描述: 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且…

阿赵UE学习笔记——26、动画混合空间

阿赵UE学习笔记目录   大家好,我是阿赵。   继续学习虚幻引擎的使用。之前学习了通过蓝图直接控制动画播放,或者通过动画状态机去控制播放。这次来学习一种比较细致的动画控制播放方式,叫做动画混合空间。 一、使用的情景 假设我们现在需…

ssm035基于JavaWeb的家居商城系统的设计与实现+jsp

家居商城系统 摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于家居商城系统当然也不能排除在外,随着网络技术的不断成熟,带动了家居商城系统,它彻底改…

Linux操作系统安装注意事项(新手简易版)

Linux操作系统安装注意事项(新手简易版) 目录: 1、字符集安装 2、磁盘分区 3、关闭KDUMP防火墙 4、时区选择 注:事例截图是centos8的安装,其他版本是一样的 1、字符集安装 ecology运行需要用到GBK和UTF8字符…

设计模式-结构型-装饰器模式-decorator

发票基本类 public class Invoice {public void printInvoice() {System.out.println("打印发票正文");} } 发票正文类 public class Decorator extends Invoice {protected Invoice ticket;public Decorator(Invoice ticket) {this.ticket ticket;}Overridepubl…

Android获取连接到手机热点上的设备信息

主题:在手机开启热点网络的情况下,想要获取是哪个设备已经连接上了当前开启的热点。 实现思路:Android通过读取 /proc/net/arp 文件可以得到连接当前热点的设备信息,包括Mac地址、IP地址等信息。 一. 方法逻辑: /*** …

ruoyi-vue-pro 前端vue js直接import导入本地文件使用方法

我的xml文件名称叫w2101.xml 第一步,删除所有依赖,否则配置以后就会启动报错: 第二步配置对应的文件格式,我当前使用的是xml文件 config.module.rule(xml).test(/\.xml$/).use(xml-loader).loader(xml-loader).end();第三步…

你应该知道的21个html小技巧

本文翻译自 21 HTML Tips You Must Know About,作者:Shefali, 略有删改。 在这篇文章中,我将分享21个HTML技巧和代码片段,可以提高你的编码技能。 链接联系人 使用HTML创建可点击的电子邮件、电话和短信链接&#xf…

转圈游戏——快速幂

目录 题目 思路 代码 题目 思路 每个小朋友移动一次的位置为,移动 q 次的位置则为。那么题目要求移动 ,最后的位置为 。 但 的范围是,而总的移动次数是 。时间复杂度是在,因此是一定不能硬算的,肯定会超时。那么该…

长期通配符证书介绍

长期通配符证书是指有效期较长的泛域名证书,这种证书允许您使用单一证书为一个主域名及其所有相关子域名提供长期的HTTPS加密服务。获取长期通配符证书的过程与普通通配符证书相似,但需要注意选择具有较长有效期的证书产品,并确保符合CA机构及…

私域电商客户要挨一刀的“订单发货管理”,微信:必须强制接入

文丨微三云营销总监胡佳东,点击上方“关注”,为你分享市场商业模式电商干货。 - 引言:超90%的私域运营商家都见到了或者说遇到了这个问题,如果没有读懂这个微信的模型机制,一定会懵逼,微三云营销总监胡佳…

SpringBoot整合MyBatis四种常用的分页方式

目录 方式1 一、准备工作 1. 创建表结构 2. 导入表数据 3. 导入pom.xml依赖 4. 配置application.yml文件 5. 创建公用的实体类 项目结构 2. 创建controller层 3. 创建service层 4. 创建mapper层 5. 创建xml文件 6. 使用postman进行测试,测试结果如下…

DNS 各记录类型说明及规则

各记录类型使用目的 记录类型使用目的A 记录将域名指向一个 IP 地址。CNAME 记录将域名指向另一个域名,再由另一个域名提供 IP 地址。MX 记录设置邮箱,让邮箱能收到邮件。NS 记录将子域名交给其他 DNS 服务商解析。AAAA 记录将域名指向一个 IPv6 地址。…

MQTT的学习

近期构建物联网平台,学习到MQTT,这里使用的是uniapp作为连接MQTT broker的,这里使用的是国产的EMQX。 MQTT的认识 MQTT 协议入门:基础知识和快速教程 | EMQ(简单的认识) 创建 MQTT 连接时如何设置参数&am…

从ChatGPT到多模态大模型:现状与未来(多模态)

ChatGPT 训练的核心技术主要包括: 预训练语言模型;有监督微调;基于人类反馈的 强 化 学 习 (ReinforcementLearningfrom Human Feedback,RLHF) 首先,通过自监督预训练使语言模型从大规模语料库中学习语言规律,具备基础 理解和生成能力;然后,通过构造指令微调数据集 并对模型进…

【科研相关知识】梯度下降算法(Gradient Descent)

梯度下降算法(Gradient Descent)梯度下降算法几种变体 梯度下降算法(Gradient Descent) 梯度下降算法是一种用于求解函数最小值的一阶优化算法。在机器学习和深度学习中,梯度下降算法被广泛用于模型训练,通过迭代的方式调整模型参数,以最小…

常见的mq产品和优点

常见的mq产品和优点 一、什么是mq? MQ全称 Message Queue(消息队列),是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信,解耦。 二、常见的mq产品 RabbitMQ、RocketMQ、ActiveMQ、Kafka、ZeroMQ、MetaMq …

【学习】注意力机制(Attention)和 自注意力机制(self-Attention)

参考B站:09 Transformer 之什么是注意力机制(Attention) 1. 注意力机制(Attention) 红色的是科学家们发现,如果给你一张这个图,你眼睛的重点会聚焦在红色区域 人–》看脸 文章看标题 段落看…

弹幕功能1

今天看pure-admin的时候发现有个弹幕功能 GitHub - hellodigua/vue-danmaku: 基于 Vue 的弹幕交互组件 | A danmaku component for Vue

业主看完当场签约的神仙地产大屏,搞物业的你不来get同款么

各行各业都有可视化大屏的应用场景,不少同志曾私戳我:能不能给我XX行业的大屏示例哇,我展示的指标领导怎么都不满意哇! 于是俺在行业顾问大哥那苦苦哀求,终于给大家带来这个地产行业的“营销战图大屏”方案&#xff0…