寻找写代码感觉（十九）之 分类表格显示优化 之 树形表格展示

写在前面

这一晃，又两周过去了，没有任何学习及产出，家里亲人离世，加上自己的胡思乱想，加重了自己的精神负担，到现在还是没太缓过来，找不到状态。

我本就是个爱胡思乱想的人，而且还轴得很，今年已经33了，突然感觉好可怕。。。。。。

自己单身干着急，就在那一个劲合计，为什么自己咋就这么费劲，处一个黄一个，平均1-2月，真的很崩溃，感觉自己爱无能，WC.....

现在也真的是豁出去这张老脸了，初中、高中、大学同学，各种让帮忙给我介绍对象，想结婚的心情，真的好强烈，当然，也真的是，人只有经历了一些事情，才会成长，才知道这些事情的重要性。

如何实现属性表格显示

之前尝试了十分钟完成增删改查功能，结果我low了点用了12分钟，就是在基础上复制再改及调试。

基于前面基础，需要对前后端分别调整。

1、后端调整

去掉分页查询，添加按照sort排序，示例代码如下：
service层代码

 public List all() {
        CategoryExample categoryExample = new CategoryExample();
        categoryExample.setOrderByClause("sort desc");
        //控制请求后，每页显显示3条数据
        List categoryList = categoryMapper.selectByExample(categoryExample);
        //列表复制
        List respList = copyList(categoryList, CategoryResp.class);
        return respList;
    }

controller层代码

/**
     * 
     *
     * @return
     */
    @GetMapping("/all")
    public CommonResp all() {
        CommonResp> resp = new CommonResp<>();
        List 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;
}

写在最后

有时候成年人的崩溃，可能就因为一句话，但谨记不管发生什么事，都不要输了心情，演好一个情绪稳定的成年人！

__EOF__