谷粒商城--SPU和SKU（属性分组、规格参数、销售属性）

分手后的思念是犯贱 2024-04-07 14:39 85阅读 0赞

#### 属性分组、规格参数 ####

*  SPU和SKU
 *   *  规格参数和销售属性
     *  表的关系理解
     *  导入前端代码
     *  完善后端接口
     *   *  接口开发流程
         *   *  什么是开发接口？
             *  开发思路
         *  属性分组详情
         *   *  显示属性分组
             *  属性分组回显
         *  规格参数详情
         *   *  保存规格参数
             *  显示规格参数
             *  规格参数回显
             *  修改Or增加
             *  spu规格维护
         *  销售属性详情
         *   *  显示销售属性
             *  销售属性回显
             *  修改销售属性
             *  保存销售属性
         *

## SPU和SKU ##

**SPU：standard product unit(标准化产品单元)**：是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。如iphone13是SPU，它是一个产品的集合

\*\*SKU：stock keeping unit(库存量单位)：\*\*库存进出计量的基本单元，可以是件/盒/托盘等单位。

SKU是对于大型连锁超市DC配送中心物流管理的一个必要的方法。现在已经被引申为`产品统一编号`的简称，每种产品对应有唯一的SKU号。如iphone13ProMax 1T 蓝色 是SKU，包子店中肉包子是SKU，素包子是SKU，水煎包是SKU…

### 规格参数和销售属性 ###

像这里的`商品介绍，规格与包装`都是属于SPU的属性。它们都属于是`规格参数`

![image-20220806105620408][]

像版本，颜色等都属是SKU的销售属性

![image-20220806105802342][]

### 表的关系理解 ###

**（1）属性关系-规格参数-销售属性-三级分类 关联关系**

每个三级分类下有各自的属性分组表通过`id和catelogid关联`，能查出每个**分类下的属性分组**

属性分组表和属性表通过一个`属性&属性关联表`进行关联，能查出每个**属性分组下的属性**

最终这样的关系我们可以查出每个分类的`属性分组`和每个`属性分组对应的属性`

![image-20220806110205216][]

**（2）通过思维导图来理解**

> 手机是一级分类，它下面又有属性组，每个属性组又有各自的属性

![image-20220807230244792][]

**（3）SPU-SKU属性表**

商品属性表和属性表通过`attrid`和`id`进行关联，能查出每个**spu的属性**

sku销售属性表是为了表示`spu下不同sku`，比如**1号spu在此表有两个sku**，这两个**sku有不同的销售属性**，是通过`和属性表关联获取`的

![image-20220806110506836][]

**（4）通过思维导图来理解**

> 像网络、像素一般是固定不可选的所以是SPU属性
> 
> 而内存、容量、颜色等可选的就为SKU销售属性

![image-20220807231607457][]

### 导入前端代码 ###

**（1）重新执行“sys\_menus.sql”，完善菜单。**

正常我们是在系统管理里自定义添加，步骤都是一样的，其实在前端页面添加就是把数据提交到mall\_admin表中,这里我们直接把提供的sql语句导入即可！

如下结果：

![image-20220806100125647][]

**（2）实现点击菜单的左边，能够实现在右边展示数据**

![image-20220806112654338][]

这个页面就是三级分类和一个表格显示在一块对吧，属于是`父子组件交互`

前端不具体写了，我们直接导入代码，效果如下：

![image-20220807232635607][]

因为数据库没数据，所以这里不显示

### 完善后端接口 ###

#### 接口开发流程 ####

##### 什么是开发接口？ #####

开发接口就是开发Controller、service、dao

在线接口文档如下`https://easydoc.net/s/78237135/ZUqEdvA4/OXTgKobR`  
别人告诉你需要什么功能，需要返回什么样的数据，你就通过接口的形式把他们呢实现出来即可！

以后工作了也是这种形式，主要是开发接口为多，前端其实不用写太多，能看懂即可！！！

