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

写在前面

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

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

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

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

删除功能的拆解

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

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

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

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

删除功能的实现

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('删除成功！');
    };

编译查看结果

写在最后

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

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

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