谷粒商城实战笔记-50-51-商品分类的删除

文章目录

  • 一,50-商品服务-API-三级分类-删除-逻辑删除
    • 1,逻辑删除的配置
      • 1.1 配置全局的逻辑删除规则(可省略)
      • 1.2 配置逻辑删除Bean(可省略)
      • 1.3 Bean相应字段上加上注解@TableLogic
    • 2,后台接口开发
      • 2.1,Controller类中修改接口
      • 2.2,CategoryServiceImpl类中增加接口
      • 2.3,postman验证
  • 二,51-商品服务-API-三级分类-删除-删除效果细化
    • 1,前端调用delete接口
    • 2,模板代码配置
    • 3,验证
    • 4,细节优化

这两节的内容是开发商品分类的删除功能。

一,50-商品服务-API-三级分类-删除-逻辑删除

前端已经开发了删除按钮,后端要有对应的接口实现。

1,逻辑删除的配置

在工作中,所有的删除都应该是逻辑删除,不能用物理硬删除。

mybatis-plus支持逻辑删除的配置,配置步骤如下:

  • ①配置全局的逻辑删除规则(可省略)
  • ②配置逻辑删除Bean(可省略)
  • ③Bean相应字段上加上注解@TableLogic

1.1 配置全局的逻辑删除规则(可省略)

mybatis-plus:global-config:db-config:logic-delete-value: 1logic-not-delete-value: 0

在这里插入图片描述

logic-delete-value: 1

这个配置项定义了当一个记录被逻辑删除时,其逻辑删除字段(通常是一个布尔型或整型字段)的值应该是多少。在这个例子中,如果一个记录的逻辑删除字段值为1,那么框架认为这个记录是被逻辑删除的。

logic-not-delete-value: 0

这个配置项定义了当一个记录未被逻辑删除时,其逻辑删除字段的值应该是多少。在这个例子中,如果一个记录的逻辑删除字段值为0,那么框架认为这个记录是有效的,没有被逻辑删除。

1.2 配置逻辑删除Bean(可省略)

在mybatis-plus3.1.1版本后,无需此步骤,我用的3.2,所以这步可以省略。

1.3 Bean相应字段上加上注解@TableLogic

商品分类表中用showStatus字段表示记录是否逻辑删除。

所以在对应的实体类CategoryEntity.java中showStatus字段上加上注解。
在这里插入图片描述
这里需要说明的是,如果表示逻辑删除的值和全局配置不一致,可以在注解上单独配置。

比如全局配置中1表示已删除,而三级分类表1表示未删除,产生了冲突,解决冲突的办法就是在注解上通过val和delVal字段进行设置。

2,后台接口开发