##### 开发思路 #####

思路：

*  根据接口文档写接口
 *  代码中大部分接口已自动生成（MBG），所以我们在前端页面看哪个请求失败
 *  后端改接口

**这一部分都是CRUD相关的代码，所以要好好练好好写！！！**

#### 属性分组详情 ####

##### 显示属性分组 #####

**接口如下：**

![image-20220810220705409][]

**controller**

@RequestMapping("/list/{catelogId}")
        public R list(@RequestParam Map<String, Object> params,
                      @PathVariable("catelogId") Long catelogId){
        
    //        PageUtils page = attrGroupService.queryPage(params);
    
            PageUtils page = attrGroupService.queryPage(params, catelogId);
            return R.ok().put("page", page);
        }

**service**

> 这里注意，前端有两个查询按钮
> 
> 查询和查询全部
> 
> 这两个都要有模糊查询的功能！

PageUtils queryPage(Map<String, Object> params, Long catelogId);
    
    
    @Override
    public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
        
        //多条件查询
        String key = (String) params.get("key");
        QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<>();
        if (!StringUtils.isEmpty(key)) {
        
            wrapper.and((obj) -> {
        
                obj.eq("attr_group_id",key).or().like("attr_group_name",key);
            });
        }
        if (catelogId == 0) {
        
            //如果是默认的是查全部的一级分类
            IPage<AttrGroupEntity> page = this.page(
                new Query<AttrGroupEntity>().getPage(params),
                wrapper);
            return new PageUtils(page);
        } else {
        
            wrapper.eq("catelog_id", catelogId);
            IPage<AttrGroupEntity> page = this.page(
                new Query<AttrGroupEntity>().getPage(params), wrapper);
            return new PageUtils(page);
        }
    }

**测试**

![image-20220811091620116][]

##### 属性分组回显 #####

> 这一部分主要是做属性分组的数据回显的

**接口如下：**

![image-20220810220631503][]

`前端这里省略，需要去elementui找组件，改数据`

**controller**

/**
     * 信息
     */
    @RequestMapping("/info/{attrId}")
    public R info(@PathVariable("attrId") Long attrId){
        
    	AttrEntity attr = attrService.getById(attrId);
    
        Long catelogId = attr.getCatelogId();
        Long[] path = categoryService.findCatelogPath(catelogId);
        attr.setCatelogPath(path);
    
        return R.ok().put("attr", attr);
    }

**service**

> **获取分类路径id**
> 
> 通过递归操作完成
> 
> **过程**
> 
> 给一个分类id，不断的查它的父类id直到查不到为止，最后把查询到的id到放到一个集合里
> 
> **怎样写好递归？**
> 
> 1.  确定参数值和返回值
> 2.  确定终止条件
> 3.  递归逻辑
> 
> 三者缺一不可！！！

//找到catelogId的完整路径:[父/子/孙]
    @Override
    public Long[] findCatelogPath(Long catelogId) {
        
        ArrayList<Long> list = new ArrayList<>();
        List<Long> parentPath = findParentPath(catelogId, list);//1.确定递归参数和返回值
    
        Collections.reverse(parentPath);
        return (Long[]) list.toArray(new Long[parentPath.size()]);
    }
    
    private List<Long> findParentPath(Long catelogId,ArrayList<Long> list){
        
        //3.递归逻辑
        list.add(catelogId);
        CategoryEntity entity = this.getById(catelogId);
        if (entity.getParentCid()!=0){
        //2.递归终止条件
            findParentPath(entity.getParentCid(),list);
        }
        return list;
    }

**测试**

返回属性的父路径id

![image-20220811092606249][]

#### 规格参数详情 ####

**接口如下：**  
![image-20220810220725125][]

**什么是规格参数？**

![image-20220808231624265][]

##### 保存规格参数 #####

**controller**

