上一篇文章已经介绍商品分类的数据模型和列表如何展示，本章节介绍CRUD的详细代码

1、操作界面

打开商品列表

在工作区分离列表右侧，点击编辑

修改成功后刷新商品分类列表

2、前端代码分析

2.1、新增/编辑按钮代码

顶部的增加，修改，删除封装在crudOperation组件

<crudOperation :permission="permission" />

  import crudOperation from '@crud/CRUD.operation'
  components: { Treeselect, crudOperation, rrOperation, udOperation, picUpload, MaterialList },

crudOperation组件代码路径如下：

<el-button
  v-if="crud.optShow.add"
  v-permission="permission.add"
  class="filter-item"
  size="mini"
  type="primary"
  icon="el-icon-plus"
  @click="crud.toAdd"
>
  新增
</el-button>

如上述第2行代码，判断是否显示

如上述第3行代码，判断登录用户是否有权限

如上述第8行代码，绑定点击事件crud.toAdd

上述的新增详细执行函数如下：

/**
 * 启动添加
 */
toAdd() {
  if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
    return
  }
  crud.status.add = CRUD.STATUS.PREPARED
  callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
  callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},

如上述代码第8行，将状态设置为CRUD.STATUS.PREPARED

<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">

如上述编辑表单的对话框，:visible.sync="crud.status.cu > 0" 因为crud.status.cu被赋值为CRUD.STATUS.PREPARED，所以"crud.status.cu > 0"运算结果是true，编辑表单显示。

显示效果下图：

2.2、绑定确认事件，保存

// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
  this.picArr = []
  if (form.pic && form.id) {
    this.picArr = form.pic.split(',')
  }

  // 获取所有部门
  crudDept.getCates({ isShow: true }).then(res => {
    this.depts = []
    const dept = { id: 0, label: '顶级类目', children: [] }
    dept.children = res.content
    this.depts.push(dept)
  })
},
// 提交前的验证
[CRUD.HOOK.afterValidateCU]() {
  return true
},

如上述代码，点击提交先执行第17行代码，验证表单参数是否满足要求。

验证通过过，继续执行，执行的函数如上述第2行代码。

上述代码是新增与编辑前做的操作，下面是将表单提交给后台接口，实现CRUD

/**
 * 提交新增/编辑
 */
submitCU() {
  if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
    return
  }
  crud.findVM('form').$refs['form'].validate(valid => {
    if (!valid) {
      return
    }
    if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
      return
    }
    if (crud.status.add === CRUD.STATUS.PREPARED) {
      crud.doAdd()
    } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
      crud.doEdit()
    }
  })

如上述第15，16行代码，执行增加操作，将表单数据提交给后台api

3、JAVA后台接口代码

接口路径如下截图

@ForbidSubmit
@Log("新增商品分类")
@ApiOperation(value = "新增商品分类")
@PostMapping(value = "/yxStoreCategory")
@CacheEvict(cacheNames = ShopConstants.YSHOP_REDIS_INDEX_KEY,allEntries = true)
@PreAuthorize("hasAnyRole('admin','YXSTORECATEGORY_ALL','YXSTORECATEGORY_CREATE')")
public ResponseEntity create(@Validated @RequestBody YxStoreCategory resources){
    if(resources.getPid() != null && resources.getPid() > 0 && StrUtil.isBlank(resources.getPic())) {
        throw new YshopException("子分类图片必传");
    }

    boolean checkResult = yxStoreCategoryService.checkCategory(resources.getPid());
    if(!checkResult) {
        throw new YshopException("分类最多能添加2级哦");
    }

    return new ResponseEntity<>(yxStoreCategoryService.save(resources),HttpStatus.CREATED);
}

@ForbidSubmit
@Log("修改商品分类")
@ApiOperation(value = "修改商品分类")
@CacheEvict(cacheNames = ShopConstants.YSHOP_REDIS_INDEX_KEY,allEntries = true)
@PutMapping(value = "/yxStoreCategory")
@PreAuthorize("hasAnyRole('admin','YXSTORECATEGORY_ALL','YXSTORECATEGORY_EDIT')")
public ResponseEntity update(@Validated @RequestBody YxStoreCategory resources){
    if(resources.getPid() != null && resources.getPid() > 0 && StrUtil.isBlank(resources.getPic())) {
        throw new YshopException("子分类图片必传");
    }

    if(resources.getId().equals(resources.getPid())){
        throw new YshopException("自己不能选择自己哦");
    }

    boolean checkResult = yxStoreCategoryService.checkCategory(resources.getPid());

    if(!checkResult) {
        throw new YshopException("分类最多能添加2级哦");
    }

    yxStoreCategoryService.saveOrUpdate(resources);
    return new ResponseEntity(HttpStatus.NO_CONTENT);
}

@ForbidSubmit
@Log("删除商品分类")
@ApiOperation(value = "删除商品分类")
@CacheEvict(cacheNames = ShopConstants.YSHOP_REDIS_INDEX_KEY,allEntries = true)
@DeleteMapping(value = "/yxStoreCategory/{id}")
@PreAuthorize("hasAnyRole('admin','YXSTORECATEGORY_ALL','YXSTORECATEGORY_DELETE')")
public ResponseEntity delete(@PathVariable String id){
    String[] ids = id.split(",");
    for (String newId: ids) {
        this.delCheck(Integer.valueOf(newId));
        yxStoreCategoryService.removeById(Integer.valueOf(newId));
    }
    return new ResponseEntity(HttpStatus.OK);
}

计划

1、ruoyi-flowable-plus工作流拆解

2、ruoyi-flowable-plus如何快速开发

3、电商项目源代码拆解

4、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我