需求5:增加一个按钮

在之前的几个需求中,我们逐步从修改字段到新增字段,按部就班地完成了相关工作。通过最近的文章,不难看出我目前正在处理前端的“未完成”和“已完成”按钮。借此机会,我决定趁热打铁,重新梳理一下之前关于按钮实现的需求。

了解需求

当前的问题是,当我上报了一张故障单后,在处理过程中只有一个“开始处理”按钮。如果上报人确实上报了一张故障单,并且该故障单尚未被处理,但故障突然自行解决了,这时就会出现一些不便。

例如,上报人的电脑出现蓝屏故障,他肯定会填写并上报故障单。然而,在故障单还未被接单处理的时间内,蓝屏问题突然消失了,那么这张故障单就变得多余了。

如果我们能够增加一个“撤销故障”的按钮,上报人在上报故障单后,可以自行撤销该故障单,这将会大大提高系统的灵活性和用户的便利性。

大纲思路

在处理需求时,我通常会先考虑模仿现有的功能来实现,因为我知道自己独立编写肯定不会写。然而,如果有一个类似的功能供我参考,我模仿着来写,应该是能够完成任务的。

但具体模仿哪个功能呢?对此我并不太确定。于是我请教了睿哥,他建议我模仿“退回”按钮的实现方式。那么就按照这个思路来进行吧!

代码实现需求

定位接口

首先找到“退回”按钮,点击这个按钮,看看这个按钮调用了哪个接口:

其实,这个按钮相对简单。点击“退回”按钮时,只会触发两个接口,很容易就能找到与按钮对应的接口。但是,有些按钮点击后会触发一堆接口,卧槽,他妈的,你根本不知道哪个接口才是真正与按钮直接交互的。

当时我把这个疑问告诉了睿哥,睿哥建议我查看前端的事件处理函数,看看哪个接口向事件处理函数传递数据,这样就能确定哪个接口是与按钮直接交互的。

修改controller层

现在,接口已经找到了,那么我们就仿照这个接口来写:

其实这个撤销按钮的controller层的模仿没啥难度。

修改service层

进入service层:

其实前面这两步都不算很难,关键在于service层的核心部分,这是最难的。一旦这个service层的核心部分写好了,接下来的工作就会顺利很多。我们来试着写一下service层的核心代码:

其实很简单,先把“退回”按钮的service层核心代码拷贝过来,然后保留有用的部分,注释掉没用的部分。有时候还需要添加一些东西,修改一下代码,这样就可以了。关键是你要清楚这个核心逻辑是什么样的:

把“退回”按钮的service层内核复制一份到“撤回按钮”的service层核心部分后,然后再一行一行的进行修改:

来解释一下第一行代码:

FaultReportEntity report = getFaultReportEntity(reportId);

比如,上报人上报了一张故障单,那么reportId就是故障单的编号。FaultReport表中的每一行其实就是一张故障单。

如果你理解了上面这两句话,那么这行代码就不难理解了。代码的作用是通过故障单编号将属于这个编号的那一行数据提取出来,并放到report对象里。

Assert.isTrue(FaultConfigConstant.FAULT_REPORT_STATUS_0.equals(report.getStatus()), "只有在初始状态下才能进行撤回操作!");
Assert.isTrue(ObjectUtil.equals(UserUtils.getUserId(), report.getReporterId()), "仅上报人可执行撤回操作!");

第一行代码已经获取到了这个故障单的数据。接下来,你需要判断当前尝试点击撤销按钮的用户是否是上报人。如果他不是上报人,那么他就没有权限撤销这张故障单。简而言之,只有上报人自己才可以撤销故障单。

除此之外,你还需要判断这张故障单的状态。只有在故障单处于“待开始”状态时,才可以被撤销。如果故障单已经在处理中,你突然撤销它,那就不合适了。

report.setStatus(FaultConfigConstant.FAULT_REPORT_STATUS_11);

你撤销完之后,就需要把这张故障单的状态设置成“已撤销”状态。

updateById(report);

经过一系列处理后,这个report对象相比于一开始从数据库中获取到的report对象已经发生了变化。这时候,你需要将这个新的report对象同步回数据库。

最后这个接口的service层长这样:

修改mapper层

我想了想,mapper层不需要修改,那我这个撤销按钮的后端接口就完成了。

前端把接口呈现出来

写一个按钮其实不难,真的不难。主要是照猫画虎。我之前的文章已经详细描述了如何照猫画虎。现在我就模仿着“退回”按钮来写,首先先看看“退回”按钮是怎么写的:

通过上面这四幅图,我们已经知道了“退回”按钮的前端是怎么写的,那我们就直接仿照就好了:

写这个需求的一些小心得

其实对于这种需求的修改,我和光哥中午的时候也交流过。你拿到一个需求,不可能从零开始凭空想象。比如说我让你加一个撤回的按钮,你不可能凭空想象然后盲写,这怎么写啊?肯定是先看看有没有一些和这个需求相似的功能,别人已经写好的,可以参照着来写。比如这个需求中的“退回”按钮。能Ctrl+C和Ctrl+V的就绝不会自己重新写,都是复制粘贴完之后,再进行小修小改,然后加一些必要的东西就行了。

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

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

相关文章

