Java教程

寻找写代码感觉(十五)之 删除功能的开发

本文主要是介绍寻找写代码感觉(十五)之 删除功能的开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

写在前面

也不知道怎么了,脑神经(太阳穴位置)特别疼,眯了一会,这会好多了,接着续上代码的感觉,就如同下午和一个粉丝说的一样。

先沉下心来吧 方向有了 然后就是执行力的事了

所以呢,还是想把想做的事先做了,冉柔坚持下去,这样未来自己也不会后悔。

不知道,这算不算自己的优点呢,哈哈哈,厚脸皮的说。

删除功能的拆解

可能有的同学会好奇,说六哥,你怎么现在总提任务拆解呢?

因为做需求的话,肯定是要会功能拆分,也许未来要临时客串下产品经理也说不定呢,是不是,哈哈哈。

删除功能可以拆分为如下:

  • 后端增加删除接口
  • 前端点击删除按钮时调用后端删除接口
  • 删除时需要有一个确认框

删除功能的实现

1、后端增加删除接口

也就是在controller中增加一个接口方便调用,在service中实现,示例代码如下:

 /**
     * 删除功能
     *
     * @param id
     * @return
     */
    @DeleteMapping("/delete/{id}")
    public CommonResp delete(@PathVariable long id) {
        CommonResp resp = new CommonResp<>();
        eBookService.delete(id);
        return resp;
    }

 /**
     * 删除操作
     *
     * @param id
     */
    public void delete(long id){
        eBookMapper.deleteByPrimaryKey(id);
    }

2、前端调用删除方法并弹出对话框提示

因为是前端部分,所以我把后面两条拆解整合了到一起实现。

两步走,第一步,使用Popconfirm 气泡确认框。第二步,在按钮处写方法调用删除方法,示例代码如下:

     <a-popconfirm
       title="删除后无法恢复,确认删除吗?"
       ok-text="确认"
       cancel-text="取消"
       @confirm="confirm"
     >
      <a-button type="danger" @click="handleDelete(record.id)">
        删除
      </a-button>
   </a-popconfirm>

   /**
     * 删除
     * @param id
     */
    const handleDelete = (id: number) => {
      axios.delete("/ebook/delete/"+id).then(response => {
        const data = response.data;
        if (data.success) {
          //重新加载列表
          handleQuery({
            page: 1,
            size: pagination.value.pageSize,
          });
        }
      })
    }

    const confirm = (e: MouseEvent) => {
      console.log(e);
      message.success('删除成功!');
    };

编译查看结果

写在最后

可能是我自己有点强迫症吧,就是在查看结果的时候,总喜欢放动态图片。

但对我而言,就涉及两块内容了,要先录制视频,然后,再将视频转换为动图,但图片超过帧数后,图片就无法显示,扎心了。

这时候,我就需要处理图片帧数及大小问题,真的很头疼,但是好处就是,自己也摸索出了,一些处理问题的方法,细想想,其实也很有意思。

这篇关于寻找写代码感觉(十五)之 删除功能的开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!