家居分类的添加、修改、逻辑删除和批量删除

S-X-S2024-05-14 7:03

文章目录

1.逻辑删除家居分类

1.将之前的docker数据库换成云数据库
2.树形控件增加添加和删除按钮
1.找到控件
2.粘贴四个属性到<el-tree 属性>
3.粘贴两个span到标签里
4.代码
vue 复制代码 
<template>
  <el-tree :data="data"
           :props="defaultProps"
           show-checkbox
           node-key="id"
           :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => add(node, data)">
                  Add
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
                  Delete
                </el-button>
              </span>
            </span>
  </el-tree>
</template>
5.效果
6.方法区新增两个方法处理添加和删除分类
7.输出查看一下信息
8.要求节点等级小于等于2允许有Add，没有子节点允许Delete
3.MyBatis-Plus逻辑删除
1.官方文档

https://baomidou.com/pages/6b03c5/#步骤-1-配置com-baomidou-mybatisplus-core-config-globalconfig-dbconfig

2.具体介绍
3.配置方式
1.在application.yml的db-config下添加logic的三句话，逻辑已删除值为0，未删除值为1
yaml 复制代码 
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml # 这个表示扫描mapper文件夹下的所有xml文件，即使是子文件夹下的也会扫描
  global-config:
    db-config:
      logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
      logic-delete-value: 0 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 1 # 逻辑未删除值(默认为 0)
      id-type: auto # 主键策略自增，就是不给主键赋值也会自动增长，配置entity的注解@TableId使用
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印sql语句，生产环境中可以去掉
2.com/sun/sunliving/commodity/entity/CategoryEntity.java 给相应字段添加 @TableLogic 注解
3.如果没有在application.yml中配置逻辑删除的值，还可以直接在@TableLogic 注解中指定
4.postman测试逻辑删除
1.发送请求 http://localhost:9091/commodity/category/delete
2.查看表字段
3.使用MyBatis-Plus再查询一下 ，发现确实不会再被查到了 http://localhost:9091/commodity/category/list
5.点击超链接完成删除
1.点击删除查看返回信息
2.输出查看id
3.代码实现
js 复制代码 
    // 删除分类
    remove(node, data){
      // 获取要删除的id
      var ids = [data.id]
      // 发送请求
      this.$http({
        url: process.env.BASEPATH + '/commodity/category/delete',
        method: 'post',
        data: this.$http.adornData(ids, false)
      }).then(({data}) => { // 解构了data
        this.getCategories() // 重新获取分类列表
      })
    }
