尋找寫程式碼感覺（十五）之 刪除功能的開發

久曲健發表於2022-02-04

寫在前面

也不知道怎麼了，腦神經（太陽穴位置）特別疼，眯了一會，這會好多了，接著續上程式碼的感覺，就如同下午和一個粉絲說的一樣。

先沉下心來吧 方向有了 然後就是執行力的事了

所以呢，還是想把想做的事先做了，冉柔堅持下去，這樣未來自己也不會後悔。

不知道，這算不算自己的優點呢，哈哈哈，厚臉皮的說。

刪除功能的拆解

可能有的同學會好奇，說六哥，你怎麼現在總提任務拆解呢？

因為做需求的話，肯定是要會功能拆分，也許未來要臨時客串下產品經理也說不定呢，是不是，哈哈哈。

刪除功能可以拆分為如下：

  • 後端增加刪除介面
  • 前端點選刪除按鈕時呼叫後端刪除介面
  • 刪除時需要有一個確認框

刪除功能的實現

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

編譯檢視結果

寫在最後

可能是我自己有點強迫症吧，就是在檢視結果的時候，總喜歡放動態圖片。

但對我而言，就涉及兩塊內容了，要先錄製視訊，然後，再將視訊轉換為動圖，但圖片超過幀數後，圖片就無法顯示，扎心了。

這時候，我就需要處理圖片幀數及大小問題，真的很頭疼，但是好處就是，自己也摸索出了，一些處理問題的方法，細想想，其實也很有意思。

相關文章