商品管理系统属性分组前后端实现

女爷i 2021-07-24 22:21 520阅读 0赞

# 一 谷粒商城接口文档地址 #

[https://easydoc.xyz/s/78237135][https_easydoc.xyz_s_78237135]

# 二 实战 #

1 前端抽取三级分类组件 category.vue

<template>
      <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        
        <el-tree
          :data="menus"
          :props="defaultProps"
          node-key="catId"
          ref="menuTree"
          @node-click="nodeclick"
          :filter-node-method="filterNode"
          :highlight-current = "true"
        ></el-tree>
      </div>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default {
      //import引入的组件需要注入到对象中才能使用
      components: {},
      props: {},
      data() {
        //这里存放数据
        return {
          filterText: "",
          menus: [],
          expandedKey: [],
          defaultProps: {
            children: "children",
            label: "name"
          }
        };
      },
      //计算属性 类似于data概念
      computed: {},
      //监控data中的数据变化
      watch: {
        filterText(val) {
          this.$refs.menuTree.filter(val);
        }
      },
      //方法集合
      methods: {
        //树节点过滤
        filterNode(value, data) {
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        getMenus() {
          this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get"
          }).then(({ data }) => {
            this.menus = data.data;
          });
        },
        nodeclick(data, node, component) {
          console.log("子组件category的节点被点击", data, node, component);
          // 子组件给父组件发送一个事件，携带上数据
          this.$emit("tree-node-click", data, node, component);
        }
      },
      //生命周期 - 创建完成（可以访问当前this实例）
      created() {
        this.getMenus();
      },
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {},
      beforeCreate() {}, //生命周期 - 创建之前
      beforeMount() {}, //生命周期 - 挂载之前
      beforeUpdate() {}, //生命周期 - 更新之前
      updated() {}, //生命周期 - 更新之后
      beforeDestroy() {}, //生命周期 - 销毁之前
      destroyed() {}, //生命周期 - 销毁完成
      activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
    };
    </script>
    <style scoped>
    
    </style>

2 前端创建属性分组组件 attrgroup.vue

