实习课知识整理3:首页商品列表的展示

对于一个购物商城的项目,主体还得是商品,这篇博客主要介绍如何将数据库中的信息渲染到页面上,这边后端是SpringBoot,前端是html配合thymeleaf模板

1. 编写查询数据库的方法

在这边我在页面上需要两部分的信息,一个是所有的商品,另一个是商品热度排名前三的商品信息。所以需要写两个方法

itemMapper.java

    // 查询所有商品列表List<Item> getItemList();// 根据 热度 heart 查询List<Item> getItemListByHeart();

itemMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.shopping.mapper.ItemMapper"><resultMap id="itemBaseResultMap" type="Item"><!-- 映射字段 --><id column="ITEM_ID" property="itemId"/><id column="ITEM_NAME" property="itemName"/><id column="ITEM_PRICE" property="itemPrice"/><id column="ITEM_COUNT" property="itemCount"/><id column="ITEM_CREATE_TIME" property="itemCreateTime"/><id column="ITEM_DESC" property="itemDesc"/><id column="ITEM_TYPE_ID" property="itemTypeId"/><id column="ITEM_SALE_PRICE" property="itemSalePrice"/><id column="ITEM_STATE" property="itemState"/><id column="ITEM_IMAGE_MAIN" property="itemImageMain"/><id column="ITEM_IMAGE_OTHER" property="itemImageOther"/><id column="ITEM_VIDEO_URL" property="itemVideoUrl"/><id column="ITEM_HEART" property="itemHeart"/></resultMap><select id="getItemList" resultMap="itemBaseResultMap">select ITEM_ID, ITEM_NAME, ITEM_PRICE, ITEM_COUNT, ITEM_CREATE_TIME, ITEM_DESC,ITEM_TYPE_ID, ITEM_SALE_PRICE, ITEM_STATE, ITEM_IMAGE_MAIN, ITEM_IMAGE_OTHER,ITEM_VIDEO_URL, ITEM_HEART FROM shopping.item</select><!--编写Sql代码块,便于多次使用--><sql id="allColumns">select ITEM_ID, ITEM_NAME, ITEM_PRICE, ITEM_COUNT, ITEM_CREATE_TIME, ITEM_DESC,ITEM_TYPE_ID, ITEM_SALE_PRICE, ITEM_STATE, ITEM_IMAGE_MAIN, ITEM_IMAGE_OTHER,ITEM_VIDEO_URL, ITEM_HEART from shopping.item</sql><select id="getItemListByHeart" resultMap="itemBaseResultMap"><include refid="allColumns"></include> ORDER BY ITEM_HEART DESC LIMIT 0,3</select>
</mapper>

 

itemService.java接口 

    // 查询所有商品列表List<Item> getItemList();// 根据 热度 heart 查询List<Item> getItemListByHeart();

itemServiceImpl实现类

    @Resourceprivate ItemMapper itemMapper;@Overridepublic List<Item> getItemList() {return itemMapper.getItemList();}@Overridepublic List<Item> getItemListByHeart() {return itemMapper.getItemListByHeart();}

indexController

    @RequestMapping("/index")public ModelAndView index2(ModelAndView mav)  throws Exception{List<Item> allItems = itemService.getItemList();List<Item> itemsByHeart = itemService.getItemListByHeart();mav.addObject("allItems",allItems);mav.addObject("itemsByHeart",itemsByHeart);mav.setViewName("index");return mav;}

 

 2. 前端拿到后端返回的数据,并渲染到页面上

index.html 

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

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

相关文章

vue前端上传图片到阿里云OSS,超详细上传图片与视频教程

vue前端直传图片与视频到阿里云OSS 1. 简介与日常使用2. 为什么要这么干&#xff1f;是因为我司后端不行吗&#xff1f;&#xff1f;&#xff1f;&#xff08;确实&#xff01;&#xff09;3. vue前端直传的操作4. 如何上传到阿里OSS指定文件夹呢? 1. 简介与日常使用 阿里云…

html5实现最智能大气的公司年会抽奖(源码)