/**
     * 保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody AttrVo vo){
        
    	attrService.saveAttr(vo);
        return R.ok();
    }

**service**

> 这里注意，因为添加规格参数的时候会有选择属性组，因为`属性组和属性`是通过关联关系表连接的所以要有级联操作。
> 
> **在往pms\_attr表插入数据的时候，pms\_attr\_group\_relation也要插入**
> 
> `小bug`：这里有个注意点，当添加规格参数的时候如果没有指定规格参数所属分组，那么就不应该在关联表中保存关联关系！！！

@Override
    public void saveAttr(AttrVo attr) {
        
        AttrEntity attrEntity = new AttrEntity();
        //1.将前端接收数据的对象vo赋值给attrEntity对象，从而更新数据库
        BeanUtils.copyProperties(attr, attrEntity);
        this.save(attrEntity);
    
        if (attr.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode() && attr.getAttrGroupId() != null) {
        
            //2.保存关联关系
            //因为属性组和属性是通过关联关系表连接的
            AttrAttrgroupRelationEntity relationEntity = new AttrAttrgroupRelationEntity();
            relationEntity.setAttrGroupId(attr.getAttrGroupId());
            relationEntity.setAttrId(attrEntity.getAttrId());
            relationService.save(relationEntity);
        }
    
    }

##### 显示规格参数 #####

**controller**

/**
     * 显示规格参数
     */
    @GetMapping("/base/list/{catelogId}")
    public R baseAttrList(@RequestParam Map<String, Object> params,
                          @PathVariable("catelogId") Integer catelogId) {
        
        PageUtils page = attrService.queryBaseAttrPage(params, catelogId);
        return R.ok().put("page", page);
    }

**service**

//分页查询规格参数
    @Override
    public PageUtils queryBaseAttrPage(Map<String, Object> params, Integer catelogId) {
        
        QueryWrapper<AttrEntity> wrapper = new QueryWrapper<>();
        if (catelogId != 0) {
        
            //如果不是一级分类，那么查询的时候加上where catelog_id = ?
            wrapper.eq("catelog_id", catelogId);
        }
    
        //多条件模糊查询
        //搜索框里的key不但可以对catelog_id进行模糊查询，对attr_name也模糊查询
        String key = (String) params.get("key");
        if (!StringUtils.isEmpty(key)) {
        
            wrapper.eq("attr_id", key).or().like("attr_name", key);
        }
    
        //多条件分页查询
        IPage<AttrEntity> page = this.page(
            new Query<AttrEntity>().getPage(params),
            wrapper);
    
        PageUtils pageUtils = new PageUtils(page);
        return pageUtils;
    }

**测试**

如下：

![image-20220810205809739][]

**这些属性的分类和所属分组怎么查呢？**

> `规格参数表（pms_attr）`中，有所属分类的信息，可以直接调用分类的service进行查询
> 
> 那分组信息怎么查询呢？规格参数表中没有所属分类相关的信息…
> 
> 这里我们就要借助第三张表，`属性和分组表（pms_attr_attrgroup_relation）`进行查询
> 
> 通过`规格参数表（pms_attr）`获得`attr_id`，之后在调用`属性和分组表`的service`获得属性和分组表的实体类`，从而获得该属性的分组
> 
> 下面通过`stream`流的方式，通过map给list集合中的每一项做映射给`新实体类（AttrRespVo）`赋值，最后返回`AttrRespVo`
> 
> `小bug：`这里显示规格参数的时候，会显示规格。参数对应的分组、分类，那么如果它们查出对象分组id或分类id为空那就不设置名字if (attrId != null && attrId.getAttrGroupId() != null) \{…\}

