商品分类管理系统实现（Vue + ElementUI）

已于 2023-02-16 13:32:11 修改
阅读量1.4k 收藏 2
点赞数 3
分类专栏： 毕业设计项目 文章标签： vue.js elementui javascript
于 2022-12-27 19:42:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houzhicongone/article/details/128460533
版权

文章目录

1.前端代码使用el-tree

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js">

  </script>

  <script src="static/js/base.js"></script>
  <script src="static/js/axios.min.js"></script>
  <style>
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  </style>
</head>

<body>


  <div id="app">
    <el-alert title="商品分类管理页面" description="对商品的分类进行管理" type="success" description="对商品的多级分类进行管理" show-icon>
    </el-alert>
    <h2 class="ui teal header" style="color: teawl;margin-top: 30px;text-align: center;">欢迎来到分类管理页面</h2>


    <!-- {{this.categories}} -->

    <!-- 通过一个li遍历多个 -->

    <div class="category">
      <h3 class="ui teal header">商品多级分类名称：</h3>

      <!-- 树形控件实现商品分类 -->
      <el-input placeholder="输入关键字进行商品分类的过滤" v-model="filterText"
        style="width: 800px;background: transparent;border: none; background-color: rgba(255, 255, 255, 0.247);">
      </el-input>
   <el-switch
  style="display: inline-block;"
  v-model="value2"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="开启拖拽"
  >
</el-switch>
<el-button type="danger" size="small" @click="batchDelete" style="padding-right: 30px">批量删除</el-button>
   
      <!-- <el-button type="primary" icon="search">搜索</el-button> -->
<!-- 
      //注意这一组一定要写对，通过categoryId唯一标识，expandedkeys定义需要展开的结点
      node-key="categoryId" 
      :default-expanded-keys="expandedkeys"  -->
      <el-tree show-checkbox class="filter-tree" :data="data1" 
      node-key="categoryId" 
      :default-expanded-keys="expandedkeys" 

       :props="defaultProps"
        :filter-node-method="filterNode"
       ref="menusTree" :expand-on-click-node="false" >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
              增加
            </el-button>
            <el-button  type="text" size="mini" @click="() => edit(data)">
              修改
            </el-button>
            <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>

