跟着峰哥学java 第四天 商品分类 前后端显示

news2025/2/24 15:40:08

1.后端

1.1mybatis-plus分页查询配置

在商品热卖数据中,只让其显示八条数据 将要使用分页 

也就是service.page方法 此时需要配置 mp拦截器

@Configuration
public class MybatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

1.2递归查询

1.2.1更新实体类

这些都有外键关联 比如商品小类 有一个商品大类id

很多商品有一个商品小类id(红米k60 红米k70 都属于红米k系列小类)

1.2.2递归查询

这次我把控制层和业务层分开了 各尽其职 hhh

BigTypeController层

 @ApiOperation("查询所有大类 里面蕴含小类及产品")
    @GetMapping("/findCategories")
    public Result findCategories(){
        return bigTypeService.findCategories();
    }

BigTypeServiceImpl层

@Resource
    private BigTypeMapper bigTypeMapper;
    @Resource
    private SmallTypeMapper smallTypeMapper;
    @Resource
    private ProductMapper productMapper;
    @Override
    public Result findCategories() {
        QueryWrapper<BigType> bigTypeQueryWrapper = new QueryWrapper<>();
        List<BigType> bigTypeList = bigTypeMapper.selectList(bigTypeQueryWrapper);
        for (BigType bigType : bigTypeList) {
            Integer bigTypeId = bigType.getId();
            QueryWrapper<SmallType> smallTypeQueryWrapper = new QueryWrapper<SmallType>().eq("bigTypeId", bigTypeId);
            List<SmallType> smallTypeList = smallTypeMapper.selectList(smallTypeQueryWrapper);
            bigType.setSmallTypeList(smallTypeList);
            for (SmallType smallType : smallTypeList) {
                Integer smallTypeId = smallType.getId();
                QueryWrapper<Product> productQueryWrapper = new QueryWrapper<Product>().eq("typeId", smallTypeId);
                List<Product> productList = productMapper.selectList(productQueryWrapper);
                smallType.setProductList(productList);
            }
        }
        return new Result(200,"查询分类数据成功",bigTypeList);
    }

这是一个简单的递归 但仍有需要注意的地方,

根据不同的属性 设置到不同的嵌套循环中 比如说smallTypeList

mp真实一个处理单表操作的好工具

2.前端

2.1数据解耦处理 

根据生命周期来讲 这些影响不大 

2.2mode  = widthfix

Widthfix 宽度不变,高度自动变化,保持原图宽高比不变

2.3配置文字超长省略

3.数据处理

3.1关于this的坑

3.2 map 与 箭头函数 

4.自定义快速生成

4.1view{$}*x

5.前端视图层的规整

5.1上方有view时 模块高度调整

5.2 scroll-view 滑动视图

5.3左菜单栏调整

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

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

相关文章

基于Echarts进行图表组件的封装

什么是Echarts 是一个使用js实现的开源可视库&#xff0c;提供了多种图表&#xff0c;但是当我们在项目中进行使用的时候可能就是需要进行一系列的相关配置如&#xff1a; 标题&#xff0c;类型&#xff0c;x轴&#xff0c;y轴等&#xff0c;当我们使用较为频繁的时候就容易导…

[数据结构] 基于交换的排序 冒泡排序快速排序

标题&#xff1a;[数据结构] 基于交换的排序 冒泡排序&&快速排序 水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 &#xff08;一&#xff09;冒泡排序 优化后实现&#xff1a; &#xff08;二&#xff09;快速排序 I、实现方法&#xff1a; &#…

Adobe Photoshop 2024 v25.5.1 中文激活版下载以及安装方法教程

软件介绍 Adobe Photoshop 2024 v25.5.1 是Adobe公司的最新版图像处理软件&#xff0c;它提供了强大的图像编辑工具和智能自动化功能&#xff0c;包括图像修复、色彩校正和滤镜效果&#xff0c;以满足专业人士和业余爱好者的需求。这款软件还支持矢量图形设计和实时协作&#…

【程序人生】来CSDN五周年了,简单总结下初心、收获、未来憧憬

最近CSDN站内私信说&#xff0c;已经创作五周年了。想想确实应该写一点东西&#xff0c;总结一下初心是什么、经历了什么、收获了什么、现状怎么样、未来会如何规划写文章这件事。算是我自己的一份总结&#xff0c;也许也可以给一些刚上大学的年轻朋友参考一下&#xff0c;坚持…

【Linux】进程创建和终止 | slab分配器

进程创建 fork 1.fork 之后发生了什么 将给子进程分配新的内存块和内核数据结构&#xff08;形成了新的页表映射&#xff09;将父进程部分数据结构内容拷贝至子进程添加子进程到系统进程列表当中fork 返回&#xff0c;开始调度器调度 这样就可以回答之前返回两个值&#xff1f…

Autosar Dcm配置-0x85服务配置及使用-基于ETAS软件

文章目录 前言Dcm配置DcmDsdDcmDsp代码实现总结前言 0x85服务用来控制DTC设置的开启和关闭。某OEM3.0架构强制支持0x85服务,本文介绍ETAS工具中的配置 Dcm配置 DcmDsd 配置0x85服务 此处配置只在扩展会话下支持(具体需要根据需求决定),两个子服务Disable为0x02,Enable…

3.pwn 函数调用流程,调用约定