//分页查询规格参数
    @Override
    public PageUtils queryBaseAttrPage(Map<String, Object> params, String type, Integer catelogId) {
        
        QueryWrapper<AttrEntity> wrapper = new QueryWrapper<AttrEntity>()
            .eq("attr_type", "base".equalsIgnoreCase(type) ? ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode() : ProductConstant.AttrEnum.ATTR_TYPE_SALE.getCode());
        if (catelogId != 0) {
        
            //如果不是一级分类，那么查询的时候加上where catelog_id = ?
            //IgnoreCase忽略大小写
            wrapper.eq("catelog_id", catelogId);
        }
    
        //多条件模糊查询
        //搜索框里的key不但可以对catelog_id进行模糊查询，对attr_name也模糊查询
        String key = (String) params.get("key");
        if (!StringUtils.isEmpty(key)) {
        
            wrapper.eq("attr_id", key).or().like("attr_name", key);
        }
    
        //多条件分页查询
        IPage<AttrEntity> page = this.page(
            new Query<AttrEntity>().getPage(params),
            wrapper);
    
        PageUtils pageUtils = new PageUtils(page);
    
    
        List<AttrEntity> list = page.getRecords();
        //        .map()这个方法是对被筛选过后的流进行映射，一般是对属性进行赋值。
        List<AttrRespVo> resultList = list.stream().map(item -> {
        
            AttrRespVo attrRespvo = new AttrRespVo();
            BeanUtils.copyProperties(item, attrRespvo);
            //设置分类和分组的名字
            if ("base".equalsIgnoreCase(type)) {
        
                AttrAttrgroupRelationEntity attrId = relationService.
                    getOne(new QueryWrapper<AttrAttrgroupRelationEntity>()
                           .eq("attr_id", item.getAttrId()));
                if (attrId != null && attrId.getAttrGroupId() != null) {
        
                    //attrgroupRelationEntity.getAttrGroupId()也可以，这里可以直接放进去对象
                    AttrGroupEntity attrGroupEntity = attrGroupService.getById(attrId.getAttrGroupId());
                    attrRespvo.setGroupName(attrGroupEntity.getAttrGroupName());
                }
            }
    
            CategoryEntity categoryEntity = categoryService.getById(item.getCatelogId());
            if (categoryEntity != null) {
        
                attrRespvo.setCatelogName(categoryEntity.getName());
            }
            //返回最后的封装结果
            return attrRespvo;
        }).collect(Collectors.toList());
    
        //返回的结果是一个集合
        pageUtils.setList(resultList);
    
        //        返回分页后的集合对象
        return pageUtils;
    }

**AttrRespVo**

@Data
    public class AttrRespVo extends AttrVo {
        
        private String catelogName;
        private String  groupName;
    }

**测试**

![image-20220811084206902][]

##### 规格参数回显 #####

> 可以看出所属分类和分组都是由这条请求查询的，那么我们改这个接口功能就行
> 
> 相当于在`原来查询基础上`返回`分类路径信息`，`分组信息`

![image-20220810221107404][]

**controller**

/**
     * 信息
     */
    @RequestMapping("/info/{attrId}")
    public R info(@PathVariable("attrId") Long attrId) {
        
        AttrRespVo respVo = attrService.getAttrInfo(attrId);
        return R.ok().put("attr", respVo);
    }

**service**

@Override
    public AttrRespVo getAttrInfo(Long attrId) {
        
        AttrRespVo respVo = new AttrRespVo();
        AttrEntity attrEntity = this.getById(attrId);
        BeanUtils.copyProperties(attrEntity, respVo);
    
        /**
         * 设置分组信息
         */
        AttrAttrgroupRelationEntity attrgroupRelationEntity = relationService.
                getOne(new QueryWrapper<AttrAttrgroupRelationEntity>()
                        .eq("attr_id", attrEntity.getAttrId()));
        if (attrgroupRelationEntity != null){
        
            respVo.setAttrGroupId(attrgroupRelationEntity.getAttrGroupId());
    
            Long attrGroupId = attrgroupRelationEntity.getAttrGroupId();
            AttrGroupEntity attrGroupEntity = attrGroupService.getById(attrGroupId);
            if (attrGroupEntity != null) {
        
                respVo.setGroupName(attrGroupEntity.getAttrGroupName());
            }
        }
    
    
        /**
         * 设置分类信息
         */
        Long catelogId = attrEntity.getCatelogId();
        //有了分类的完整路径，接下来就设置分类名字
        Long[] catelogPath = categoryService.findCatelogPath(catelogId);
        respVo.setCatelogPath(catelogPath);
    
        //获得分类名字
        CategoryEntity categoryEntity = categoryService.getById(catelogId);
        if (categoryEntity != null) {
        
            respVo.setCatelogName(categoryEntity.getName());
        }
    
        return respVo;
    }

