1. 门户首页商品分类
搜索做完之后,把目光移动首页,首页最重要的模块之一便是商品分类,商品分类也是进入商品列表,找到心仪商品的另一个主要途径。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FwosYnSb-1576157106978)(assets/1568101575193.png)]
访问谷粒商城的首页,也会发出请求获取商品分类信息:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-du4oMaoN-1576157106987)(assets/1568102039145.png)]
在处理这个请求之前,首先需要搭建一个module。这个页面作为整个商城的门户入口,访问量巨大,为了方便优化扩展,需要搭建独立的系统。
1.1. 创建首页Module
创建gmall-index,过程略
1.2. 获取一级分类
进入首页,首先完成一级分类的加载。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdE7DW7F-1576157107009)(assets/1568103798682.png)]
查看控制台请求结合《前端商城接口文档.md》
请求地址:/index/cates
请求方式:GET
请求参数:无
正确响应:List<CategoryEntity>
实现如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-caVycMWV-1576157107020)(assets/1568115000791.png)]
IndexController:
@RestController
@RequestMapping("index")
public class IndexController {
@Autowired
private IndexService indexService;
@GetMapping("cates")
public Resp<List<CategoryEntity>> queryLevel1Category() {
List<CategoryEntity> categoryEntities = this.indexService.queryLevel1Category();
return Resp.ok(categoryEntities);
}
}
IndexService:
public interface IndexService {
List<CategoryEntity> queryLevel1Category();
}
IndexServiceImpl:
@Service
public class IndexServiceImpl implements IndexService {
@Autowired
private GmallPmsFeign gmallPmsFeign;
@Override
public List<CategoryEntity> queryLevel1Category() {
Resp<List<CategoryEntity>> categoryResp = this.gmallPmsFeign.queryCategory(1, 0l);
return categoryResp.getData();
}
}
GmallPmsFeign:
@FeignClient("pms-service")
public interface GmallPmsFeign extends GmallPmsApi {
}
注意:需要引入gmall-pms-interface的依赖
<dependency>
<groupId>com.atguigu</groupId>
<artifactId>gmall-pms-interface</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
页面效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLoJDdLb-1576157107028)(assets/1568115221039.png)]
1.3. 获取二、三级分类
对标京东:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iy9vsonX-1576157107033)(assets/1568116025898.png)]
鼠标在一级分类中移动时,会发送请求加载一级分类对应的二级分类及其下的所有三级分类。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51dhIdT2-1576157107037)(assets/1568115714369.png)]
结合接口文档:
请求地址:/index/cates/${pid}
请求方式:GET
请求参数:pid(一级分类的id)
正确响应:List<CategoryVO>
需要给CategoryEntity扩展一个字段subs
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntvpy4pc-1576157107041)(assets/1568124759485.png)]
需要gmall-pms提供这样的接口,然后在gmall-index中调用这个接口。
1.3.1. gmall-pms提供数据接口
在CategoryController中添加方法:
@ApiOperation("父id查询二级分类及其子分类")
@GetMapping("{pid}")
public Resp<List<CategoryEntity>> querySubCategory(@PathVariable("pid")Long pid){
List<CategoryEntity> categoryEntityList = this.categoryService.querySubCategory(pid);
return Resp.ok(categoryEntityList);
}
CategoryService:
public interface CategoryService extends IService<CategoryEntity> {
PageVo queryPage(QueryCondition params);
List<CategoryEntity> queryCategory(Integer level, Long parentCid);
List<CategoryEntity> querySubCategory(Long pid);
}
在CategoryServiceImpl实现类中实现方法:
@Override
public List<CategoryEntity> querySubCategory(Long pid) {
List<CategoryEntity> categoryEntities = this.categoryDao.querySubCategory(pid);
return categoryEntities;
}
CategoryDao:
@Mapper
public interface CategoryDao extends BaseMapper<CategoryEntity> {
List<CategoryEntity> querySubCategory(Long pid);
}
CategoryDao.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.gmall.pms.dao.CategoryDao">
<!-- 可根据自己的需求,是否要使用 -->
<resultMap type="com.atguigu.gmall.pms.entity.CategoryEntity" id="categoryMap">
<result property="catId" column="cat_id"/>
<result property="name" column="name"/>
<result property="parentCid" column="parent_cid"/>
<result property="catLevel" column="cat_level"/>
<result property="showStatus" column="show_status"/>
<result property="sort" column="sort"/>
<result property="icon" column="icon"/>
<result property="productUnit" column="product_unit"/>
<result property="productCount" column="product_count"/>
<collection property="subs" select="querySubCategory" column="cat_id"/>
</resultMap>
<select id=&#