前置准备 pop: Pop指令的作用是弹栈&#xff0c;将栈顶的数据弹出到寄存器&#xff0c;然后栈顶指针向下移动一个单位。 具体来说:如pop rax&#xff0c;作用就是mov rax[rsp];add rsp 8; push: Push指令的作用就是压栈&#xff0c;将栈顶指针向上移动一个单位的距离&#xf…

38 IO流

目录 C语言的输入和输出流是什么CIO流stringstream的简单介绍 1. C语言的输入与输出 C语言中我们用到的最频繁的输出方式是scanf和printf&#xff0c;scanf&#xff1a;从标准输入设备&#xff08;键盘&#xff09;读取数据&#xff0c;并将值存在变量中。printf&#xff1a;…

【MySQL】锁(黑马课程)

【MySQL】锁 0. 锁的考察点1. 概述1. 锁的分类1.1 属性分类1.2 粒度分类 2. 全局锁2.1 全局锁操作2.2.1 备份问题 3. 表级锁3.1 表锁3.2 语法3.3 表共享读锁&#xff08;读锁&#xff09;3.4 表独占写锁&#xff08;写锁&#xff09;3.5 元数据锁(meta data lock, MDL)3.6 意向…

第5章 认证授权:需求分析,Security介绍(OAuth2,JWT),用户认证,微信扫码登录,用户授权

1 模块需求分析 1.1 什么是认证授权 截至目前&#xff0c;项目已经完成了课程发布功能&#xff0c;课程发布后用户通过在线学习页面点播视频进行学习。如何去记录学生的学习过程呢&#xff1f;要想掌握学生的学习情况就需要知道用户的身份信息&#xff0c;记录哪个用户在什么…

AIGC专栏12——EasyAnimateV3发布详解 支持图文生视频 最大支持960x960x144帧视频生成

AIGC专栏12——EasyAnimateV3发布详解 支持图&文生视频 最大支持960x960x144帧视频生成 学习前言项目特点生成效果相关地址汇总项目主页Huggingface体验地址Modelscope体验地址源码下载地址 EasyAnimate V3详解技术储备Diffusion Transformer (DiT)Hybrid Motion ModuleU-V…

智慧校园-教职工管理系统总体概述

在当今信息化时代&#xff0c;智慧校园教职工管理系统成为了提升教育机构管理效能的重要工具。该系统巧妙融合了先进的信息技术&#xff0c;为教职工的日常管理带来了一场静悄悄的革命。它不仅是一个信息存储库&#xff0c;记录着每位教职工从加入到离开的完整职业轨迹&#xf…

笔记12:if语句编程练习(打印输出三个数据中的最小值)

输入三个数&#xff0c;分别放入变量x&#xff0c;y&#xff0c;z中 打印输入数据中最小的那一个数 解决方案1 定义中间变量 t 1.比较x和y的大小关系&#xff0c;将较小的值赋值给t 2.比较t和z的大小关系&#xff0c;将较小的值赋值给t 3.t 中保存的就是3个数中的较小值 &am…

限时免费!国产Sora快手可灵Web网页端及全新功能上线!国货之光!

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 快手可灵&#xff08;Kling&#xff09;这回是真的出息了&…

Python爬取股票信息-并进行数据可视化分析,绘股票成交量柱状图

为了使用Python爬取股票信息并进行数据可视化分析&#xff0c;我们可以使用几个流行的库&#xff1a;requests 用于网络请求&#xff0c;pandas 用于数据处理&#xff0c;以及 matplotlib 或 seaborn 用于数据可视化。 步骤 1: 安装必要的库 首先&#xff0c;确保安装了以下P…

Hack The Box -- Blazorized

一、准备工作 端口扫描 详细扫描 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-06-30 21:39 EDT Nmap scan report for 10.10.11.22 Host is up (0.26s latency).PORT STATE SERVICE VERSION 53/tcp open domain Simple DNS Plus 80/tcp op…

海外发稿: 秘鲁-区块链新闻媒体通稿宣发

秘鲁媒体单发 随着全球化的不断深入&#xff0c;海外发稿已经成为众多企业宣传推广的重要方式之一。而在海外发稿的选择中&#xff0c;秘鲁媒体的地位尤为重要。秘鲁作为南美洲的重要国家之一&#xff0c;拥有众多知名媒体平台&#xff0c;包括diariodelcusco、serperuano、el…

非堆成加密是公私钥使用

对称加密学习-CSDN博客 加密算法学习-CSDN博客 非对称加密算法使用一对密钥&#xff0c;包括一个公钥和一个私钥&#xff0c;它们是数学上相关联的&#xff0c;但公钥可以公开分享&#xff0c;而私钥必须保密。以下是使用非对称加密算法的一般步骤&#xff1a; 密钥生成&…

【IT领域新生必看】深入浅出Java:揭秘`Comparator`与`Comparable`的神奇区别

文章目录 引言什么是Comparable接口&#xff1f;Comparable接口的定义实现Comparable接口示例&#xff1a; 什么是Comparator接口&#xff1f;Comparator接口的定义实现Comparator接口示例&#xff1a; Comparable与Comparator的区别排序逻辑位置示例&#xff1a; 可扩展性示例…

HashMap中的put()方法

一. HashMap底层结构 HashMap底层是由哈希表(数组),链表,红黑树构成,哈希表存储的类型是一个节点类型,哈希表默认长度为16,它不会每个位置都用,当哈希表中的元素个数大于等于负载因子(0.75)*哈希表长度就会扩容到原来的2倍 二. 底层的一些常量 三. HashMap的put()方法 当插入一…