需求5:增加一个按钮

embedded/2024/10/19 7:31:14/

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

了解需求

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

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

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

大纲思路

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

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

代码实现需求

定位接口

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

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

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

修改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.ppmy.cn/embedded/120000.html

相关文章

springboot实战学习(9)(配置mybatis“驼峰命名“和“下划线命名“自动转换)(postman接口测试统一添加请求头)(获取用户详细信息接口)

接着学习。之前的博客的进度:完成用户模块的注册接口的开发以及注册时的参数合法性校验、也基本完成用户模块的登录接口的主逻辑的基础上、JWT令牌"的组成与使用以及完成了"登录认证"(生成与验证JWT令牌)具体往回看了解的链接…

鸿蒙-app进入最近任务列表触发的监听

如果在UIAbility中,参考第一个链接,在页面中参考如下:State windowStage: window.WindowStage (getContext(this) as common.UIAbilityContext).windowStagetry {this.windowStage.on(windowStageEvent, (data) > {// 前台应用进入最近任…

图书系统|图书个性化推荐系统|基于springboot的图书个性化推荐系统设计与实现(源码+数据库+文档)

图书个性化推荐系统目录 目录 基于springboot的图书个性化推荐系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 2、具体的表设计如下所示: 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#x…

linux服务器安装原生的php环境

在CentOS上安装原生的PHP环境相对简单。下面是一个详细的步骤指南,适用于CentOS 7及更高版本。 ### 第一步:更新系统 首先,确保你的系统是最新的: sudo yum update -y ### 第二步:安装EPEL和Remi仓库 1. **安装EP…

解决银河麒麟V10系统bash执行提示:无法执行:权限不够的问题

无论是普通用户还是root用户,在银河麒麟桌面版操作系统下运行二进制可执行文件或者.sh文件等,都提示bash无法执行:权限不够,咨询官方客服和网上的结果,总结得到以下几点: 1.麒麟系统kysec的问题 打开左下…

机器学习-TopicModel

概率图模型基础概率潜在语义分析(PLSA)LDA 概率图模型基础 猜球游戏 有两个信封,其中一个装有一个红球,一个黑球。另一个信封有两个黑球。 。 假设红球价值100元,黑球价值1元。 你随机从其中拿起一个信封,从…

xpath在爬虫中的应用、xpath插件的安装及使用

安装 1、打开谷歌浏览器进入扩展程序安装页面(右上角会有"开发者模式按钮")默认是关闭的,当安装此插件时需要把开发者模式打开。 2、下载下来的xpath_helper是zip格式的,需要解压缩即可安装。 3、重启浏览器,再次点击扩展程序即…

ip经过多个服务器转发会网速变慢吗

会的,IP经过多个服务器转发时,网速通常会变慢,主要原因包括: 增加的延迟: 每经过一个服务器,数据包就需要额外的时间进行处理和转发。这种处理时间和网络延迟会累积,导致整体延迟增加。 带宽限制…