尋找寫程式碼感覺（十九）之 分類表格顯示優化 之 樹形表格展示

久曲健發表於2022-02-19
優化

寫在前面

這一晃，又兩週過去了，沒有任何學習及產出，家裡親人離世，加上自己的胡思亂想，加重了自己的精神負擔，到現在還是沒太緩過來，找不到狀態。

我本就是個愛胡思亂想的人，而且還軸得很，今年已經33了，突然感覺好可怕。。。。。。

自己單身乾著急，就在那一個勁合計，為什麼自己咋就這麼費勁，處一個黃一個，平均1-2月，真的很崩潰，感覺自己愛無能，WC.....

現在也真的是豁出去這張老臉了，初中、高中、大學同學，各種讓幫忙給我介紹物件，想結婚的心情，真的好強烈，當然，也真的是，人只有經歷了一些事情，才會成長，才知道這些事情的重要性。

如何實現屬性表格顯示

之前嘗試了十分鐘完成增刪改查功能，結果我low了點用了12分鐘，就是在基礎上覆制再改及除錯。

基於前面基礎，需要對前後端分別調整。

1、後端調整

去掉分頁查詢，新增按照sort排序，示例程式碼如下：
service層程式碼

 public List<CategoryResp> all() {
        CategoryExample categoryExample = new CategoryExample();
        categoryExample.setOrderByClause("sort desc");
        //控制請求後，每頁顯顯示3條資料
        List<Category> categoryList = categoryMapper.selectByExample(categoryExample);
        //列表複製
        List<CategoryResp> respList = copyList(categoryList, CategoryResp.class);
        return respList;
    }

controller層程式碼

/**
     * 
     *
     * @return
     */
    @GetMapping("/all")
    public CommonResp all() {
        CommonResp<List<CategoryResp>> resp = new CommonResp<>();
        List<CategoryResp> list = categoryService.all();
        resp.setMessage("執行查詢成功！");
        resp.setContent(list);
        return resp;
    }

2、前端調整

需要修改呼叫方法為無參，增加樹形效果顯示，去掉分頁顯示，示例程式碼如下：

 const level1 = ref(); // 一級分類樹，children屬性就是二級分類
    level1.value = [];
    /**
     * 資料查詢
     **/
    const handleQuery = () => {
      loading.value = true;
      // 如果不清空現有資料，則編輯儲存重新載入資料後，再點編輯，則列表顯示的還是編輯前的資料
      categorys.value = [];
      axios.get("/category/all").then((response) => {
        loading.value = false;
        const data = response.data;
        if (data.success) {
          const data = response.data;
          categorys.value = data.content;
          console.log("原始陣列：", categorys.value);
          level1.value = [];
          level1.value = Tool.array2Tree(categorys.value, 0);
          console.log("樹形結構：", level1);
        } else {
          message.error(data.message);
        }
      });
    };

知識點總結

1、vue，給屬性繫結值時，加冒號和不加冒號的區別
不加冒號的話，屬性值全部是字串
加冒號的話，可以使用字串、數字、布林值，以及響應式變數

2、遞迴演算法的套路：
自己呼叫自己，直到某個條件不再呼叫自己

/**
 * 遞迴演算法套路
 * 在if裡呼叫自己，或者在else裡呼叫自己都可以
 * 下面是以在if裡呼叫自己為例
 */
public static func () {
  if (...) {
    // 觸發條件時，自己呼叫自己
    func()
  } else {
    // 不再呼叫自己
  }
  return ;
}

3、使用遞迴方法將陣列轉為樹形結構

/**
 * 使用遞迴將陣列轉為樹形結構
 * 父ID屬性為parent
 */
public static array2Tree (array: any, parentId: number) {
  if (Tool.isEmpty(array)) {
    return [];
  }

  const result = [];
  for (let i = 0; i < array.length; i++) {
    const c = array[i];
    // console.log(Number(c.parent), Number(parentId));
    if (Number(c.parent) === Number(parentId)) {
      result.push(c);

      // 遞迴檢視當前節點對應的子節點
      const children = Tool.array2Tree(array, c.id);
      if (Tool.isNotEmpty(children)) {
        c.children = children;
      }
    }
  }
  return result;
}

寫在最後

有時候成年人的崩潰，可能就因為一句話，但謹記不管發生什麼事，都不要輸了心情，演好一個情緒穩定的成年人！

相關文章