文章目录 1.设计来源1.1 主界面1.3 数据配置1.4 抽奖效果1.5 中奖效果 2.效果和源码配置2.1 动态效果2.2 员工信息配置2.3 奖品信息配置2.4 抽奖音效配置2.5 源代码2.6 项目结构 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/…

Python字符串处理全攻略(三):常用内置方法轻松掌握

目录 引言Python字符串常用内置方法str.index()功能介绍语法注意事项总结 str.startswith()功能介绍语法示例注意事项 str.expandtabs()功能介绍语法示例注意事项总结 str.splitlines()功能介绍语法示例注意事项总结 str.swapcase()功能介绍语法示例注意事项 结束语 引言 欢迎…

Python数据分析 Matplotlib篇 基本方法初识 (第1讲)

Python数据分析 Matplotlib篇(第1讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…

《每天一分钟学习C语言·八》字符串,指针与二维数组,补码,按位取反

1、 枚举 enum WeekDay //这是一个数据类型 {//MonDay, TusDay,.... }; enum WeekDay day MonDay; printf(“%d\n”, day); //输出0&#xff0c;枚举里面元素都是从0开始排列2、 字符串 &#xff08;1&#xff09;在字符串中加双引号前面需要有反斜杠 &#xff08;2&#xf…

深入探讨多模态模型和计算机视觉

近年来&#xff0c;机器学习领域在从图像识别到自然语言处理的不同问题类型上取得了显着进展。然而&#xff0c;这些模型中的大多数都对来自单一模态的数据进行操作&#xff0c;例如图像、文本或语音。相比之下&#xff0c;现实世界的数据通常来自多种模态&#xff0c;例如图像…

string的库函数reserve、resize

系列文章 http://t.csdnimg.cn/u80hL 目录 系列文章[TOC](目录) 一、reserve——请求容量的变化二、resize——操作对象使用的空间 一、reserve——请求容量的变化 改变对象的capacity——他会请求开辟和缩小对象所占的空间&#xff0c;reserve只能操作对象未使用的空间&…

vue的表单收集案例

Vue的表单收集案例 这只是最基础的表单收集&#xff0c;并未涉及到element-ui。 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>收集表单数据</title><script type"text/javascript" src"../js…

美好的⼀天 从ActionTab开始 美观、智能、⾼效的新标签⻚ iTab 新标签页iTab新标签页Atop100工具推荐

文章目录 ActionTabiTab 新标签页iTab新标签页&#xff0c;小组件&#xff0c;起始页&#xff0c;标签页&#xff0c;日历&#xff0c;股票&#xff0c;浏览器扩展 https://www.actiontab.cn/ ActionTab 收费&#xff1f;&#xff1f;&#xff1f;&#xff1f; iTab 新标签页iT…

docker-compaose部署openldap

前段时间在本地搭建了一套gitlab geo测试环境&#xff0c;因为需要集成ldap&#xff0c;所以特意搭建下&#xff0c;特此作为笔记记录下。 文章目录 1. 前置条件2. 编写docker-openldap.yml文件3. 登录4. 使用创建组创建用户登录测试 1. 前置条件 安装docker-compose 安装docke…

嵌入式-stm32-用PWM点亮LED实现呼吸灯

一&#xff1a;知识前置 1.1、LED灯怎么才能亮&#xff1f; 答&#xff1a;LED需要低电平才能亮&#xff0c;高电平是灯灭。 1.2、LED灯为什么可以越来越亮&#xff0c;越来越暗&#xff1f; 答&#xff1a;这是用到不同占空比来实现的&#xff0c;控制LED实现呼吸灯&…

1.倒排索引 2.逻辑斯提回归算法

1.倒排索引 https://help.aliyun.com/zh/open-search/retrieval-engine-edition/introduction-to-inverted-indexes 倒排索引&#xff08;Inverted Index&#xff09;是一种数据结构&#xff0c;用于快速查找包含某个特定词或词语的文档。它主要用于全文搜索引擎等应用&#…