2.1,Controller类中修改接口

	@RequestMapping("/delete")public R delete(@RequestBody Long[] catIds){
//		categoryService.removeByIds(Arrays.asList(catIds));categoryService.removeMenuByIds(Arrays.asList(catIds));return R.ok();}

removeMenuByIds是新实现的方法,逆向工程生成的方法removeByIds缺少必要的校验,我们不用这个方法。

2.2,CategoryServiceImpl类中增加接口

    @Overridepublic void removeMenuByIds(List<Long> ids) {baseMapper.deleteBatchIds(ids);}

在这里插入图片描述

2.3,postman验证

重启product服务,在postman中通过网关调用删除接口。

二,51-商品服务-API-三级分类-删除-删除效果细化

1,前端调用delete接口

category.vue模块中,remove方法如下。

remove(node, data) {var ids = [node.catId];this.$confirm(`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(ids, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {console.log("删除成功,关闭消息提示");this.getMenus();},});} else {this.$message.error(data.msg);}});}).catch(() => {});},

在删除前弹窗提示是否确认删除,确认后,调用接口,把要删除的分类Id传递给后端,后端软删除对应分类记录。

2,模板代码配置

后续会频繁使用httpget和httppost请求,为了提高效率,可以配置到模板中。

"http-get 请求": {"prefix": "httpget","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'get',","params: this.\\$http.adornParams({})","}).then(({data}) => {","})"],"description": "httpGET 请求"},"http-post 请求": {"prefix": "httppost","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'post',","data: this.\\$http.adornData(data, false)","}).then(({ data }) => { });"],"description": "httpPOST 请求"}

这样只要输入httpposthttpgetvscode就可以给出提示,确认后就可以自动插入模板代码,代替手敲,极大的提高编码效率。

3,验证

在页面上点击电子书分类后的delete按钮,弹出如下提示。

在这里插入图片描述

点击确定,提示删除成功。

在这里插入图片描述

在后台数据产看cat_id165的数据,show_status=0说明已经被逻辑删除。
在这里插入图片描述

4,细节优化

  • ①在删除前弹窗提示是否确认删除,确认后,调用接口,把要删除的分类Id传递给后端,后端软删除对应分类记录。
  • ②点击删除后,后端已经删除,但是前端未刷新,可以调用方法this.getMenus();重新查询分类数据刷新界面。
  • ③删除成功后重新请求会导致已经展开的菜单,又收缩了,用户体验不好,最好的效果是只有被删除的分类消失,页面其他部分保持不变。实现这个需求需要用到el-tree组件的default-expanded-keys,用来指定需要展开的节点的id。
    第一步,在el-tree中给属性绑定一个数组,default-expanded-keys="expandedKeys"
    第二步,在js脚本的data中声明这个数组,expandedKeys: []
    第三步,删除成功,重启请求分类数据后,将要被删除的分类节点的父节点的catId赋值给数组,this.expandedKeys = node.parent.data.catId; // 重置展开节点

Category.vue完整代码。

<template><el-treenode-key="catId":data="menus":props="defaultProps":expand-on-click-node="false"show-checkboxdefault-expanded-keys="expandedKeys"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree>
</template><script>
export default {components: {},props: {},data() {return {menus: [],expandedKeys: [],defaultProps: {children: "children",label: "name",},};},methods: {append(data) {console.log(data);},remove(node, data) {console.log(node, data);var ids = [node.data.catId];this.$confirm(`确定对[id=${ids.join(",")}]进行[${ids.length == 1 ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(ids, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {console.log("删除成功,关闭消息提示");this.getMenus(); // 重新获取数据this.expandedKeys = node.parent.data.catId; // 重置展开节点},});} else {this.$message.error(data.msg);}});}).catch(() => {});},// 获取分类数据getMenus() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({ data }) => {console.log(data);this.dataListLoading = false;this.menus = data.data;});},},created() {this.getMenus(); // 获取分类数据},
};
</script>
<style scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI学习指南机器学习篇-t-SNE模型应用与Python实践

AI学习指南机器学习篇-t-SNE模型应用与Python实践 在机器学习领域&#xff0c;数据的可视化是非常重要的&#xff0c;因为它可以帮助我们更好地理解数据的结构和特征。而t-SNE&#xff08;t-distributed Stochastic Neighbor Embedding&#xff09;是一种非常强大的降维和可视…

星环科技推出知识库产品 AI PC时代数据交互方式变革

随着企业业务的快速发展&#xff0c;数据量呈爆炸式增长&#xff0c;有效的知识管理成为企业面临的重要问题。企业遇到的普遍问题是大量的结构化、半结构化数据存储在不同的系统中&#xff0c;需要用多种计算机语言进行检索。而大模型彻底改变了人们和数据的交互方式&#xff0…

深入解析:SPI与I2C通信协议的性能比较(内附资料)

在嵌入式系统中&#xff0c;SPI&#xff08;串行外设接口&#xff09;和I2C&#xff08;互连集成电路&#xff09;是两种广泛使用的通信协议。它们各自具有独特的性能特点和应用场景。本文将深入解析这两种通信协议&#xff0c;并在STM32微控制器上进行性能比较。 1. 引言 SP…

大数定理与中心极限定理

目录 两者的定义 大数定律 中心极限定理 关系与区别 切比雪夫大数定律、伯努利大数定律和辛钦大数定律的具体应用场景和条件是什么&#xff1f; 切比雪夫大数定律 伯努利大数定律 辛钦大数定律 应用场景&#xff1a; 条件&#xff1a; 中心极限定理在实际统计学研究…

分享:大数据信用报告查询平台哪个好?

大数据信用也就是我们常说的大数据&#xff0c;相信很多朋友对这个词都不陌生&#xff0c;特别是在银行申贷的时候&#xff0c;听过比较多&#xff0c;因为在银行做信用贷款的时候都会审查申贷人的大数据信用&#xff0c;贷前提前了解自己的大数据很有必要&#xff0c;那大数据…

【JS逆向课件:第十六课:Scrapy基础2】

ImagePipeLines的请求传参 环境安装&#xff1a;pip install Pillow USER_AGENT Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36需求&#xff1a;将图片的名称和详情页中图片的数据进行爬取&a…

基于Java+SpringMvc+Vue技术的慈善捐赠平台设计与实现(源码+LW+部署讲解)

项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑&#xff01; 软件开发环境及开发工具&#xff1a; 操作系统&#xff1a;Windows 10、Windows 7、Windows 8 开发语言&#xff1a;java 前端技术&#xff1a;JavaScript、VUE.j…

vue的this.$forceUpdate()和this.$set()

目录 this.$forceUpdate() 下面举个例子&#xff1a; 改变数组的7种方法&#xff1a; this.$set() 基本用法&#xff1a; 向对象添加属性 向数组添加属性 总的来说&#xff1a; this.$forceUpdate() 使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中&#xff0…

列举excel中调整行高列宽的五种方法

列举excel中调整行高列宽的五种方法 在Excel中调整行高列宽的方法有以下五种&#xff1a; 使用鼠标手动调整行高列宽&#xff1a;将鼠标悬停在行或列的边界上&#xff0c;光标会变成双向箭头&#xff0c;此时按住鼠标左键并拖动边界即可调整行高或列宽。 使用快捷键调整行高列…

工具(linux)

Yum 软件包管理器 介绍 yum Yum 是一个在 Red Hat 和 CentOS 等 Linux 发行版中常用的软件包管理器&#xff0c;它可以方便地进行软件包的安装、更新和删除。 安装软件包 使用 yum install 命令可以安装指定的软件包&#xff0c;例如&#xff1a; yum install package_nam…

DataLoader的使用 Pytorch

在 PyTorch 中&#xff0c;tensor.shape 返回一个包含张量各维度大小的元组。 所以&#xff0c;当你执行 print(img.shape)&#xff0c;你看到的 (3, 32, 32) 实际上是在告诉你&#xff1a; 这是一个三维张量第一维&#xff08;通道&#xff09;的大小是 3第二维&#xff08;…

“论软件测试中缺陷管理及其应用”写作框架,软考高级论文,系统架构设计师论文

原创范文 软件缺陷指的是计算机软件或程序中存在的某种破坏正常运行能力的问题、错误&#xff0c;或者隐藏的功能缺陷。缺陷的存在会导致软件产品在某种程度上不能满足用户的需要。在目前的软件开发过程中&#xff0c;缺陷是不可避免的。软件测试是发现缺陷的主要手段&#xf…

【北航主办丨本届SPIE独立出版丨已确认ISSN号】第三届智能机械与人机交互技术学术会议(IHCIT 2024,7月27)

由北京航空航天大学指导&#xff0c;北京航空航天大学自动化科学与电气工程学院主办&#xff0c;AEIC学术交流中心承办的第三届智能机械与人机交互技术学术会议&#xff08;IHCIT 2024&#xff09;将定于2024年7月27日于中国杭州召开。 大会面向基础与前沿、学科与产业&#xf…

路由表与IP数据报转发:基础小白指南

目录 1. 路由表的基本概念 2. 路由表中的默认路由 3. IP数据报的转发流程 4. 路由聚合 5. 最长前缀匹配 总结 在网络世界中&#xff0c;IP数据报的转发是如何进行的&#xff1f; 这篇文章将带你深入了解路由表的基本概念和IP数据报的转发流程。我们会用简洁明了的语言和实…

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000&#xff0c;截图如下&#xff1a; 解决方法 在管理员权限下打开 CMD&#xff08;命令行&#xff09;并运行&#xff1a; net stop winnatnet start winnat 执行完成后在此通过nodejs启动项目即可…

centos系统mysql数据库差异备份与恢复

文章目录 差异备份mysql数据一、 安装 Percona XtraBackup数据库中创建一些数据三、创建全备份四、创建差异备份1. 在数据库中添加数据&#xff0c;让数据发生一些改变2. 创建第一个差异备份3. 数据库中再次添加一些数据4. 创建第二个差异备份 五、模拟数据丢失&#xff0c;删库…

【测开能力提升-Javascript】JavaScript介绍+数值类型

注释&#xff1a; 作为一名合格的测试&#xff0c;首先得会一些基础的后端语言&#xff0c;当然我选择了python&#xff0c;作为测试开发&#xff0c;对代码运行效率要求并不是很高&#xff0c;以及python强大的第三方库&#xff0c;如上一家公司&#xff0c;处理rtcm数据&…

minio 服务docker配置

用minio docker配置了一个服务&#xff0c;分享链接始终是127.0.01开始的&#xff0c; 改成docker的host的ip则提示签名不匹配&#xff0c; 好在这个文件主要是用来下载的&#xff0c;所以可以通过设置bucket的匿名访问权限来实现下载&#xff1b; 这样不需要后面的地址参数就…

UM960硬件设计,最小系统推荐设计

备注&#xff1a; l L1&#xff1a;推荐使用 0603 封装的 68 nH 射频电感l C1&#xff1a;推荐使用 100 nF 100 pF 两个电容并联l C2&#xff1a;推荐使用 100 pF 电容l C3&#xff1a;推荐使用 n 10 μF 1 100 nF 电容并联&#xff0c;总容值不小于 30 μFl R1&#xff1…

Mysql sql技巧与优化

1、解决mysql同时更新、查询问题 2、控制查询优化 hint 3、 优化 特定类型的查 优化 COUNT() 查询 使用 近似值 业务能接受近似值的话&#xff0c;使用explain拿到近似值 优化关联查询 优化子查询 4、优化group by和distinct 优化GROUP BY WITH ROLLUP 5、优化 limit分页 其他…