对于一个购物商城的项目,主体还得是商品,这篇博客主要介绍如何将数据库中的信息渲染到页面上,这边后端是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