4.删除两个灯具测试
5.数据库信息
6.删除前弹出提示框
1.完整代码
js 复制代码 
    // 删除分类
    remove(node, data){
      // 获取要删除的id
      var ids = [data.id]
      // 弹出确认框
      this.$confirm(`确定对【${data.name}】进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( () => {
          // 发送请求
          this.$http({
            url: process.env.BASEPATH + '/commodity/category/delete',
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => { // 解构了data
            this.getCategories() // 重新获取分类列表
          })
      }).catch(() => {})

    }
2.删除测试
7.删除后弹出操作成功
1.添加代码
js 复制代码 
        // 添加成功提示
        this.$message({
          message: '操作成功',
          type: 'success'
        })
2.删除测试
3.树形控件展开设置
1.设置默认全部展开
2.设置删除分类之后保持原来状态
  • 设置属性
  • 设置数据池
  • 在获取分类列表之后展开父节点

2.添加子分类信息到数据库

1.前端添加对话框控件
1.查找控件
1.官网

https://element.eleme.cn/#/zh-CN/component/dialog

2.具体控件
2.部署控件
1.将选中的部分粘贴到 category.vue的el-tree标签后
2.使用div将两个控件包起来否则会有编译错误
3.前端测试访问
3.基础代码
1.对话框控件
vue 复制代码 
<!--    dialogVisible 表示是否显示对话框-->
    <el-dialog title="收货地址" :visible.sync="dialogVisible">
<!--   categorydao 是表单的数据  -->
      <el-form :model="category">
        <el-form-item label="分类名">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
2.数据池 category 表示表单数据 dialogVisible 表示是否显示弹窗
3.方法池 add 显示对话框 addCategory 点击确定后触发这个方法
js 复制代码 
    // 添加分类信息到数据库，点击确定按钮时触发
    addCategory() {
      alert("addCategory")
      this.dialogVisible = false
    },
    // 添加分类
    add(data) {
      console.log("data", data) // data是当前节点的数据
      this.dialogVisible = true // 显示添加对话框
    }
4.测试
4.初始化对话框
1.数据池声明对话框数据
js 复制代码 
      category : { // 表单数据
        id: null,
        name: '',
        parentId: 0,
        catLevel: 0,
        isShow: 1,
        sort: 0,
        icon: '',
        proUnit: '',
        proCount: 0
      }
2.方法池设置在弹出对话框之前给对话框赋默认值
js 复制代码 
    // 添加分类
    add(data) {
      console.log("data", data) // data是当前节点的数据
      // 设置对话框初始数据
      this.category = {
        id: null,
        name: '',
        parentId: data.id, // 父层级id
        catLevel: data.catLevel + 1, // 父层级的级别 + 1
        isShow: 1,
        sort: 0,
        icon: '',
        proUnit: '',
        proCount: 0
      }
      // this.dialogVisible = true // 显示添加对话框
      // 输出查看
      console.log("this.category", this.category)
    }
3.测试
5.发送请求，将数据保存到数据库
1.打开注释，显示对话框
2.编写 addCategory方法
js 复制代码 
    // 添加分类信息到数据库，点击确定按钮时触发
    addCategory() {
      // 获取表单数据
      var category = this.category
      // 发送请求
      this.$http({
        url: process.env.BASEPATH + '/commodity/category/save',
        method: 'post',
        data: this.$http.adornData(category, false)
      }).then(({data}) => { // 解构了data
        // 添加成功提示
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        // 关闭对话框
        this.dialogVisible = false
        // 刷新分类列表
        this.getCategories() // 重新获取分类列表
        // 设置需要展开的菜单
        this.expandedkeys = [this.category.parentId]
      })
    }
3.测试
6.注意事项
1.如果添加中文乱码，就在数据库的请求地址中加一段
2.ESLint检测介绍
3.注释掉 build/webpack.base.conf.js 中的一段代码然后重启

3.修改分类信息

1.回显分类信息
1.新增编辑按钮
2.方法池编写edit方法，点击编辑按钮就回显表单
js 复制代码 
    // 编辑分类
    edit(data) {
      // 将当前节点的数据赋值给表单
      this.category = data
      // 显示对话框
      this.dialogVisible = true
    }
3.测试
2.向后端发送请求，入库
1.增加标志位，判断是修改还是删除
1.数据池增加标志位
2.编辑和修改分类时设置标志位
2.修改addCategory方法，完成修改入库操作
js 复制代码 
      if (this.dialogType == '修改') {
        // 发送请求入库
        this.$http({
          url: process.env.BASEPATH + '/commodity/category/update',
          method: 'post',
          data: this.$http.adornData(category, false)
        }).then(({data}) => { // 解构了data
          // 添加成功提示
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          // 关闭对话框
          this.dialogVisible = false
          // 刷新分类列表
          this.getCategories() // 重新获取分类列表
          // 设置需要展开的菜单
          this.expandedkeys = [this.category.parentId]
        })
      }
3.测试

4.批量逻辑删除家居分类

1.获取批量选择的id
1.问AI
2.el-tree 增加属性 ref="treeRef"
3.添加批量删除按钮
vue 复制代码 
    <!-- 批量删除按钮 -->
    <el-button
      type="danger"
      size="mini"
      icon="el-icon-delete"
      @click="handleBatchDelete"
      >
      批量删除
    </el-button>
4.编写handleBatchDelete方法，获取所有选中的id
js 复制代码 
    // 处理批量删除操作
    handleBatchDelete() {
      // 获取id
      const selectedIds = this.$refs.treeRef.getCheckedKeys();
      console.log('Selected node IDs:', selectedIds);
    }
5.浏览器测试
2.批量从数据库删除
1.修改 handleBatchDelete 方法
js 复制代码 
    // 处理批量删除操作
    handleBatchDelete() {
      // 获取id
      const selectedIds = this.$refs.treeRef.getCheckedKeys();
      // 发送请求，批量删除
      this.$http({
        url: process.env.BASEPATH + '/commodity/category/delete',
        method: 'post',
        data: selectedIds
      }).then(({data}) => { // 解构了data
        // 添加成功提示
        this.$message({
          message: '批量删除成功',
          type: 'success'
        })
        // 刷新分类列表
        this.getCategories() // 重新获取分类列表
      })
    }
2.测试
1.点击批量删除
2.删除成功
3.数据库信息
相关推荐
长亭外的少年10 分钟前
ClickHouse 介绍：深度解析高性能列式数据库的核心优势
java·数据库·clickhouse
tokengo12 分钟前
从Java开发者到.NET Core初级工程师学习路线：C#语言基础
java·csharp·新人入门
java66666888812 分钟前
深入理解Spring Boot中的配置加载顺序
java·spring boot·后端
空青72641 分钟前
ChatGPT在Java后端开发中的应用与影响
java·开发语言·人工智能·后端·神经网络·机器学习·chatgpt
qq_3323942041 分钟前
pnpm的坑
前端·vue·pnpm
莫得等待42 分钟前
MySQL的慢sql
java
威哥爱编程1 小时前
Nginx性能调优5招35式不可不知的策略实战
java·nginx·性能调优
五月阳光暖洋洋1 小时前
SpringBoot2.2.6使用spring-boot-validation读取不到自定义配置文件中的属性
java·开发语言·spring boot
刘钢筋universe1 小时前
leetcode hot100
java·算法·leetcode
java6666688881 小时前
深入理解Spring Boot中的容器与依赖注入
java·spring boot·后端
热门推荐
012024年江苏省研究生数学建模科研创新实践大赛C题气象数据高精度融合技术研究论文和代码分析02Coze扣子平台完整体验和实践（附国内和国际版对比）03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）042024亚太赛（中文赛）数学建模竞赛选题建议+初步分析05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【经验分享】Ubuntu22.04安装微信(linux官方版)072024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题超详细解题思路+数据预处理问题一代码分享082025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题09【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解10通用大模型VS垂直大模型，你更青睐哪一方？