1、界面操作
系统登录
左侧菜单->商品管理->商品分类
新增：填写分类名称，分类图片，状态，排序，上级分类完，点击确认保存。
2、前端实现代码
2.1、顶部搜索栏（页面样式）
代码路径：shop/cate/index.vue
搜索栏目那里拆分为两部分，第一部分是输入搜索框，第二部分是操作按钮，包括新增，修改，删错，导出按钮功能，详细如下截图。
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.cateName" clearable size="small" placeholder="输入分类名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission" />
</div>如上述第2行代码，判断crud.props.searchToggle是否显示，如果显示，则显示搜索输入框，否则不现实
如上述第7行代码，引入crudOperation组件。其中组件:permission是入参变量，将权限数据送入组件，组件根据权限判断是否显示增加，修改，删错，导出的按钮。如下是引入组件的声明，需要声明引入才能正常使用。
import crudOperation from '@crud/CRUD.operation'
components: { Treeselect, crudOperation, rrOperation, udOperation, picUpload, MaterialList },components：组件是拥有一定功能多个html标签的集合体，是对html标签的封装。
2.2、菜单树列表（页面样式）
如下图，商品分类是以树的方式进行显示，包含上下级的
<el-table ref="table" v-loading="crud.loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
<el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column v-if="columns.visible('cateName')" label="名称" prop="cateName" />
<el-table-column v-if="columns.visible('isShow')" label="状态" align="center" prop="isShow">
<template slot-scope="scope">
<div>
<el-tag v-if="scope.row.isShow === 1" :type="''">显示</el-tag>
<el-tag v-else :type=" 'info' ">隐藏</el-tag>
</div>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('sort')" label="排序" prop="sort" sortable/>
<el-table-column v-permission="['admin','YXSTORECATEGORY_EDIT','YXSTORECATEGORY_DELETE']" label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
/>
</template>
</el-table-column>
</el-table>如上述代码第1行，使用el-table标签，显示表格
:tree-props解析：element官网提示设置tree-props为{children: ‘children’,hasChildren: ‘hasChildren’}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id
在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。
设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
default-expand-all属性表示默认展开，不需要展开可以删除。row-key="id" 和 row里面的属性有children字段(即数据里面需要有children字段) 是必须的，:tree-props="{children: ‘children’,hasChildren: ‘hasChildren’}可有可无。
如果不是懒加载的话，后端不要设置hasChildren 这个属性，要不然树形不能显示；
如果是懒加载，则需要设置hasChildren字段。
2.3、数据来源（获取数据事件）
如上述，已经将界面的元素定义好，现在需要动态获取数据。
系统架构封装了CRUD的方法，在页面加载的时候进行操作。
// crud交由presenter持有
const defaultCrud = CRUD({ title: '分类', url: 'api/yxStoreCategory', sort: 'sort,desc', crudMethod: { ...crudDept }})其中URL就是请求后台的接口路径
crudMethod 请求的方法对应crudDept，对应引入的api如下
import crudDept from '@/api/yxStoreCategory'具体api代码如下
export function getCates(params) {
return request({
url: 'api/yxStoreCategory',
method: 'get',
params
})
}2、java的api实现代码
代码目录：
@Log("查询商品分类")
@ApiOperation(value = "查询商品分类")
@GetMapping(value = "/yxStoreCategory")
@PreAuthorize("hasAnyRole('admin','YXSTORECATEGORY_ALL','YXSTORECATEGORY_SELECT')")
public ResponseEntity getYxStoreCategorys(YxStoreCategoryQueryCriteria criteria, Pageable pageable){
List<YxStoreCategoryDto> categoryDTOList = yxStoreCategoryService.queryAll(criteria);
return new ResponseEntity<>(yxStoreCategoryService.buildTree(categoryDTOList),HttpStatus.OK);
}如上述第4行代码，对外提供restfule接口，提供get的方法，接口方法为yxStoreCategory
如上述第5行代码，@PreAuthorize注解，判断当前登录用户是否拥有权限。
如上述第6行代码，
YxStoreCategoryQueryCriteria criteria 将前端请求的json参数，转换存入criteria对象。Pageable pageable是分页处理
如上述第7行，执行查询sql语句。sql查询使用mybatis-plus封装的selectList。
List<T> selectList(@Param("ew") Wrapper<T> queryWrapper);计划
1、ruoyi-flowable-plus工作流拆解
2、ruoyi-flowable-plus如何快速开发
3、电商项目源代码拆解
4、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我