推荐商品功能实现

1.直接上图看效果

2.数据库表的设计



3.创建基础数据类VO
NewItemsVO

public class NewItemsVO {
    private Integer rootCatId;
    private String rootCatName;
    private String slogan;
    private String catImage;
    private String bgColor;
    private List<SimpleItemVO> simpleItemList;
    省略get和set方法......
}

SimpleItemVO

public class SimpleItemVO {
    private String itemId;
    private String itemName;
    private String itemUrl;
  }

4.创建自定义Mapper
CategoryMapperCustom
注意注解，指定传入的参数paramsMap
通过paramsMap.key可以得到相应的vaue

public interface CategoryMapperCustom {
    public List<NewItemsVO> getSixNewItemsLazy(@Param("paramsMap") Map<String,Object> map);
}

5.编写sql语句(CategoryMapperCustom.xml)

<resultMap id="myNewItemsVO"  type="com.lzx.pojo.vo.NewItemsVO">
        <id column="rootCatId" property="rootCatId" />
        <result column="rootCatName" property="rootCatName"/>
        <result column="slogan" property="slogan" />
        <result column="catImage" property="catImage" />
        <result column="bgColor" property="bgColor" />

        <collection property="simpleItemList" ofType="com.lzx.pojo.vo.SimpleItemVO">
            <id column="itemId" property="itemId" />
            <result column="itemName" property="itemName"/>
            <result column="itemUrl" property="itemUrl" />
        </collection>
    </resultMap>
    <select id="getSixNewItemsLazy" resultMap="myNewItemsVO" parameterType="Map">
        SELECT
          f.`id` AS rootCatId,
          f.`name` AS rootCatName,
          f.`slogan`AS slogan,
          f.`cat_image` AS catImage,
          f.`bg_color`AS bgColor,
          i.`id` AS itemId,
          i.`item_name`AS itemName,
          ii.`url`AS itemUrl,
          ii.`created_time`AS createdTime
        FROM
          category f
        LEFT JOIN items i ON f.`id` = i.`root_cat_id`
        LEFT JOIN items_img ii ON i.`id` = ii.`item_id`
        WHERE
          f.`type` = 1
        AND
          i.`root_cat_id` =#{paramsMap.rootCatId}
        AND
          ii.`is_main`=1
        ORDER BY
          i.`created_time`
        DESC
        LIMIT 0,6
    </select>

6.编写Service
CategoryService

/**
 * 查询一级分类下的六条商品信息
 * @param rootCatId
 * @return
 */
public List<NewItemsVO> getSixNewItemsLazy(Integer rootCatId);

7.编写Sevice实现类
CategoryServiceImpl

@Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<NewItemsVO> getSixNewItemsLazy(Integer rootCatId) {
        Map<String,Object> map =  new HashMap<>();
        map.put("rootCatId",rootCatId);
        return categoryMapperCustom.getSixNewItemsLazy(map);
    }

8.编写Controller
IndexController

@ApiOperation(value = "获取一级分类的六个商品",notes = "获取一级分类的六个商品",httpMethod = "GET")
    @GetMapping("/sixNewItems/{rootCatId}")
    public JSONResult sixNewItems(
            @ApiParam(name = "rootCatId",value ="一级分类Id",required = true)
            @PathVariable Integer rootCatId){
        if (rootCatId == null) {
            return JSONResult.errorMsg("分类不存在");
        }
        List<NewItemsVO> list = categoryService.getSixNewItemsLazy(rootCatId);
        return JSONResult.ok(list);
    }

9.前端设计
部分代码

renderSixNewItems() {
					var serverUrl = app.serverUrl;
					var categoryList = this.categoryList;
					var catIndex = this.catIndex;
					
					var rootCat = categoryList[catIndex];
					if (rootCat == undefined || rootCat == null || rootCat == '') {
						return;
					}
					var rootCatId = rootCat.id;

					catIndex++;
					this.catIndex = catIndex;

					// 获得各个分类下的最新6个商品
					axios.get(
							serverUrl + '/index/sixNewItems/' + rootCatId, {})
						.then(res => {
							if (res.data.status == 200) {
								var sixNewItemsListTemp = res.data.data
								var sixNewItemsList = this.sixNewItemsList;
								sixNewItemsList.push(sixNewItemsListTemp[0]);
								this.sixNewItemsList = sixNewItemsList;
								// console.log(sixNewItemsList);
								this.isScrolling = false;	// 加载完毕以后表示下次可以继续滚动加载
							}
						});
				},