📝个人主页：哈__

期待您的关注 

目录

一、🔥今日目标

二、🌏前端部分的改造

2.1 新增一个tool.ts 

2.2 新增admin-categoty.vue

2.3 添加新的路由规则

2.4 添加the-welcome.vue

2.5 修改HomeView.vue

 三、❗注意

一、🔥今日目标

【wiki知识库】04.SpringBoot后端实现电子书的增删改查以及前端界面的展示-CSDN博客

上回带大家把电子书管理的模块做了出来，能够实现电子书的添加、修改和删除功能了，今天带着大家把分类的接口实现一下。下方我添加了一个分类管理的组件，展示我们当前的所有分类，你可以看到这个分类页面还是一个树形结构的。

除了分类管理，我们的首页也变动了一下。首页的导航栏加载的是我们已经有的分类，同时还加上了一个欢迎页面。

 

二、🌏前端部分的改造

2.1 新增一个tool.ts 

在util包下建立一个tool.ts文件，这个文件是我们的工具文件，之前的代码可能也用到过了，我忘记给大家了。

export class Tool {     /**      * 空校验 null或""都返回true      */     public static isEmpty(obj: any) {         if ((typeof obj === 'string')) {             return !obj || obj.replace(/\s+/g, "") === ""         } else {             return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);         }     }      /**      * 非空校验      */     public static isNotEmpty(obj: any) {         return !this.isEmpty(obj);     }      /**      * 对象复制      * @param obj      */     public static copy(obj: object) {         if (Tool.isNotEmpty(obj)) {             return JSON.parse(JSON.stringify(obj));         }     }      /**      * 使用递归将数组转为树形结构      * 父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;     }      /**      * 随机生成[len]长度的[radix]进制数      * @param len      * @param radix 默认62      * @returns {string}      */     public static uuid(len: number, radix = 62) {         const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');         const uuid = [];         radix = radix || chars.length;          for (let i = 0; i < len; i++) {             uuid[i] = chars[0 | Math.random() * radix];         }          return uuid.join('');     } } 

2.2 新增admin-categoty.vue

在admin包下，创建admin-category.vue，这个组件用来展示我们的分类信息。这一部分我带着大家稍微过一下。

---

分类添加功能：

在我们点击添加或者编辑功能的时候，会把下边的代码以一个窗口的模式弹出，在这个窗口中展示了当前分类的名称，当前分类的父分类是谁以及当前分类的分类序号。在我们为一个分类进行添加或者修改的时候，我们都要涉及到这个分类到底是第一分类还是第二分类的问题，我们使用了一个level1变量来保存我们的分类结构，这个结构下边在讲。

                                                                    无                                   {{c.name}}                                                          

我们的分类结构可以用一张图来表示。 我给每一个分类都排上了一个编号，第一级分类的parent编号都为0，二级分类的parent编号则要相对应其父分类的编号。

---

level变量的封装过程：

我们的level变量是和我们全部的分类变量有关的，我们先要获取所有的分类然后对分类进行重新组合。

const handleQuery = () => {         loading.value = true;         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据         level1.value = [];         axios.get("/category/all").then((response) => {           loading.value = false;           const data = response.data;           if (data.success) {             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);           }         });       };

这时候打开我们的tool.ts来看一看。你会看到一共有两个参数，第一个参数呢我们传的是一个数据数组，第二个我们传来的是0。

首先我们判断一下传过来的数组是不是空的，如果是空的直接返回，否则的话执行下方逻辑。

首先遍历我们所有的分类，检查每一个分类的父分类的编号是不是我们传过来的0，这里你应该会理解为什么这样做，因为我们要把一个数据数据重新格式化成树的形式，那我们一定要先找到这棵树的一级分类，也就是父节点编号为0的分类，找到了之后呢我们把这个分类加到result当中。然后呢我们再次调用array2Tree这个方法，同时传入两个参数，第一个参数还是之前的全部分类的数组，但是第二个参数就不是0了，是我们刚才加入到result中的分类的编号，我们这次调用这个方法的目的是为了找到一级分类的子分类：二级分类。

这样的一次递归调用就可以将数据进行树化。（不懂私信我）

 /**      * 使用递归将数组转为树形结构      * 父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;     }

---

 全部代码如下：

2.3 添加新的路由规则

  {     path: '/admin/category',     name: 'AdminCateGory',     component: AdminCategory   },

2.4 添加the-welcome.vue

在component文件夹下边 添加the-welcome.vue页面。

2.5 修改HomeView.vue

这里做出了一些修改，一个是the-welcome组件的展示，还有一个就是页面侧边栏的展示，我们之前展示的是页面默认的，现在我们要展示数据库当中的分类结构。里边我们有一些代码还用不到，但是我没有注释掉。

 三、❗注意

在之前写的admin-ebook.vue当中还有一些代码是注释掉的，因为之前没有写分类模块，现在我们需要使用分类的功能了，我们还需要解除一些注释。大家可以看看哪些地方有关category的被注释掉了，大家可以打开，后端接口下一篇文章就会带大家写出来。

这里需要修改一些onMounted()函数中的代码，修改成下边的部分。

 onMounted(() => {       handleQueryCategory();       // handleQueryEbook();     });

此外，这个网站的标题头部的信息可能我之前没加上去，就是这个。

 在the-header.vue中修改一下自己的代码。

在下边的style中加上样式。然后就可以展示出来了。