**测试**

![image-20220810232827723][]

##### 修改Or增加 #####

> 提交修改分类和分组是无效的？
> 
> 更改用的还是默认的update方法，所以我们改update接口！

![image-20220810232652674][]

**controller**

/**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody AttrVo attr) {
        
        attrService.updateAttr(attr);
    
        return R.ok();
    }

**service**

> 这里做了优化，对于规格参数中没有所属分组的，如果指定了不在是修改而是添加！
> 
> **怎么判断规格参数有没有所属分组呢？**
> 
> 拿attr\_id去`pms_attr_attrgroup_relation`表中查询，如果改attr\_id存在与该表，那就修改关联关系
> 
> 如果没有数据，那么就在此表添加数据！

@Transactional
    @Override
    public void updateAttr(AttrVo attr) {
        
        AttrEntity attrEntity = new AttrEntity();
        BeanUtils.copyProperties(attr, attrEntity);
        this.updateById(attrEntity);
        //修改分组关联
        AttrAttrgroupRelationEntity attrAttrgroupRelationEntity = new AttrAttrgroupRelationEntity();
    
        attrAttrgroupRelationEntity.setAttrGroupId(attr.getAttrGroupId());
        attrAttrgroupRelationEntity.setAttrId(attr.getAttrId());
    
        //统计attr_id的关联属性,如果没有初始分组,则进行添加操作;有则进行修改操作
        Integer count = relation.selectCount(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id", attr.getAttrId()));
        if (count > 0) {
        
            relation.update(attrAttrgroupRelationEntity, new UpdateWrapper<AttrAttrgroupRelationEntity>().eq("attr_id", attr.getAttrId()));
        } else {
        
            relation.insert(attrAttrgroupRelationEntity);
        }
    }

##### spu规格维护 #####

出现400页面，在数据库添加

INSERT INTO sys_menu (menu_id, parent_id, name, url, perms, type, icon, order_num) VALUES (76, 37, '规格维护', 'product/attrupdate', '', 2, 'log', 0);
    
    更新index.js，哪里更新？找老师的源码

> controller

@PostMapping("/update/{spuId}")
    public R updateSpuAttr(@PathVariable("spuId") Long spuId,
                           @RequestBody List<ProductAttrValueEntity> entities){
        
    
        productAttrValueService.updateSpuAttr(spuId,entities);
    
        return R.ok();
    }

> impl

这里的修改其实是先把原来的spu\_id下的属性都删除掉

之后在把前端传来的属性集合进行批量保存

@Transactional(rollbackFor = Exception.class)
    @Override
    public void updateSpuAttr(Long spuId, List<ProductAttrValueEntity> entities) {
        
        //1、删除spuId之前对应的所有属性
        this.baseMapper.delete(new QueryWrapper<ProductAttrValueEntity>().eq("spu_id",spuId));
    
        //2、添加商品规格信息
        List<ProductAttrValueEntity> collect = entities.stream().map(item -> {
        
            item.setSpuId(spuId);
            return item;
        }).collect(Collectors.toList());
    
        //批量新增
        this.saveBatch(collect);
    }

#### 销售属性详情 ####

##### 显示销售属性 #####

如图`http://localhost:88/api/product/attr/sale/list/0?t=1660181297434&page=1&limit=10&key=`这个接口有问题！

所以我们就去后端改这个接口即可！

![image-20220811092412567][]

**controller**

> 规格参数和销售参数的区别在于type的值，`type为 1是规格参数`，`type为0是销售参数`
> 
> 这里采用一个方法当两个来用！

![image-20220811094628873][]

@GetMapping("/{attrType}/list/{catelogId}")
    public R baseAttrList(@RequestParam Map<String, Object> params,
                          @PathVariable("attrType") String type,
                          @PathVariable("catelogId") Integer catelogId) {
        
        PageUtils page = attrService.queryBaseAttrPage(params, type, catelogId);
        return R.ok().put("page", page);
    }

**service**

> 在原来对规格参数的基础上加了限制条件，如果是规格参数那就是WHERE attr\_type = 1,否则就是WHERE attr\_type = 0；
> 
> 下面的逻辑和查询规格参数一致，都要模糊查询
> 
> 这里为了使代码更通用，1和0的值我们写一个常量来控制，如过后期换值了我们直接更改常量的值即可

**ProductConstant**

package com.caq.common.constant;
    
    public class ProductConstant {
        
    
        public enum AttrEnum{
        
            ATTR_TYPE_BASE(1,"基本属性"),
            ATTR_TYPE_SALE(0,"销售属性");
    
            private int code;
    
            private String msg;
    
            AttrEnum(int code,String msg){
        
                this.code = code;
                this.msg = msg;
            }
    
            public int getCode(){
        
                return code;
            }
    
            public String getMsg(){
        
                return msg;
            }
        }
    }

在原来对规格参数的基础上加了限制条件，如果是规格参数那就是`WHERE attr_type = 1`,否则就是`WHERE attr_type = 0；`

@Override
        public PageUtils queryBaseAttrPage(Map<String, Object> params, String type, Integer catelogId) {
        
            QueryWrapper<AttrEntity> wrapper = new QueryWrapper<AttrEntity>()
                    .eq("attr_type", "base".equalsIgnoreCase(type) ? ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode() : ProductConstant.AttrEnum.ATTR_TYPE_SALE.getCode());
    
            if (catelogId != 0) {
        
                //如果不是一级分类，那么查询的时候加上where catelog_id = ?
                //IgnoreCase忽略大小写
                wrapper.eq("catelog_id", catelogId);
            }
    
            //多条件模糊查询
            //搜索框里的key不但可以对catelog_id进行模糊查询，对attr_name也模糊查询
            String key = (String) params.get("key");
            if (!StringUtils.isEmpty(key)) {
        
                wrapper.eq("attr_id", key).or().like("attr_name", key);
            }
    
            //多条件分页查询
            IPage<AttrEntity> page = this.page(
                    new Query<AttrEntity>().getPage(params),
                    wrapper);
    
            PageUtils pageUtils = new PageUtils(page);
    
            List<AttrEntity> list = page.getRecords();
    //        .map()这个方法是对被筛选过后的流进行映射，一般是对属性进行赋值。
            List<AttrRespVo> resultList = list.stream().map(item -> {
        
                AttrRespVo attrRespvo = new AttrRespVo();
                BeanUtils.copyProperties(item, attrRespvo);
                AttrAttrgroupRelationEntity attrgroupRelationEntity = relationService.
                        getOne(new QueryWrapper<AttrAttrgroupRelationEntity>()
                                .eq("attr_id", item.getAttrId()));
    
                if (attrgroupRelationEntity != null) {
        
                    //attrgroupRelationEntity.getAttrGroupId()也可以，这里可以直接放进去对象
                    AttrGroupEntity attrGroupEntity = attrGroupService.getById(attrgroupRelationEntity);
                    attrRespvo.setGroupName(attrGroupEntity.getAttrGroupName());
                }
    
                CategoryEntity categoryEntity = categoryService.getById(item.getCatelogId());
                if (categoryEntity != null) {
        
                    attrRespvo.setCatelogName(categoryEntity.getName());
                }
                //返回最后的封装结果
                return attrRespvo;
            }).collect(Collectors.toList());
    
            //返回的结果是一个集合
            pageUtils.setList(resultList);
    
    //        返回分页后的集合对象
            return pageUtils;
        }

##### 销售属性回显 #####

> 可以看到，销售属性回显是不需要所属分组的
> 
> 但是`销售属性`和`规格参数`用的是`同一个回显方法`，我们也进行更改，`只有是规格参数的时候才进行分组回显`！

![image-20220811104643952][]

在原分组回显的逻辑上加上判断，后面逻辑不变！

if (attrEntity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()) {
        
        ...
    }

![image-20220811104920477][]

##### 修改销售属性 #####

> `销售属性`和`规格参数`用的是`同一个修改方法`，销售属性进行修改时，会对关联表进行一个级联更新，但销售属性不需要
> 
> 所以也在对关联表级联更新的时候进行判断，只有销售属性修改的时候才进行级联更新！

if (attrEntity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()) {
        
        ...
    }

![image-20220811105227416][]

##### 保存销售属性 #####

> `销售属性`和`规格参数`用的是`同一个保存方法`，销售属性进行保存时，会对关联表进行一个级联保存，但销售属性不需要
> 
> 所以也在对关联表级联保存的时候进行判断，只有销售属性保存的时候才进行级联保存！

if (attrEntity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()) {
        
        ...
    }

![image-20220811105415725][]

####  ####

[image-20220806105620408]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6f94f5d5c8644db48c9db64cb2262558.png
[image-20220806105802342]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f43625bd8ba448c9b928029741f5604c.png
[image-20220806110205216]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e2692caed7fc4e9689a8f04c7a59375d.png
[image-20220807230244792]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f702fe16cf524998a5d5fbfad34d2f73.png
[image-20220806110506836]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8251925020fc422cb43d767191a632aa.png
[image-20220807231607457]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0372ef7d6ca443368cdc865d7a1b87ff.png
[image-20220806100125647]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9ce8d33f7e2443dfaa73a5de5ad5a97e.png
[image-20220806112654338]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7130a726d8e74da0b9beb00382c780f7.png
[image-20220807232635607]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1e9c83e8fbbf4c6b923479736434ed81.png
[image-20220810220705409]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/48fff9ab814c49d88297a0952187ee05.png
[image-20220811091620116]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/43a9315a14af428194f9a05e698419f0.png
[image-20220810220631503]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/308b5188e6e04a6da932ffab993406a2.png
[image-20220811092606249]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6791115a7dec4262a14a3a3991fafa5b.png
[image-20220810220725125]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0f832ea0d0dd44fba1c6c459b8269047.png
[image-20220808231624265]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/337caec4fe1a44be9baf1e1b8206f61e.png
[image-20220810205809739]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a8dc5cafa19c470da82efa0fb03302e2.png
[image-20220811084206902]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/118157112f814fa1a98b57b232cb328f.png
[image-20220810221107404]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/af65635af4154379a8dd086b7cbc8327.png
[image-20220810232827723]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c0e338c749e84204bacd8fcbe0437c37.png
[image-20220810232652674]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8da07816841142dfb7112f88fbb46743.png
[image-20220811092412567]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f753926e94f34ee59de1fee9f9ecd898.png
[image-20220811094628873]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/521803644a844dd6978f3548f1811b6f.png
[image-20220811104643952]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f5d9217076f2411881ae7bacbcc256ea.png
[image-20220811104920477]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1901850a39684d26b5c233e0b9824c51.png
[image-20220811105227416]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/dbe43600918e4703ac4bc20abf5d897e.png
[image-20220811105415725]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d4331c0495f44beea0906e875ff8321f.png