<!-- 添加商品分类的对话框 -->
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="category">
          <el-form-item label="分类名称">
            <el-input v-model="category.categoryName" autocomplete="off"></el-input>
          </el-form-item>
      
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </div>
      </el-dialog>


    </div>




  </div>
  <script src="static/js/cookie_utils.js"></script>

  <script src="static/js/base.js"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        expandedkeys:[],
        dialogFormVisible:false,
        value2:false,//开启拖拽
        category:{
          categoryId:"",
          categoryName:"",
          categoryLevel:0,
          parentId:0,

        },
        data1: [],
        message: "hello",
        dataList: [],
        categories: [],
        inputCategoryLevel1: true,
        token: "",
        userId: "",
        disabled: true,
        filterText: "",
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'categories',
          label: 'categoryName',
        }

      },
      watch: {
        filterText(val) {
          this.$refs.menusTree.filter(val);
        }
      },
      created() {
        //  商品分类相关参数
        this.showCategorires();
      },
      methods: {
        filterNode(value, data) {
          console.log(value);
          if (!value) return true;
          return data.categoryName.indexOf(value) !== -1;
        },

        // ---------------商品分类查询实现

        showCategorires() {
          let token = getCookieValue("token");
          console.log(token);
          this.token = token;
          let userId = getCookieValue("userId");
          console.log(userId, "UserId");
          this.userId = userId;
          var url22 = baseUrl + "index/categorylist";
          axios({
            url: url22,
            method: "post",
            headers: {
              token: this.token
            },
            data: this.userId
          }).then(res => {
            console.log(res.data.data);
            this.categories = res.data.data;
            this.data1 = res.data.data;
            this.dataList = this.categories.filter(function (type) {
              return type.parentId == "1";
            });
            console.log(this.categories, "categoryList")
            this.categories.forEach(element => {


            });


          })
        },

        // -------------商品分类添加和删除方法

        append(data) {
          console.log("分类添加", data);
          this.category = {};
          this.dialogFormVisible = true;
          this.category.parentId = data.categoryId;
          this.category.categoryLevel = data.categoryLevel*1 +1;
        },
        addCategory(){
          console.log("提交的分类数据",this.category);
          var url5 = baseUrl + "category/addOrUpdate";
          axios({
            url: url5,
            method: "post",
            headers: {
              token: this.token
            },
            data: this.category
          }).then(res => {
            if(res.data.code == 1){
              //添加成功重新查询分类
              this.showCategorires();
              this.dialogFormVisible = false;
              ELEMENT.Message.success("商品分类添加成功");
              //设置默认展开的key
              this.expandedkeys = [this.category.parentId]
            }
            else if(res.data.code == 2){
              console.log("商品分类修改数据----",res.data);
              //添加成功重新查询分类
              this.showCategorires();
              this.dialogFormVisible = false;
              ELEMENT.Message.success("商品分类修改成功");
              //设置默认展开的key
              this.expandedkeys = [this.category.categoryId]
            }
         

        })
      },

        remove(node, data) {
          console.log("分类参数",node,data);
          var cids = [data.categoryId];
          console.log("分类id-------",cids);
          var url3 = baseUrl + "category/delete";
          this.$confirm(`此操作将永久,删除【${data.categoryName}】 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
       
          axios({
            url: url3,
            method: "post",
            headers: {
              token: this.token
            },
            data: cids
          }).then(res => {
            if(res.data.code == 1){
              //删除成功重新查询分类
              this.showCategorires();
              ELEMENT.Message.success("删除分类成功");
              this.dialogFormVisible = false;
              //设置默认展开的key
            
            }
          
         this.expandedkeys = [node.parent.data.categoryId];
      
       
        })


        }).catch(() => {
               
        });

         
      },
        // --------- 商品修改方法
        edit(data){
          console.log("分类数据",data);
          this.category.categoryId = data.categoryId;
          this.category.categoryLevel = data.categoryLevel;
          this.category.parentId = data.parentId;

          this.category.categoryName = data.categoryName;
          this.dialogFormVisible = true;
        },
        //批量删除方法
        batchDelete(){
          let cids = [];
          let categoryNames = [];
          let checkedNodes = this.$refs.menusTree.getCheckedNodes();
          console.log("商品分类选中结点数据",checkedNodes);
          for (let index = 0; index < checkedNodes.length; index++) {
            cids.push(checkedNodes[index].categoryId);
            categoryNames.push(checkedNodes[index].categoryName);

          }

          var url3 = baseUrl + "category/delete";
          this.$confirm(`此操作将批量删除【${categoryNames}】 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
       
          axios({
            url: url3,
            method: "post",
            headers: {
              token: this.token
            },
            data: cids
          }).then(res => {
            if(res.data.code == 1){
              //删除成功重新查询分类
              this.showCategorires();
              ELEMENT.Message.success("批量删除分类成功");
              this.dialogFormVisible = false;
              //设置默认展开的key
              this.expandedkeys = [node.parent.data.categoryId];
            }
          
       
      
       
        })


        }).catch(() => {
               
        });



        },
        UpdateHandle(row) {
          row.disabled = false;
          this.inputCategoryLevel1 = false;
          console.log(row);

        },

      }
    })
  </script>

</body>

</html>

2.后端代码实现(SpringBoot + tkmapper)

package com.qfedu.fmmall.controller;/*
 **
 *@author SmallMonkey
 *@Date 2022/12/27 14:40
 *
 *
 **/

import com.qfedu.fmmall.entity.Category;
import com.qfedu.fmmall.service.CategoryService;
import com.qfedu.fmmall.vo.ResultVO;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.xml.transform.Result;
import java.util.Arrays;

@RestController
@CrossOrigin
@RequestMapping("/category")
public class CategoryController {
    @Resource
    private CategoryService categoryService;

    @PostMapping("/delete")
    public ResultVO deleteCatetegoryByid(@RequestBody Integer[] cids){

        return  categoryService.removeMenuByIds(Arrays.asList(cids));

    }

    @PostMapping("/addOrUpdate")
    public ResultVO addOrUpdateCatetegory(@RequestBody Category category){
        if(category.getCategoryId() !=  null){
          return   categoryService.updateByCatgegoryId(category);
        }

        return  categoryService.addCategory(category);

    }


}
3.Service层实现
package com.qfedu.fmmall.service.impl;

import com.alibaba.druid.util.StringUtils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.fmmall.dao.CategoryMapper;
import com.qfedu.fmmall.entity.Category;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.entity.ProductImg;
import com.qfedu.fmmall.service.CategoryService;
import com.qfedu.fmmall.vo.ParentCategory;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;

import io.swagger.models.auth.In;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.TimeUnit;


