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

写在前面

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

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

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

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

删除功能的拆解

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

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

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

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

删除功能的实现

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

编译查看结果

写在最后

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

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

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