购物网站中，商品管理板块也是重要的一个版块，下面我会从后台管理系统和前台管理页面去讲述购物网站商品模块功能的开发。
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<TbCategory>> 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<CommonPage<TbProduct>> getUserPage(TbProductRequestVo tbProductRequestVo){/*** * 分页查询 */List<TbProduct> list=productService.queryproductByPage(tbProductRequestVo); return CommonResult.success(CommonPage.restPage(list)); }/** * 根据商品Id获取商品 * @return */@GetMapping("/product/detail/{productId}") public CommonResult<TbProduct> 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校验以及自定义校验
<label class="layui-form-label">库存</label> <div class="layui-input-inline"> <input type="text" name="stock" lay-verify="stock" placeholder="" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">件</div> </div> <div class="layui-form-item"> <label class="layui-form-label">价格</label> <div class="layui-input-inline"> <input type="text" name="price" lay-verify="number" placeholder="" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">元</div> </div>
学会使用summernote富文本编辑器满足html大文本编辑器需求，是个很好用的编辑器
使用方法如下：
（1）引入css<link href="../../css/plugins/summernote/summernote.css" rel="stylesheet"> <link href="../../css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
(2)引入js
<script src="../../js/plugins/summernote/summernote.min.js"></script> <script src="../../js/plugins/summernote/summernote-zh-CN.js"></script> ```javascript
(3)初始化加载富文本编辑器
$('#summernote').summernote({ height : 400,//初始化默认高度minHeight : null,//最小高度maxHeight : null,//最大高度lang : 'zh-CN',//注意这里，若要设置语言，则需要引入该语言配置jsplaceholder : "请在这里写下您的内容"/* onImageUpload : function(files, editor, $editable) { sendFile(files[0], editor, $editable); }*/});
(4)页面html元素
<div class="mail-text h-200" style="width:84%;"> <div id="summernote"></div> <div class="clearfix"></div> </div>
4个人说明
经验是由一点一点积累的，思维也是由一天一天训练出来的。
5我的个人网站
持续更新分享此项目电商在线演示地址为：演示地址
inspinia中文管理后台_JAVA项目实战开发电商项目案例（六与七）商品分类与商品模块管理开发
