• 【wiki知识库】05.分类管理实现--前端Vue模块

    427ef4152dbf4b6c92618a198935cb6c.png

      📝个人主页：哈__

    期待您的关注 

    1b7335aca73b41609b7f05d1d366f476.gif

    目录

    一、🔥今日目标

    二、🌏前端部分的改造

    2.1 新增一个tool.ts 

    2.2 新增admin-categoty.vue

    2.3 添加新的路由规则

    2.4 添加the-welcome.vue

    2.5 修改HomeView.vue

     三、❗注意

    一、🔥今日目标

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

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

    a865ffb43cac43258309d481fca03d99.png

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

    179a90137f4148bcb406d84b99034736.png

    二、🌏前端部分的改造

    2.1 新增一个tool.ts 

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

    a70695362c524453896b150267042401.png

    1. export class Tool {
    2.     /**
    3.      * 空校验 null或""都返回true
    4.      */
    5.     public static isEmpty(obj: any) {
    6.         if ((typeof obj === 'string')) {
    7.             return !obj || obj.replace(/\s+/g, "") === ""
    8.         } else {
    9.             return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);
    10.         }
    11.     }
    12.  
    13.     /**
    14.      * 非空校验
    15.      */
    16.     public static isNotEmpty(obj: any) {
    17.         return !this.isEmpty(obj);
    18.     }
    19.  
    20.     /**
    21.      * 对象复制
    22.      * @param obj
    23.      */
    24.     public static copy(obj: object) {
    25.         if (Tool.isNotEmpty(obj)) {
    26.             return JSON.parse(JSON.stringify(obj));
    27.         }
    28.     }
    29.  
    30.     /**
    31.      * 使用递归将数组转为树形结构
    32.      * 父ID属性为parent
    33.      */
    34.     public static array2Tree(array: any, parentId: number) {
    35.         if (Tool.isEmpty(array)) {
    36.             return [];
    37.         }
    38.  
    39.         const result = [];
    40.         for (let i = 0; i < array.length; i++) {
    41.             const c = array[i];
    42.             // console.log(Number(c.parent), Number(parentId));
    43.             if (Number(c.parent) === Number(parentId)) {
    44.                 result.push(c);
    45.  
    46.                 // 递归查看当前节点对应的子节点
    47.                 const children = Tool.array2Tree(array, c.id);
    48.                 if (Tool.isNotEmpty(children)) {
    49.                     c.children = children;
    50.                 }
    51.             }
    52.         }
    53.         return result;
    54.     }
    55.  
    56.     /**
    57.      * 随机生成[len]长度的[radix]进制数
    58.      * @param len
    59.      * @param radix 默认62
    60.      * @returns {string}
    61.      */
    62.     public static uuid(len: number, radix = 62) {
    63.         const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    64.         const uuid = [];
    65.         radix = radix || chars.length;
    66.  
    67.         for (let i = 0; i < len; i++) {
    68.             uuid[i] = chars[0 | Math.random() * radix];
    69.         }
    70.  
    71.         return uuid.join('');
    72.     }
    73. }

    2.2 新增admin-categoty.vue

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

    分类添加功能：

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

    1. <a-modal
    2.     title="分类表单"
    3.     v-model:visible="modalVisible"
    4.     :confirm-loading="modalLoading"
    5.     @ok="handleModalOk"
    6.   >
    7.     <a-form :model="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    8.       <a-form-item label="名称">
    9.         <a-input v-model:value="category.name" />
    10.       a-form-item>
    11.       <a-form-item label="父分类">
    12.         <a-select
    13.           v-model:value="category.parent"
    14.           ref="select"
    15.         >
    16.           <a-select-option :value="0">
    17.             无
    18.           a-select-option>
    19.           <a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="category.id === c.id">
    20.             {{c.name}}
    21.           a-select-option>
    22.         a-select>
    23.       a-form-item>
    24.       <a-form-item label="顺序">
    25.         <a-input v-model:value="category.sort" />
    26.       a-form-item>
    27.     a-form>
    28.   a-modal>

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

    31e968a8f0fb40cd8559b387472c1425.png

    level变量的封装过程：

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

    1. const handleQuery = () => {
    2.         loading.value = true;
    3.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
    4.         level1.value = [];
    5.         axios.get("/category/all").then((response) => {
    6.           loading.value = false;
    7.           const data = response.data;
    8.           if (data.success) {
    9.             categorys.value = data.content;
    10.             console.log("原始数组：", categorys.value);
    11.  
    12.             level1.value = [];
    13.             level1.value = Tool.array2Tree(categorys.value, 0);
    14.             console.log("树形结构：", level1);
    15.           } else {
    16.             message.error(data.message);
    17.           }
    18.         });
    19.       };
    '
    运行

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

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

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

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

    1.  /**
    2.      * 使用递归将数组转为树形结构
    3.      * 父ID属性为parent
    4.      */
    5.     public static array2Tree(array: any, parentId: number) {
    6.         if (Tool.isEmpty(array)) {
    7.             return [];
    8.         }
    9.  
    10.         const result = [];
    11.         for (let i = 0; i < array.length; i++) {
    12.             const c = array[i];
    13.             // console.log(Number(c.parent), Number(parentId));
    14.             if (Number(c.parent) === Number(parentId)) {
    15.                 result.push(c);
    16.  
    17.                 // 递归查看当前节点对应的子节点
    18.                 const children = Tool.array2Tree(array, c.id);
    19.                 if (Tool.isNotEmpty(children)) {
    20.                     c.children = children;
    21.                 }
    22.             }
    23.         }
    24.         return result;
    25.     }

     全部代码如下：

    1. <template>
    2.   <a-layout>
    3.     <a-layout-content
    4.       :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    5.     >
    6.       <p>
    7.         <a-form layout="inline" :model="param">
    8.           <a-form-item>
    9.             <a-input v-model:value="param.name" placeholder="名称">
    10.             a-input>
    11.           a-form-item>
    12.           <a-form-item>
    13.             <a-button type="primary" @click="handleQuery()">
    14.               查询
    15.             a-button>
    16.           a-form-item>
    17.           <a-form-item>
    18.             <a-button type="primary" @click="add()">
    19.               新增
    20.             a-button>
    21.           a-form-item>
    22.         a-form>
    23.       p>
    24.       <p>
    25.         <a-alert
    26.                 class="tip"
    27.                 message="小提示：这里的分类会显示到首页的侧边菜单"
    28.                 type="info"
    29.                 closable
    30.         />
    31.       p>
    32.       <a-table
    33.         v-if="level1.length > 0"
    34.         :columns="columns"
    35.         :row-key="record => record.id"
    36.         :data-source="level1"
    37.         :loading="loading"
    38.         :pagination="false"
    39.         :defaultExpandAllRows="true"
    40.       >
    41.         <template #cover="{ text: cover }">
    42.           <img v-if="cover" :src="cover" alt="avatar" />
    43.         template>
    44.         <template v-slot:action="{ text, record }">
    45.           <a-space size="small">
    46.             <a-button type="primary" @click="edit(record)">
    47.               编辑
    48.             a-button>
    49.             <a-popconfirm
    50.               title="删除后不可恢复，确认删除?"
    51.               ok-text="是"
    52.               cancel-text="否"
    53.               @confirm="handleDelete(record.id)"
    54.             >
    55.               <a-button type="danger">
    56.                 删除
    57.               a-button>
    58.             a-popconfirm>
    59.           a-space>
    60.         template>
    61.       a-table>
    62.     a-layout-content>
    63.   a-layout>
    64.  
    65.   <a-modal
    66.     title="分类表单"
    67.     v-model:visible="modalVisible"
    68.     :confirm-loading="modalLoading"
    69.     @ok="handleModalOk"
    70.   >
    71.     <a-form :model="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    72.       <a-form-item label="名称">
    73.         <a-input v-model:value="category.name" />
    74.       a-form-item>
    75.       <a-form-item label="父分类">
    76.         <a-select
    77.           v-model:value="category.parent"
    78.           ref="select"
    79.         >
    80.           <a-select-option :value="0">
    81.             无
    82.           a-select-option>
    83.           <a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="category.id === c.id">
    84.             {{c.name}}
    85.           a-select-option>
    86.         a-select>
    87.       a-form-item>
    88.       <a-form-item label="顺序">
    89.         <a-input v-model:value="category.sort" />
    90.       a-form-item>
    91.     a-form>
    92.   a-modal>
    93. template>
    94.  
    95. <script lang="ts">
    96.   import { defineComponent, onMounted, ref } from 'vue';
    97.   import axios from 'axios';
    98.   import { message } from 'ant-design-vue';
    99.   import {Tool} from "@/util/tool";
    100.  
    101.   export default defineComponent({
    102.     name: 'AdminCategory',
    103.     setup() {
    104.       const param = ref();
    105.       param.value = {};
    106.       const categorys = ref();
    107.       const loading = ref(false);
    108.  
    109.       const columns = [
    110.         {
    111.           title: '名称',
    112.           dataIndex: 'name'
    113.         },
    114.         // {
    115.         //   title: '父分类',
    116.         //   key: 'parent',
    117.         //   dataIndex: 'parent'
    118.         // },
    119.         {
    120.           title: '顺序',
    121.           dataIndex: 'sort'
    122.         },
    123.         {
    124.           title: 'Action',
    125.           key: 'action',
    126.           slots: { customRender: 'action' }
    127.         }
    128.       ];
    129.  
    130.       /**
    131.        * 一级分类树，children属性就是二级分类
    132.        * [{
    133.        *   id: "",
    134.        *   name: "",
    135.        *   children: [{
    136.        *     id: "",
    137.        *     name: "",
    138.        *   }]
    139.        * }]
    140.        */
    141.       const level1 = ref(); // 一级分类树，children属性就是二级分类
    142.       level1.value = [];
    143.  
    144.       /**
    145.        * 数据查询
    146.        **/
    147.       const handleQuery = () => {
    148.         loading.value = true;
    149.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
    150.         level1.value = [];
    151.         axios.get("/category/all").then((response) => {
    152.           loading.value = false;
    153.           const data = response.data;
    154.           if (data.success) {
    155.             categorys.value = data.content;
    156.             console.log("原始数组：", categorys.value);
    157.  
    158.             level1.value = [];
    159.             level1.value = Tool.array2Tree(categorys.value, 0);
    160.             console.log("树形结构：", level1);
    161.           } else {
    162.             message.error(data.message);
    163.           }
    164.         });
    165.       };
    166.  
    167.       // -------- 表单 ---------
    168.       const category = ref({});
    169.       const modalVisible = ref(false);
    170.       const modalLoading = ref(false);
    171.       const handleModalOk = () => {
    172.         modalLoading.value = true;
    173.         axios.post("/category/save", category.value).then((response) => {
    174.           modalLoading.value = false;
    175.           const data = response.data; // data = commonResp
    176.           if (data.success) {
    177.             modalVisible.value = false;
    178.  
    179.             // 重新加载列表
    180.             handleQuery();
    181.           } else {
    182.             message.error(data.message);
    183.           }
    184.         });
    185.       };
    186.  
    187.       /**
    188.        * 编辑
    189.        */
    190.       const edit = (record: any) => {
    191.         modalVisible.value = true;
    192.         category.value = Tool.copy(record);
    193.       };
    194.  
    195.       /**
    196.        * 新增
    197.        */
    198.       const add = () => {
    199.         modalVisible.value = true;
    200.         category.value = {};
    201.       };
    202.  
    203.       const handleDelete = (id: number) => {
    204.         axios.delete("/category/delete/" + id).then((response) => {
    205.           const data = response.data; // data = commonResp
    206.           if (data.success) {
    207.             // 重新加载列表
    208.             handleQuery();
    209.           } else {
    210.             message.error(data.message);
    211.           }
    212.         });
    213.       };
    214.  
    215.       onMounted(() => {
    216.         handleQuery();
    217.       });
    218.  
    219.       return {
    220.         param,
    221.         // categorys,
    222.         level1,
    223.         columns,
    224.         loading,
    225.         handleQuery,
    226.  
    227.         edit,
    228.         add,
    229.  
    230.         category,
    231.         modalVisible,
    232.         modalLoading,
    233.         handleModalOk,
    234.  
    235.         handleDelete
    236.       }
    237.     }
    238.   });
    239. script>
    240.  
    241. <style scoped>
    242.   img {
    243.     width: 50px;
    244.     height: 50px;
    245.   }
    246. style>

    2.3 添加新的路由规则

    1.   {
    2.     path: '/admin/category',
    3.     name: 'AdminCateGory',
    4.     component: AdminCategory
    5.   },

    2.4 添加the-welcome.vue

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

    2.  
    3. <script lang="ts">
    4.     name: 'the-welcome'
    5. script>
    6. <style scoped>
    7.  
    8. style>

    2.5 修改HomeView.vue

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

    2.  
    3. <script lang="ts">
    4. import { defineComponent, onMounted, ref, reactive, toRef } from 'vue';
    5. import axios from 'axios';
    6. import { message } from 'ant-design-vue';
    7. import {Tool} from "@/util/tool";
    8. import TheWelcome from '@/components/the-welcome.vue';
    9.  
    10.  
    11. export default defineComponent({
    12.   name: 'Home',
    13.   components: {
    14.     TheWelcome
    15.   },
    16.   setup() {
    17.     const ebooks = ref();
    18.     // const ebooks1 = reactive({books: []});
    19.  
    20.     const openKeys =  ref();
    21.  
    22.     const level1 =  ref();
    23.     let categorys: any;
    24.     /**
    25.      * 查询所有分类
    26.      **/
    27.     const handleQueryCategory = () => {
    28.       axios.get("/category/all").then((response) => {
    29.         const data = response.data;
    30.         if (data.success) {
    31.           categorys = data.content;
    32.           console.log("原始数组：", categorys);
    33.  
    34.           // 加载完分类后，将侧边栏全部展开
    35.           openKeys.value = [];
    36.           for (let i = 0; i < categorys.length; i++) {
    37.             openKeys.value.push(categorys[i].id)
    38.           }
    39.  
    40.           level1.value = [];
    41.           level1.value = Tool.array2Tree(categorys, 0);
    42.           console.log("树形结构：", level1.value);
    43.         } else {
    44.           message.error(data.message);
    45.         }
    46.       });
    47.     };
    48.  
    49.     const isShowWelcome = ref(true);
    50.     let categoryId2 = 0;
    51.  
    52.     const handleQueryEbook = () => {
    53.       axios.get("/ebook/list", {
    54.         params: {
    55.           page: 1,
    56.           size: 1000,
    57.           categoryId2: categoryId2
    58.         }
    59.       }).then((response) => {
    60.         const data = response.data;
    61.         ebooks.value = data.content.list;
    62.         // ebooks1.books = data.content;
    63.       });
    64.     };
    65.  
    66.     const handleClick = (value: any) => {
    67.       // console.log("menu click", value)
    68.       if (value.key === 'welcome') {
    69.         isShowWelcome.value = true;
    70.       } else {
    71.         categoryId2 = value.key;
    72.         isShowWelcome.value = false;
    73.         handleQueryEbook();
    74.       }
    75.       // isShowWelcome.value = value.key === 'welcome';
    76.     };
    77.  
    78.     onMounted(() => {
    79.       handleQueryCategory();
    80.       // handleQueryEbook();
    81.     });
    82.  
    83.     return {
    84.       ebooks,
    85.       // ebooks2: toRef(ebooks1, "books"),
    86.       // listData,
    87.       pagination: {
    88.         onChange: (page: any) => {
    89.           console.log(page);
    90.         },
    91.         pageSize: 3,
    92.       },
    93.  
    94.       handleClick,
    95.       level1,
    96.  
    97.       isShowWelcome,
    98.  
    99.       openKeys
    100.     }
    101.   }
    102. });
    103. script>
    104.  
    105. <style scoped>
    106.   .ant-avatar {
    107.     width: 50px;
    108.     height: 50px;
    109.     line-height: 50px;
    110.     border-radius: 8%;
    111.     margin: 5px 0;
    112.   }
    113. style>

     三、❗注意

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

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

    1.  onMounted(() => {
    2.       handleQueryCategory();
    3.       // handleQueryEbook();
    4.     });

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

    6e891551aa90455fbdae743a89532010.png

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

    46af899fab6245d7b98830ef95325fdc.png

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

  • 相关阅读:
    全球电梯空气消毒机行业调研及趋势分析报告
    JMeter详解
    linux 的文件权限案列
    python在导入模块时，即import时究竟有哪些动作？
    性能测试学习——项目环境搭建和Jmete学习二
    事件分发机制原理
    一文带你用 Mac M1 跑 RocketMQ
    [EI复现】基于主从博弈的新型城镇配电系统产消者竞价策略（Matlab代码实现）
    java计算机毕业设计供求信息网MyBatis+系统+LW文档+源码+调试部署
    vue+element项目创建步骤
  • 原文地址：https://blog.csdn.net/qq_61024956/article/details/139468674