【CSS in Depth 2 精译_040】6.3 CSS 定位技术之:相对定位(下)—— 用纯 CSS 绘制一个三角形

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结)第二章 相对单位(已完结)第三章 文档流与盒模型(已完结)第四章 Flexbox 布局(已…

ECCV 2024 | 融合跨模态先验与扩散模型,快手处理大模型让视频画面更清晰!

计算机视觉领域顶级会议 European Conference on Computer Vision(ECCV 2024)将于9月29日至10月4日在意大利米兰召开,快手音视频技术部联合清华大学所发表的题为《XPSR: Cross-modal Priors for Diffusion-based Image Super-Resolution》——…

Visual Studio Code下载安装及汉化

官网:https://code.visualstudio.com/ 按照指示一步步操作即可: 汉化:

②EtherCAT转Modbus485RTU网关多路同步高速采集无需编程串口服务器

EtherCAT转Modbus485RTU网关多路同步高速采集无需编程串口服务器https://item.taobao.com/item.htm?ftt&id798036415719 EtherCAT 串口网关 EtherCAT 转 RS485 (接上一章) 自由协议通信步骤 (以MS-A2-1041为例) 接收与…

C++ 3 个有序点的方向(Orientation of 3 ordered points)

给定三个点 p1、p2 和 p3,任务是确定这三个点的方向。 平面中有序三重点的方向可以是 逆时针 顺时针 共线 下图显示了 (a,b,c) 的不同可能方向 如果 (p1, p2, p3) 的方向共线,则 (p3, p2, p1) 的方向也共线。 如果 (p1, p2, p3) 的方向是顺时针&a…

鸿蒙HarmonyOS开发生态

1、官网 华为开发者联盟-HarmonyOS开发者官网,共建鸿蒙生态 2、开发工具IDE下载及使用 https://developer.huawei.com/consumer/cn/ 3、使用帮助文档 4、发布到华为应用商店 文档中心

迈威通信闪耀工博会,以创新科技赋能工业自动化

昨日,在圆满落幕的第24届中国国际工业博览会上,迈威通信作为工业自动化与智慧化领域的先行者,以“创新打造新质通信,赋能工业数字化”为主题精彩亮相,向全球业界展示了我们在工业自动化领域的最新成果与创新技术。此次…

Qt的互斥量用法

目的 互斥量的概念 互斥量是一个可以处于两态之一的变量:解锁和加锁。这样,只需要一个二进制位表示它,不过实际上,常常使用一个整型量,0表示解锁,而其他所有的值则表示加锁。互斥量使用两个过程。当一个线程(或进程)…

给自己的项目(vue3)中添加 下雪/樱花飘落的背景

查看更佳效果前往我的博客, 可切换 snows_ls BLOGhttp://124.223.41.220/ 0、效果图 樱花飘落 雪花飘落 1、安装 yarn add jparticles / npm i jparticles 2、引入 import { Snow } from jparticles; // 引入粒子效果库 引入雪花效果库 3、使用 在项目中的app.…

Pygame中Sprite实现逃亡游戏4

在《Pygame中Sprite实现逃亡游戏3》中实现了玩家跳跃飞火的效果,接下来通过精灵类的碰撞检测来判断飞火是否击中玩家、飞火是否击中飞龙以及飞龙是否抓住玩家。 1 飞火是否击中玩家的判断 判断飞火是否击中玩家的代码如图1所示。 图1 判断飞火是否击中玩家的代码 …

C++入门基础知识91(实例)——实例16【求两数最小公倍数】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于求两数最小公倍数的相关内容&#xff01…

慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用(源码+文档+定制)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

智融-SW6003 双向移动电源IC

描述 ETA6003 是一款具有动态电源路径控制和输入电流限制功能的开关锂离子电池充电器。连接电池后,根据电池电压,DC-DC 开关稳压器会对电池进行预处理、快速充电,或者仅将系统电压 (VSYS) 调节到预设电压。它不需要外…

加油站智能视频监控预警系统(AI识别烟火打电话抽烟) Python 和 OpenCV 库

加油站作为存储和销售易燃易爆油品的场所,是重大危险源之一,随着科技的不断发展,智能视频监控预警系统在加油站的安全保障方面发挥着日益关键的作用,尤其是其中基于AI的烟火识别、抽烟识别和打电话识别功能,以及其独特…

【mmengine】配置器(config)(进阶)继承与导出,命令行修改配置

一、配置文件的继承 1.1 继承机制概述 新建optimizer_cfg.py: optimizer dict(typeSGD, lr0.02, momentum0.9, weight_decay0.0001)新建runtime_cfg.py: device "cuda" gpu_ids [0, 1] batch_size 64 epochs 100 num_workers 8新建resnet50.py: _base_ […

微服务MongoDB解析部署使用全流程

目录 1、什么是MongoDB 1、非关系型数据库 2、非关系型数据库分类 3、MongoDB?bson格式什么样? 2、MongoDB的优势 3、MongoDB应用场景 4、术语 5、操作 1、安装MongoDB 1、查询镜像文件【不操作】 2、拉取镜像文件 3、创建数据挂载目录 4、启…

MySQL_连接查询

课 程 推 荐我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 :&#x1…

C# 利用simd比较两个文件是否相等(高性能)

主要用到两个指令集&#xff0c;CompareEqual指令与MoveMask指令&#xff0c;因为电脑cpu原因&#xff0c;我们采用Avx2。 Avx2.CompareEqual&#xff0c;比较两个Vector256<byte>向量&#xff0c;如果元素相同返回255&#xff0c;否则返回0。 Avx2.MoveMask如果Vector…

前端工程规范-3:CSS规范(Stylelint)

样式规范工具&#xff08;StyleLint&#xff09; Stylelint 是一个灵活且强大的工具&#xff0c;适用于保持 CSS 代码的质量和一致性。结合其他工具&#xff08;如 Prettier 和 ESLint&#xff09;&#xff0c;可以更全面地保障前端代码的整洁性和可维护性。 1、安装 VSCode …

xxl-job--03--分片广播 动态分片

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 xxl-job通过分片广播模式前言1.定义什么是分片广播&#xff1a;即xxl-job调度中心发出一次调度&#xff0c;所有相关节点全部执行一次 采用分片广播调度优点 2.API介…