@Service
public class CategoryServiceimpl implements CategoryService {
    @Autowired
    private CategoryMapper categoryMapper;
    @Resource
    private StringRedisTemplate stringRedisTemplate;
    @Resource
    ObjectMapper objectMapper = new ObjectMapper();

    public ResultVO listcategories(String userId) {
        List<CategoryVO> categoryVOS = null;

        String categoriesStr = stringRedisTemplate.boundValueOps("categories").get();
        try {
            if(categoriesStr != null && !"".equals(categoriesStr)){
            JavaType javaType = objectMapper.getTypeFactory().constructParametricType(ArrayList.class, CategoryVO.class);
            categoryVOS = objectMapper.readValue(categoriesStr, javaType);
            } else {
            categoryVOS=categoryMapper.selectAllCategories2(0);
            String s = objectMapper.writeValueAsString(categoryVOS);
            stringRedisTemplate.boundValueOps("categories").set(s,1, TimeUnit.DAYS);
            }
        }  catch (Exception e) {
            e.printStackTrace();
        }
        ResultVO resultVO =    resultVO = new ResultVO(ResultStatus.OK, "success", categoryVOS);
        return resultVO;
    }

    @Override
    public ResultVO listParentlist(String userId, String token) {
        ResultVO resultVO = new ResultVO();
        if("1=".equals(userId) && !StringUtils.isEmpty(token)){
            List<ParentCategory> parentCategories = categoryMapper.queryCategoryList();
            resultVO.setData(parentCategories);
            System.out.println(parentCategories);
        }


        return resultVO;
    }

    @Override
    public ResultVO querySubCategory(Integer parenId, String token) {
        ResultVO resultVO = new ResultVO();
        if(!StringUtils.isEmpty(token)){
            List<ParentCategory> parentCategories = categoryMapper.querySubCategoryList(parenId);
            resultVO.setData(parentCategories);
            System.out.println(parentCategories);
        }

        return resultVO;
    }

    @Override
    public ResultVO removeMenuByIds(List<Integer> asList) {
        //TODO 1.检查其他的地方是否引用现在的分类id
        for (int i = 0; i < asList.size(); i++) {
            int j = categoryMapper.deleteByPrimaryKey(asList.get(i));
            //删除的时候得删除缓存操作
            stringRedisTemplate.delete("categories");
            return new ResultVO(ResultStatus.OK,j > 0 ? "删除成功":"删除失败",j );
        }
        return null;

    }

    @Override
    public ResultVO updateByCatgegoryId(Category category) {

        int i = categoryMapper.updateByPrimaryKeySelective(category);
        //删除缓存进行重新设置
        stringRedisTemplate.delete("categories");

        return new ResultVO(ResultStatus.UPDATEOK,i > 0 ? "商品分类更新成功" : "更新商品分类失败",i);
    }

    @Override
    public ResultVO addCategory(Category category) {

        Category category1 = new Category();
        BeanUtils.copyProperties(category,category1);
        category1.setParentId(category.getParentId());
        category.setCategoryName(category.getCategoryName());
        int i = categoryMapper.insertSelective(category1);
        //删除缓存进行重新设置
        stringRedisTemplate.delete("categories");
        return new ResultVO(ResultStatus.OK,i > 0 ? "添加分类成功" : "添加分类失败",i);
    }
}

4.商品分管管理查询效率优化

  1. 查询的字段创建索引，parent_id
  2. 一次性查询出来所有的数据，少和mysql数据库进行交互
4.1 使用缓存

适合场景：实时性要求不高，读多写少，访问量大且更新频率不高

在这里插入图片描述

