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

1演示效果

1.1前台演示地址演示地址

JAVA电商实战项目 电商java项目步骤详解_spring bot微服务

1.2后台演示地址演示地址

JAVA电商实战项目 电商java项目步骤详解_spring bot微服务_02

2商品分类功能

2.1商品分类表分析

JAVA电商实战项目 电商java项目步骤详解_ssm_03


表名：tb_category

字段

中文含义

parentId

上级类目ID

name

分类名称

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商品分类后台管理系统

JAVA电商实战项目 电商java项目步骤详解_电商项目实战_04

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

JAVA电商实战项目 电商java项目步骤详解_spring bot微服务_05

字段

表中文名

category_id

分类ID

name

商品名称

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商品管理后台管理系统模块

JAVA电商实战项目 电商java项目步骤详解_spring bot微服务_06

学习核心：
掌握使用bootstrap css列表页的应用布局：
学会使用bootstrap-table 插件构建分页列表信息查询
学会使用font-awesome字体图标样式如何使用

新增商品如下图：

JAVA电商实战项目 电商java项目步骤详解_spring bot微服务_07

学会使用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 >
    <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', //注意这里，若要设置语言，则需要引入该语言配置js
        placeholder : "请在这里写下您的内容"
     /*   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个人说明

经验是由一点一点积累的，思维也是由一天一天训练出来的。