<template>
      <el-row :gutter="20">
        <el-col :span="6">
          
          <category @tree-node-click="treenodeclick"></category>
        </el-col>
        <el-col :span="18">
          <div class="mod-config">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button type="success" @click="getAllDataList()">查询全部</el-button>
                <el-button
                  v-if="isAuth('product:attrgroup:save')"
                  type="primary"
                  @click="addOrUpdateHandle()"
                >新增</el-button>
                <el-button
                  v-if="isAuth('product:attrgroup:delete')"
                  type="danger"
                  @click="deleteHandle()"
                  :disabled="dataListSelections.length <= 0"
                >批量删除</el-button>
              </el-form-item>
            </el-form>
            <el-table
              :data="dataList"
              border
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;"
            >
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column>
              <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column>
              <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
              <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column>
              <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column>
              <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column>
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="150"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="addOrUpdateHandle(scope.row.attrGroupId)"
                  >修改</el-button>
                  <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
            
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    
            
            <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
          </div>
        </el-col>
      </el-row>
    </template>
    
    <script>
    /**
     * 父子组件传递数据
     * 1)、子组件给父组件传递数据，事件机制；
     *    子组件给父组件发送一个事件，携带上数据。
     * // this.$emit("事件名",携带的数据...)
     */
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import Category from "../common/category";
    import AddOrUpdate from "./attrgroup-add-or-update";
    import RelationUpdate from "./attr-group-relation";
    export default {
      //import引入的组件需要注入到对象中才能使用
      components: { Category, AddOrUpdate, RelationUpdate },
      props: {},
      data() {
        return {
          catId: 0, // 被选中的节点Id
          dataForm: {
            key: ""
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
          relationVisible: false
        };
      },
      activated() {
        this.getDataList();
      },
      methods: {
        //处理分组与属性的关联
        relationHandle(groupId) {
          this.relationVisible = true;
          this.$nextTick(() => {
            this.$refs.relationUpdate.init(groupId);
          });
        },
        // 感知树节点被点击，只有3级分类可被点击
        treenodeclick(data, node, component) {
          if (node.level == 3) {
            this.catId = data.catId;
            this.getDataList(); //重新查询
          }
        },
        getAllDataList(){
          this.catId = 0;
          this.getDataList();
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true;
          this.$http({
            url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
            method: "get",
            params: this.$http.adornParams({
              page: this.pageIndex,
              limit: this.pageSize,
              key: this.dataForm.key
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list;
              this.totalPage = data.page.totalCount;
            } else {
              this.dataList = [];
              this.totalPage = 0;
            }
            this.dataListLoading = false;
          });
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val;
          this.pageIndex = 1;
          this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val;
          this.getDataList();
        },
        // 多选
        selectionChangeHandle(val) {
          this.dataListSelections = val;
        },
        // 新增 / 修改
        addOrUpdateHandle(id) {
          this.addOrUpdateVisible = true;
          /* nextTick()作用：当addOrUpdateVisible要渲染的组件完全显示后，再调用它里面定义的方法 */
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init(id);
          });
        },
        // 删除
        deleteHandle(id) {
          var ids = id
            ? [id]
            : this.dataListSelections.map(item => {
                return item.attrGroupId;
              });
          this.$confirm(
            `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          ).then(() => {
            this.$http({
              url: this.$http.adornUrl("/product/attrgroup/delete"),
              method: "post",
              data: this.$http.adornData(ids, false)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataList();
                  }
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          });
        }
      }
    };
    </script>
    <style scoped>
    </style>

3 前端创建新增或修改属性分组组件 attrgroup-add-or-update.vue

<template>
      
      <el-dialog
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        @closed="dialogClose"
      >
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="120px"
        >
          <el-form-item label="组名" prop="attrGroupName">
            <el-input v-model="dataForm.attrGroupName" placeholder="组名"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="descript">
            <el-input v-model="dataForm.descript" placeholder="描述"></el-input>
          </el-form-item>
          <el-form-item label="组图标" prop="icon">
            <el-input v-model="dataForm.icon" placeholder="组图标"></el-input>
          </el-form-item>
          
          <el-form-item label="所属分类" prop="catelogId">
            
            
            
            <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      </el-dialog>
    </template>
    
    <script>
    import CategoryCascader from '../common/category-cascader'
    export default {
      data() {
        return {
          /* 
            级联选择器使用的属性
            value: 指定选项的值为选项对象的某个属性值
            label: 指定选项标签为选项对象的某个属性值
            children: 指定选项的子选项为选项对象的某个属性值
          */
          props:{
            value:"catId",
            label:"name",
            children:"children"
          },
          visible: false,
          categorys: [],
          catelogPath: [], // 分组的完整路径
          dataForm: {
            attrGroupId: 0,
            attrGroupName: "",
            sort: "",
            descript: "",
            icon: "",
            catelogId: 0 // 三级分类Id
          },
          dataRule: {
            attrGroupName: [
              { required: true, message: "组名不能为空", trigger: "blur" }
            ],
            sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
            descript: [
              { required: true, message: "描述不能为空", trigger: "blur" }
            ],
            icon: [{ required: true, message: "组图标不能为空", trigger: "blur" }],
            catelogId: [
              { required: true, message: "所属分类id不能为空", trigger: "blur" }
            ]
          }
        };
      },
      components:{CategoryCascader},
      
      methods: {
        dialogClose(){
          this.catelogPath = []; // 清空菜单完整数据
        },
        /* 获得系统菜单 */
        getCategorys(){
          this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get"
          }).then(({ data }) => {
            this.categorys = data.data;
          });
        },
        /* 当点击修改按钮，会调用该初始化方法 */
        init(id) {
          this.dataForm.attrGroupId = id || 0;
          this.visible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
            if (this.dataForm.attrGroupId) {
              this.$http({
                url: this.$http.adornUrl(
                  `/product/attrgroup/info/${this.dataForm.attrGroupId}`
                ),
                method: "get",
                params: this.$http.adornParams()
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
                  this.dataForm.sort = data.attrGroup.sort;
                  this.dataForm.descript = data.attrGroup.descript;
                  this.dataForm.icon = data.attrGroup.icon;
                  this.dataForm.catelogId = data.attrGroup.catelogId;
                  // 查出catelogId的完整路径
                  this.catelogPath =  data.attrGroup.catelogPath;
                }
              });
            }
          });
        },
        // 表单提交
        dataFormSubmit() {
          this.$refs["dataForm"].validate(valid => {
            if (valid) {
              this.$http({
                url: this.$http.adornUrl(
                  `/product/attrgroup/${
                    !this.dataForm.attrGroupId ? "save" : "update"
                  }`
                ),
                method: "post",
                data: this.$http.adornData({
                  attrGroupId: this.dataForm.attrGroupId || undefined,
                  attrGroupName: this.dataForm.attrGroupName,
                  sort: this.dataForm.sort,
                  descript: this.dataForm.descript,
                  icon: this.dataForm.icon,
                  catelogId: this.catelogPath[this.catelogPath.length-1] // 多即分类路径中的最后1个分类Id
                })
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.visible = false;
                      this.$emit("refreshDataList");
                    }
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            }
          });
        }
      },
      // 初始化菜单
      created(){
        this.getCategorys();
      }
    };
    </script>

4 后端属性分组控制器 AttrGroupController

package com.atguigu.gulimall.product.controller;
    
    import java.util.Arrays;
    import java.util.List;
    import java.util.Map;
    
    import com.atguigu.gulimall.product.entity.AttrEntity;
    import com.atguigu.gulimall.product.service.AttrAttrgroupRelationService;
    import com.atguigu.gulimall.product.service.AttrService;
    import com.atguigu.gulimall.product.service.CategoryService;
    import com.atguigu.gulimall.product.vo.AttrGroupRelationVo;
    import com.atguigu.gulimall.product.vo.AttrGroupWithAttrsVo;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import com.atguigu.gulimall.product.entity.AttrGroupEntity;
    import com.atguigu.gulimall.product.service.AttrGroupService;
    import com.atguigu.common.utils.PageUtils;
    import com.atguigu.common.utils.R;
    
    /**
     * @className: AttrGroupController
     * @description: 属性分组控制器
     * @date: 2020/11/1
     * @author: cakin
     */
    @RestController
    @RequestMapping("product/attrgroup")
    public class AttrGroupController {
        @Autowired
        private AttrGroupService attrGroupService;
    
        @Autowired
        private CategoryService categoryService;
    
        @Autowired
        AttrService attrService;
    
        @Autowired
        AttrAttrgroupRelationService relationService;
        
        @PostMapping("/attr/relation")
        public R addRelation(@RequestBody List<AttrGroupRelationVo> vos){
    
            relationService.saveBatch(vos);
            return R.ok();
        }
        
        @GetMapping("/{catelogId}/withattr")
        public R getAttrGroupWithAttrs(@PathVariable("catelogId")Long catelogId){
            // 1、查出当前分类下的所有属性分组，
            // 2、查出每个属性分组的所有属性
           List<AttrGroupWithAttrsVo> vos =  attrGroupService.getAttrGroupWithAttrsByCatelogId(catelogId);
           return R.ok().put("data",vos);
        }
        
        @GetMapping("/{attrgroupId}/attr/relation")
        public R attrRelation(@PathVariable("attrgroupId") Long attrgroupId){
            List<AttrEntity> entities =  attrService.getRelationAttr(attrgroupId);
            return R.ok().put("data",entities);
        }
        
        @GetMapping("/{attrgroupId}/noattr/relation")
        public R attrNoRelation(@PathVariable("attrgroupId") Long attrgroupId,
                                @RequestParam Map<String, Object> params){
            PageUtils page = attrService.getNoRelationAttr(params,attrgroupId);
            return R.ok().put("page",page);
        }
    
        @PostMapping("/attr/relation/delete")
        public R deleteRelation(@RequestBody  AttrGroupRelationVo[] vos){
            attrService.deleteRelation(vos);
            return R.ok();
        }
    
        /**
         * 功能描述：商品属性组列表
         *
         * @author cakin
         * @date 2020/11/1
         * @param params 过滤条件
         * @param catelogId 商品分组Id
         * @return R 返回给前端的数据
         * @description:
         */
        @RequestMapping("/list/{catelogId}")
        public R list(@RequestParam Map<String, Object> params,
                      @PathVariable("catelogId") Long catelogId){
            PageUtils page = attrGroupService.queryPage(params,catelogId);
            return R.ok().put("page", page);
        }
    
    
        /**
         * 功能描述：属性分组详情
         *
         * @author cakin
         * @date 2020/11/1
         * @param attrGroupId 属性分组Id
         * @return R 返回给前端的数据
         */
        @RequestMapping("/info/{attrGroupId}")
        public R info(@PathVariable("attrGroupId") Long attrGroupId){
    		AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);
            Long catelogId = attrGroup.getCatelogId();
            // 分类的完整路径
            Long[] path = categoryService.findCatelogPath(catelogId);
            attrGroup.setCatelogPath(path);
            return R.ok().put("attrGroup", attrGroup);
        }
    
        
        /**
         * 保存
         */
        @RequestMapping("/save")
        public R save(@RequestBody AttrGroupEntity attrGroup){
    		attrGroupService.save(attrGroup);
            return R.ok();
        }
    
        /**
         * 修改
         */
        @RequestMapping("/update")
        public R update(@RequestBody AttrGroupEntity attrGroup){
    		attrGroupService.updateById(attrGroup);
    
            return R.ok();
        }
    
        /**
         * 删除
         */
        @RequestMapping("/delete")
        public R delete(@RequestBody Long[] attrGroupIds){
    		attrGroupService.removeByIds(Arrays.asList(attrGroupIds));
            return R.ok();
        }
    }

5 后端属性分组实现类 AttrGroupServiceImpl

package com.atguigu.gulimall.product.service.impl;
    
    import com.atguigu.common.utils.PageUtils;
    import com.atguigu.common.utils.Query;
    import com.atguigu.gulimall.product.dao.AttrGroupDao;
    import com.atguigu.gulimall.product.entity.AttrEntity;
    import com.atguigu.gulimall.product.entity.AttrGroupEntity;
    import com.atguigu.gulimall.product.service.AttrGroupService;
    import com.atguigu.gulimall.product.service.AttrService;
    import com.atguigu.gulimall.product.vo.AttrGroupWithAttrsVo;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import org.springframework.beans.BeanUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    import org.springframework.util.StringUtils;
    
    import java.util.List;
    import java.util.Map;
    import java.util.stream.Collectors;
    
    
    @Service("attrGroupService")
    public class AttrGroupServiceImpl extends ServiceImpl<AttrGroupDao, AttrGroupEntity> implements AttrGroupService {
    
        @Autowired
        AttrService attrService;
    
        @Override
        public PageUtils queryPage(Map<String, Object> params) {
            IPage<AttrGroupEntity> page = this.page(
                    new Query<AttrGroupEntity>().getPage(params),
                    new QueryWrapper<AttrGroupEntity>()
            );
            return new PageUtils(page);
        }
    
        @Override
        public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
            String key = (String) params.get("key");
            //select * from pms_attr_group where catelog_id=? and (attr_group_id=key or attr_group_name like %key%)
            QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>();
            // 有检索条件
            if (!StringUtils.isEmpty(key)) {
                wrapper.and((obj) -> {
                    obj.eq("attr_group_id", key).or().like("attr_group_name", key);
                });
            }
            // 没有传catelogId
            if (catelogId == 0) {
                IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),
                        wrapper);
                return new PageUtils(page);
            } else { // 传入了catelogId
                // 封装查询条件到wrapper
                wrapper.eq("catelog_id", catelogId);
                IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),
                        wrapper);
                return new PageUtils(page);
            }
    
        }
    
        /**
         * 根据分类id查出所有的分组以及这些组里面的属性
         *
         * @param catelogId
         * @return
         */
        @Override
        public List<AttrGroupWithAttrsVo> getAttrGroupWithAttrsByCatelogId(Long catelogId) {
            //com.atguigu.gulimall.product.vo
            //1、查询分组信息
            List<AttrGroupEntity> attrGroupEntities = this.list(new QueryWrapper<AttrGroupEntity>().eq("catelog_id", catelogId));
            //2、查询所有属性
            List<AttrGroupWithAttrsVo> collect = attrGroupEntities.stream().map(group -> {
                AttrGroupWithAttrsVo attrsVo = new AttrGroupWithAttrsVo();
                BeanUtils.copyProperties(group, attrsVo);
                List<AttrEntity> attrs = attrService.getRelationAttr(attrsVo.getAttrGroupId());
                attrsVo.setAttrs(attrs);
                return attrsVo;
            }).collect(Collectors.toList());
            return collect;
        }
    }

# 三  测试效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[https_easydoc.xyz_s_78237135]: https://easydoc.xyz/s/78237135
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/141b9436c8e2465e98e460d9344d7bec.png