有时间指导毕业设计
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
07-08
本项目是一套基于SpringBoot+Vue前后端分离的人力资源管理系统，主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业。包含：项目源码、数据库脚本等，该项目...
vue电商后台管理系统—实现商品分类以及分类管理功能
Minnor的博客
06-15 4937
新建分支并推送到码云在component文件夹中新建一个goods文件夹存放商品管理相关组件，新建Cate.vue子组件；在router/index.js中导入子组件并定义子路由规则，注意，路径是浏览器地址栏中的路径名，这里是/categories，有几个新知识，比如自定义数据列tree-table，组件库中没有，官方文档在GitHub中；以及级联选择框等等...
VUE实现二级菜单分类详情
hql1024的博客
11-28 2767
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题</title> <meta name="viewport" content="width=device-width, initial-scale=1...
elementui+vue 商品列表模块之 Steps 步骤条
wangmj518的专栏
02-12 339
el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}上一步，填写商品属性
（五）Vue项目——微商城：实现商品分类、购物车等功能
m0_71824048的博客
05-31 2244
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
Spring Boot + Vue3前后端分离实战wiki知识库系统＜九＞--文档管理功能开发一
webor2006的博客
06-28 546
Spring Boot + Vue3前后端分离实战wiki知识库系统--文档管理功能开发一
vue3 使用setup语法糖实现分类管理
huangdj321的博客
08-16 620
直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后，不用写setup函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在template模板中使用。本次模块使用实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单。...
Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统＜七＞--分类管理功能开发
webor2006的博客
04-15 942
Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统--分类管理功能开发
【Vue】实战项目：电商后台管理系统（Element-UI）（四）商品管理模块-商品分类功能
YK菌的博客
03-19 2823
文章目录1. 商品分类功能1.1 介绍1.2 创建git分支2. 分类参数2.1 介绍2.2 创建git分支3. 商品列表3.1 介绍3.2 创建git分支 1. 商品分类功能 1.1 介绍 1.2 创建git分支 2. 分类参数 2.1 介绍 2.2 创建git分支 3. 商品列表 3.1 介绍 3.2 创建git分支 ...
Spring Boot + Vue的网上商城之商品分类
qq_22593423的博客
09-07 866
通过使用Spring Boot和Vue，我们可以很方便地实现网上商城的商品分类功能。在后台管理中，我们可以通过CategoryController来管理一级分类和二级分类；在前台浏览商品中，我们可以通过ProductController来按分类获取商品列表。这样，用户就可以更方便地浏览和筛选商品了。以上就是Spring Boot + Vue的网上商城之商品分类的详细介绍和代码案例。希望对你有帮助！
ElementUI的el-tree分级标签和图标显示
qq_52130160的博客
08-19 393
根据leve对父子数据的不同去显示不同的label数据，也添加不同的操作按钮，根据实际需求去运用。当初这个样式研究了好久，希望对大家有帮助！然后呢，怎么解决，继续看文档，发现这个slot,就有了如下的解决方法，这个level在文档里面我没看到，询问了大佬才知道！首先，我们先看看el-tree文档中props的参数。el-tree文档链接：组件 | Element。看看针对不同的数据来源如何进行绑定。2.数据的label不相同。1.数据的label相同。
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
基于SpringBoot+MyBatis+Vue+Element的人事管理系统. 包含源代码、数据库DDL SQL、初始化数据SQL等，可以基于此做二次开发，快速搭建自己的业务系统。
基于SpringBoot + Vue + ElementUI 实现人力资源管理系统设计与实现附项目源码+数据库文件+文档说明
05-22
本项目采用了前后端分离的技术，前端是基于 Vue+ElementUI+Axios 开发的，后端 则是基于 Spring Boot+MyBatis Plus+ Jwt+Mysql。本项目实现了权限菜单管理，通过员 工的权限动态渲染菜单，并动态生成路由。通过 Jwt ...
vue+elementUI管理系统页面源代码
02-12
vue2+elementUI后台管理系统，页面源代码，src和static目录,大神必备神器，导入即可，无需更改！
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 417
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 190
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 522
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3组件 描点定位以及监听滚动切换对应activeTab
最新发布
weixin_41824429的博客
04-26 282
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue+elementui后台管理系统
01-25
Vue ElementUI后台管理系统是一款基于Vue.js和ElementUI框架开发的后台管理系统。该系统提供了丰富的组件和模板，能够快速搭建起一个美观、易用的后台管理界面。通过Vue的单页面应用(SPA)技术，实现了页面的快速切换和加载，用户体验非常流畅。 该系统支持响应式布局，可以适配不同大小的屏幕，包括桌面、平板和手机等设备。这样的设计可以保证用户在不同设备上都能够方便地进行管理操作。 系统提供了丰富的UI组件，包括表单、表格、图表、弹窗等，以及各种样式和主题的定制选项，能够满足不同项目的需求。同时，还提供了丰富的插件和扩展功能，可以方便地扩展系统的功能和定制界面。 通过ElementUI提供的权限控制和路由管理功能，可以方便地对系统进行权限配置和页面跳转的管理。这样可以保证不同角色的用户能够获得不同的操作权限，保障系统的安全性和稳定性。 总的来说，Vue ElementUI后台管理系统是一款功能丰富、易用便捷的后台管理解决方案，适用于各种企业和项目，能够帮助开发者快速搭建一个稳定、高效的后台管理界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有时间指导毕业设计

觉得写的好的话可以给我打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值