购物网站中，商品管理板块也是重要的一个版块，下面我会从后台管理系统和前台管理页面去讲述购物网站商品模块功能的开发。

1演示效果

1.1前台演示地址演示地址

1.2后台演示地址演示地址

2商品分类功能

2.1商品分类表分析

表名：tb_category

字段中文含义parentId上级类目IDname分类名称status分类状态sort_order排序create_time创建时间update_time更新时间

2.2商品分类功能分析

(1)商品分类只是给商品定义一个标签类目，方面管理商品。

(2)根据用户选择的类目去查询显示商品列表，方便用户查询.

(3)后台管理系统对商品类目的一个维护.

2.3商品分类接口分析

/**** *商品类目管理 */ @RestController @RequestMapping("manage") public class CategoryController { @Autowired private CategoryService categoryService; /*** * 查询分类条目，前端进行直接放入控件 * @return */ @RequestMapping("category/list") public CommonResult> list(@RequestParam(required = false) Long parentId){ /*** * 可根据父级Id查询 */ return CommonResult.success(categoryService.queryTbCategory(parentId)); }

2.4商品分类后台管理系统

bootstrap-table-treegird前端树形组件如何使用： ****注意****：这个树形组件依赖于bootstrap-table.min.js 1.12之后的版本 spring-boot后台管理系统，如何查询出于botstrap-table-treegird对应的数据。

var data = JSON.parse( '[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},' + '{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},' + '{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},' + '{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},' + '{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},' + '{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},' + '{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},' + '{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},' + '{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},' + '{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},' + '{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},' + '{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},' + '{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]');

3商品功能模块分析

3.1商品表结构

表名：tb_product

字段表中文名category_id分类IDname商品名称subtitle副标题stock库存price价格detail产品详情

3.2商品流程分析

(1)根据分类查询商品列表

(2)分页查询商品信息

(3)根据商品ID查询商品详细信息

(4)保存商品信息

(5)删除商品信息

3.3关键代码分析

@RestController @RequestMapping("api") public class ProductController { @Autowired private ProductService productService; /*** * 分页查询商品列表 * @return */ @RequestMapping(value = "/page/productlist",method = RequestMethod.GET) public CommonResult> getUserPage(TbProductRequestVo tbProductRequestVo){ /*** * 分页查询 */ List list=productService.queryproductByPage(tbProductRequestVo); return CommonResult.success(CommonPage.restPage(list)); } /** * 根据商品Id获取商品 * @return */ @GetMapping("/product/detail/{productId}") public CommonResult getproductinfo(@PathVariable Integer productId){ TbProduct tbProduct=productService.getProductInfo(productId); return CommonResult.success(tbProduct); }

3.4商品管理后台管理系统模块

学习核心：

掌握使用bootstrap css列表页的应用布局：

学会使用bootstrap-table 插件构建分页列表信息查询

学会使用font-awesome字体图标样式如何使用

新增商品如下图：

学会使用layerui弹出窗组件开发

学会使用layerui常用表单布局

学会使用二级分类联动组件select

学会使用layerui校验以及自定义校验

库存