后台管理系统之商品管理

本文详细介绍了后台管理系统中商品管理的实现,包括商品查询、商品新增和商品修改。在商品查询部分,实现了分页查询SPU及拓展查询分类名称的功能。商品新增涉及到品牌选择、商品描述、规格参数等,使用了富文本编辑器Vue-Quill-Editor。商品修改时,涉及到SpuDetail、Sku和Stock的更新操作。整个过程中,详细讲解了后台接口的编写和服务实现。
摘要由CSDN通过智能技术生成

1.商品查询

效果预览

接下来,我们实现商品管理的页面,先看下我们要实现的效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMAWButm-1586587739098)(assets/1526268595873.png)]

可以看出整体是一个table,然后有新增按钮。是不是跟昨天写品牌管理很像?

页面请求

先看整体页面结构(Goods.vue):

并且在Vue实例挂载后就会发起查询(mounted调用getDataFromServer方法初始化数据):

我们刷新页面,可以看到浏览器发起已经发起了查询商品数据的请求:

在这里插入图片描述
因此接下来,我们编写接口即可。

后台(提供)接口

页面已经准备好,接下来在后台提供分页查询SPU的功能。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1qwI3qQ-1586587739099)(assets/1543414148030.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6InLV9Mw-1586587739099)(assets/1543413983147.png)]

实体类

在leyou-item-interface工程中添加实体类:

SPU

@Table(name = "tb_spu")
public class Spu {
   
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Long brandId;
    private Long cid1;// 1级类目
    private Long cid2;// 2级类目
    private Long cid3;// 3级类目
    private String title;// 标题
    private String subTitle;// 子标题
    private Boolean saleable;// 是否上架
    private Boolean valid;// 是否有效,逻辑删除用
    private Date createTime;// 创建时间
    private Date lastUpdateTime;// 最后修改时间
	// 省略getter和setter
}

SPU详情

@Table(name="tb_spu_detail")
public class SpuDetail {
   
    @Id
    private Long spuId;// 对应的SPU的id
    private String description;// 商品描述
    private String specialSpec;// 商品特殊规格的名称及可选值模板
    private String genericSpec;// 商品的全局规格属性
    private String packingList;// 包装清单
    private String afterService;// 售后服务
    // 省略getter和setter
}

mapper

public interface SpuMapper extends Mapper<Spu> {
   
}

controller

先分析:

  • 请求方式:GET

  • 请求路径:/spu/page

  • 请求参数:

    • page:当前页
    • rows:每页大小
    • key:过滤条件
    • saleable:上架或下架
  • 返回结果:商品SPU的分页信息。

    • 要注意,页面展示的是商品分类和品牌名称,而数据库中保存的是id,怎么办?

      我们可以新建一个类,继承SPU,并且拓展cname和bname属性,写到leyou-item-interface

      public class SpuBo extends Spu {
             
      
          String cname;// 商品分类名称
          
          String bname;// 品牌名称
          
          // 略 。。
      }
      

编写controller代码:

我们把与商品相关的一切业务接口都放到一起,起名为GoodsController,业务层也是这样

@Controller
public class GoodsController {
   

    @Autowired
    private GoodsService goodsService;

    @GetMapping("spu/page")
    public ResponseEntity<PageResult<SpuBo>> querySpuBoByPage(
            @RequestParam(value = "key", required = false)String key,
            @RequestParam(value = "saleable", required = false)Boolean saleable,
            @RequestParam(value = "page", defaultValue = "1")Integer page,
            @RequestParam(value = "rows", defaultValue = "5")Integer rows
    ){
   
        PageResult<SpuBo> pageResult = this.goodsService.querySpuBoByPage(key, saleable, page, rows);
        if(CollectionUtils.isEmpty(pageResult.getItems())){
   
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok(pageResult);
    }

}

service

所有商品相关的业务(包括SPU和SKU)放到一个业务下:GoodsService。

@Service
public class GoodsService {
   

    @Autowired
    private SpuMapper spuMapper;

    @Autowired
    private CategoryService categoryService;

    @Autowired
    private BrandMapper brandMapper;

    public PageResult<SpuBo> querySpuBoByPage(String key, Boolean saleable, Integer page, Integer rows) {
   

        Example example = new Example(Spu.class);
        Example.Criteria criteria = example.createCriteria();
        // 搜索条件
        if (StringUtils.isNotBlank(key)) {
   
            criteria.andLike("title", "%" + key + "%");
        }
        if (saleable != null) {
   
            criteria.andEqualTo("saleable", saleable<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值