• 分类基本增删改查功能：表设计，生成持久层代码，从电子书管理拷贝出一套分类管理代码
  • 分类表格显示优化：不需要分页，树形表格
  • 分类编辑功能优化：新增/编辑类时，支持选中某一分类作为父分类，或者无分类
  • 电子书管理功能优化：编辑电子书时，可以选择分类一，分类二，表格显示分类名称
  • 首页显示分类菜单
  • 点击某一分类时，显示该分类下所有的电子书

✿分类表设计与代码生成

1. 分类表设计

我们执行下面的代码sql，这个就是可以形成树形分类的一个设计，每条数据都包含一个id和一个父id，这样可以递归出一个树形结构，我们这个是一个二级分类：

  1. drop table if exists `category`;
  2. create table `category` (
  3.     `id` bigint not null comment 'id',
  4.     `parent` bigint not null default 0 comment '父id',
  5.     `name` varchar(50) not null comment '名称',
  6.     `sort` int comment '顺序',
  7.     primary key (`id`)
  8. ) engine=innodb default charset=utf8mb4 comment='分类';
  10. insert into `category` (id, parent, name, sort) values (100, 000,'前端开发', 100);
  11. insert into `category` (id, parent, name, sort) values (101, 100,'Vue', 101);
  12. insert into `category` (id, parent, name, sort) values (102, 100,'HTML & CSS', 102);
  13. insert into `category` (id, parent, name, sort) values (200, 000,'Java', 200);
  14. insert into `category` (id, parent, name, sort) values (201, 200,'基础应用', 201);
  15. insert into `category` (id, parent, name, sort) values (202, 200,'框架应用', 202);
  16. insert into `category` (id, parent, name, sort) values (300, 000,'Python', 300);
  17. insert into `category` (id, parent, name, sort) values (301, 300,'基础应用', 301);
  18. insert into `category` (id, parent, name, sort) values (302, 300,'进阶方向应用', 302);
  19. insert into `category` (id, parent, name, sort) values (400, 000,'数据库', 400);
  20. insert into `category` (id, parent, name, sort) values (401, 400,'MySQL', 401);
  21. insert into `category` (id, parent, name, sort) values (500, 000,'其他', 500);
  22. insert into `category` (id, parent, name, sort) values (501, 500,'服务器', 501);
  23. insert into `category` (id, parent, name, sort) values (502, 500,'开发工具', 502);
  24. insert into `category` (id, parent, name, sort) values (503, 500,'热门服务端语言', 503);

2. 生成持久层代码

我们依旧进入generator-config.xml，修改最后的table标签，然后去执行mybatis-generator命令，特别注意生成的四个文件不要去动，这样后续数据库有扩展的话可以重新生成。

  1. <table tableName="category"/>

✿分类基本增删改查

1. 后端改造

从后端改造这个分类的增删改查，我们可以直接去复制一下之前的ebook的一下代码，改造的顺序应该是controller -> service -> 各种实体类，其中进入文件就Ctrl + R键，将ebook改成category，Ebook改为Category即可：

  1. @RestController
  2. @RequestMapping("/category")
  3. public class CategoryController {
  4.     @Resource
  5.     private CategoryService categoryService;
  8.     @GetMapping("/list")
  9.     public CommonResp list(@Valid CategoryQueryReq req) {
  10.         // controller层尽量不要出现Category这个实体类
  11.         // 因为实体类是和数据库一一对应的
  13.         CommonResp<PageResp<CategoryQueryResp>> resp = new CommonResp<>();
  14.         PageResp<CategoryQueryResp> list =  categoryService.list(req);
  15.         resp.setContent(list);
  16.         return resp;
  17.     }
  19.     @PostMapping("/save")
  20.     public CommonResp save(@Valid @RequestBody CategorySaveReq req) {
  21.         CommonResp resp = new CommonResp<>();
  22.         categoryService.save(req);
  23.         return resp;
  24.     }
  26.     @DeleteMapping("/delete/{id}")
  27.     public CommonResp delete(@PathVariable long id) {
  28.         CommonResp resp = new CommonResp<>();
  29.         categoryService.delete(id);
  30.         return resp;
  31.     }
  32. }
  1. @Service
  2. public class CategoryService {
  3.     // 这个就是用来打印的，在WikiApplication当中也用到了
  4.     private static final Logger LOG = LoggerFactory.getLogger(CategoryService.class);
  6.     @Resource
  7.     private CategoryMapper categoryMapper;
  9.     @Resource
  10.     private SnowFlake snowFlake;
  12.     /**
  13.      * 查询电子书
  14.      * @param req 电子书查询参数
  15.      * @return 电子书分页列表
  16.      */
  17.     public PageResp<CategoryQueryResp> list(CategoryQueryReq req) {
  18.         CategoryExample categoryExample = new CategoryExample();
  20.         // createCriteria相当于where条件
  21.         CategoryExample.Criteria criteria = categoryExample.createCriteria();
  23.         // 根据categoryExample条件查询
  24.         PageHelper.startPage(req.getPage(), req.getSize());
  25.         List<Category> categorysList = categoryMapper.selectByExample(categoryExample);
  27.         PageInfo<Category> pageInfo = new PageInfo<>(categorysList);
  28.         LOG.info("总行数：{}",pageInfo.getTotal()); // 总行数
  29.         LOG.info("总页数：{}",pageInfo.getPages()); // 总页数，一般不需要,前端会根据总数自动计算总页数
  31.         List<CategoryQueryResp> respList = CopyUtil.copyList(categorysList, CategoryQueryResp.class);
  32.         PageResp<CategoryQueryResp> pageResp = new PageResp();
  33.         pageResp.setTotal(pageInfo.getTotal());
  34.         pageResp.setList(respList);
  35.         return pageResp;
  36.     }
  39.     /**
  40.      * 电子书保存接口(保存包括编辑保存->更新， 也包括新增保存->新增， 根据req是否有id来判断)
  41.      * @param req 电子书保存参数
  42.      */
  43.     public void save(CategorySaveReq req) {
  44.         Category category = CopyUtil.copy(req, Category.class);
  45.         if(ObjectUtils.isEmpty(req.getId())) {
  46.             // 新增
  47.             category.setId(snowFlake.nextId());
  48.             categoryMapper.insert(category);
  49.         } else {
  50.             // 更新
  51.             // 因为updateByPrimaryKey传递的Category类型的参数，所以需要将CategorySaveReq 转化成Category
  52.             categoryMapper.updateByPrimaryKey(category);
  53.         }
  54.     }
  56.     /**
  57.      * 电子书删除接口（按照id进行删除）
  58.      * @param id
  59.      */
  60.     public void delete(long id) {
  61.         categoryMapper.deleteByPrimaryKey(id);
  62.     }
  63. }

接下来就是实体类，我们有三个实体类，分别在对应的req和resp文件下创建即可：CategoryQueryReq, CategorySaveReq, CategoryQueryResp。

2. 前端代码展示

前端需要在views/admin下面创建admin-category.vue文件，然后实际上就是将admin-ebook修修改改即可：

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

✿分类表格显示优化

分类查询实际上不需要分页，一次查出全部数据，另外我们需要改为树形表格展示，所以我们前后端都来改造一下：

1. 后端改造

后端我们之前书写的list先留着，我们新书写一个all的接口，一次性将所有的分类查出来：

  1. @GetMapping("/all")
  2. public CommonResp all(@Valid CategoryQueryReq req) {
  3.     // controller层尽量不要出现Category这个实体类
  4.     // 因为实体类是和数据库一一对应的
  6.     CommonResp<List<CategoryQueryResp>> resp = new CommonResp<>();
  7.     List<CategoryQueryResp> list =  categoryService.all(req);
  8.     resp.setContent(list);
  9.     return resp;
  10. }
  1. /**
  2.  * 查询分类
  3.  * @param req 分类查询参数
  4.  * @return 分类分页列表
  5.  */
  6. public List<CategoryQueryResp> all(CategoryQueryReq req) {
  7.     CategoryExample categoryExample = new CategoryExample();
  8.     categoryExample.setOrderByClause("sort asc"); // 按照sort排序
  9.     List<Category> categorysList = categoryMapper.selectByExample(categoryExample);
  11.     List<CategoryQueryResp> respList = CopyUtil.copyList(categorysList, CategoryQueryResp.class);
  12.     return respList;
  13. }

2. 前端改造

前端的代码我们前面在分类基本增删改查的时候就全部展示了，现在我们需要展示一下如何将数据展示成为树形结构，这个递归比较重要，所以好好理解一下：

  1.   /**
  2.    * 使用递归将数组转为树形结构
  3.    * 父ID属性为parent
  4.    */
  5.   public static array2Tree (array: any, parentId: number) {
  6.     if (Tool.isEmpty(array)) {
  7.       return [];
  8.     }
  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);
  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.   }

分类编辑功能优化

由于分类比较特殊，在编辑（新增/修改）分类时，支持选中某一个分类作为父分类，或者没有分类，所以我们需要将，分类应该将输入框改变成为下拉框，下拉框的选项我们在这里是写死的，如果有活的必须够短有提供接口，代码我们可以在分类基本增删改查-前端代码展示当中看到完整的前端代码。

电子书管理增加分类选择

电子书的管理页面当中的分类进行了优化，显示的就不再是具体的分类代码，而是使用a-cascader级联组件进行了优化，所以具体的项目代码我们展示在下面，前端代码无法仔细详解，大家仔细研究：

  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({page: 1, size: pagination.pageSize})">
  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.       <a-table
  25.         :columns="columns"
  26.         :row-key="record => record.id"
  27.         :data-source="ebooks"
  28.         :pagination="pagination"
  29.         :loading="loading"
  30.         @change="handleTableChange"
  31.       >
  32.         <template #cover="{ text: cover }">
  33.           <img v-if="cover" :src="cover" alt="avatar" />
  34.         </template>
  35.         <template v-slot:category="{ text, record }">
  36.           <span>{{ getCategoryName(record.category1Id) }} / {{ getCategoryName(record.category2Id) }}</span>
  37.         </template>
  38.         <template v-slot:action="{ text, record }">
  39.           <a-space size="small">
  40.             <router-link :to="'/admin/doc?ebookId=' + record.id">
  41.               <a-button type="primary">
  42.                 文档管理
  43.               </a-button>
  44.             </router-link>
  45.             <a-button type="primary" @click="edit(record)">
  46.               编辑
  47.             </a-button>
  48.             <a-popconfirm
  49.               title="删除后不可恢复，确认删除?"
  50.               ok-text="是"
  51.               cancel-text="否"
  52.               @confirm="handleDelete(record.id)"
  53.             >
  54.               <a-button type="danger">
  55.                 删除
  56.               </a-button>
  57.             </a-popconfirm>
  58.           </a-space>
  59.         </template>
  60.       </a-table>
  61.     </a-layout-content>
  62.   </a-layout>
  64.   <a-modal
  65.     title="电子书表单"
  66.     v-model:visible="modalVisible"
  67.     :confirm-loading="modalLoading"
  68.     @ok="handleModalOk"
  69.   >
  70.     <a-form :model="ebook" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  71.       <a-form-item label="封面">
  72.         <a-input v-model:value="ebook.cover" />
  73.       </a-form-item>
  74.       <a-form-item label="名称">
  75.         <a-input v-model:value="ebook.name" />
  76.       </a-form-item>
  77.       <a-form-item label="分类">
  78.         <a-cascader
  79.           v-model:value="categoryIds"
  80.           :field-names="{ label: 'name', value: 'id', children: 'children' }"
  81.           :options="level1"
  82.         />
  83.       </a-form-item>
  84.       <a-form-item label="描述">
  85.         <a-input v-model:value="ebook.description" type="textarea" />
  86.       </a-form-item>
  87.     </a-form>
  88.   </a-modal>
  89. </template>
  91. <script lang="ts">
  92.   import { defineComponent, onMounted, ref } from 'vue';
  93.   import axios from 'axios';
  94.   import { message } from 'ant-design-vue';
  95.   import {Tool} from "@/util/tool";
  97.   export default defineComponent({
  98.     name: 'AdminEbook',
  99.     setup() {
  100.       const param = ref();
  101.       param.value = {};
  102.       const ebooks = ref();
  103.       const pagination = ref({
  104.         current: 1,
  105.         pageSize: 10,
  106.         total: 0
  107.       });
  108.       const loading = ref(false);
  110.       const columns = [
  111.         {
  112.           title: '封面',
  113.           dataIndex: 'cover',
  114.           slots: { customRender: 'cover' }
  115.         },
  116.         {
  117.           title: '名称',
  118.           dataIndex: 'name'
  119.         },
  120.         {
  121.           title: '分类',
  122.           slots: { customRender: 'category' }
  123.         },
  124.         {
  125.           title: '文档数',
  126.           dataIndex: 'docCount'
  127.         },
  128.         {
  129.           title: '阅读数',
  130.           dataIndex: 'viewCount'
  131.         },
  132.         {
  133.           title: '点赞数',
  134.           dataIndex: 'voteCount'
  135.         },
  136.         {
  137.           title: 'Action',
  138.           key: 'action',
  139.           slots: { customRender: 'action' }
  140.         }
  141.       ];
  143.       /**
  144.        * 数据查询
  145.        **/
  146.       const handleQuery = (params: any) => {
  147.         loading.value = true;
  148.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
  149.         ebooks.value = [];
  150.         axios.get("/ebook/list", {
  151.           params: {
  152.             page: params.page,
  153.             size: params.size,
  154.             name: param.value.name
  155.           }
  156.         }).then((response) => {
  157.           loading.value = false;
  158.           const data = response.data;
  159.           if (data.success) {
  160.             ebooks.value = data.content.list;
  162.             // 重置分页按钮
  163.             pagination.value.current = params.page;
  164.             pagination.value.total = data.content.total;
  165.           } else {
  166.             message.error(data.message);
  167.           }
  168.         });
  169.       };
  171.       /**
  172.        * 表格点击页码时触发
  173.        */
  174.       const handleTableChange = (pagination: any) => {
  175.         console.log("看看自带的分页参数都有啥：" + pagination);
  176.         handleQuery({
  177.           page: pagination.current,
  178.           size: pagination.pageSize
  179.         });
  180.       };
  182.       // -------- 表单 ---------
  183.       /**
  184.        * 数组，[100, 101]对应：前端开发 / Vue
  185.        */
  186.       const categoryIds = ref();
  187.       const ebook = ref();
  188.       const modalVisible = ref(false);
  189.       const modalLoading = ref(false);
  190.       const handleModalOk = () => {
  191.         modalLoading.value = true;
  192.         ebook.value.category1Id = categoryIds.value[0];
  193.         ebook.value.category2Id = categoryIds.value[1];
  194.         axios.post("/ebook/save", ebook.value).then((response) => {
  195.           modalLoading.value = false;
  196.           const data = response.data; // data = commonResp
  197.           if (data.success) {
  198.             modalVisible.value = false;
  200.             // 重新加载列表
  201.             handleQuery({
  202.               page: pagination.value.current,
  203.               size: pagination.value.pageSize,
  204.             });
  205.           } else {
  206.             message.error(data.message);
  207.           }
  208.         });
  209.       };
  211.       /**
  212.        * 编辑
  213.        */
  214.       const edit = (record: any) => {
  215.         modalVisible.value = true;
  216.         ebook.value = Tool.copy(record);
  217.         categoryIds.value = [ebook.value.category1Id, ebook.value.category2Id]
  218.       };
  220.       /**
  221.        * 新增
  222.        */
  223.       const add = () => {
  224.         modalVisible.value = true;
  225.         ebook.value = {};
  226.       };
  228.       const handleDelete = (id: number) => {
  229.         axios.delete("/ebook/delete/" + id).then((response) => {
  230.           const data = response.data; // data = commonResp
  231.           if (data.success) {
  232.             // 重新加载列表
  233.             handleQuery({
  234.               page: pagination.value.current,
  235.               size: pagination.value.pageSize,
  236.             });
  237.           } else {
  238.             message.error(data.message);
  239.           }
  240.         });
  241.       };
  243.       const level1 =  ref();
  244.       let categorys: any;
  245.       /**
  246.        * 查询所有分类
  247.        **/
  248.       const handleQueryCategory = () => {
  249.         loading.value = true;
  250.         axios.get("/category/all").then((response) => {
  251.           loading.value = false;
  252.           const data = response.data;
  253.           if (data.success) {
  254.             categorys = data.content;
  255.             console.log("原始数组：", categorys);
  257.             level1.value = [];
  258.             level1.value = Tool.array2Tree(categorys, 0);
  259.             console.log("树形结构：", level1.value);
  261.             // 加载完分类后，再加载电子书，否则如果分类树加载很慢，则电子书渲染会报错
  262.             handleQuery({
  263.               page: 1,
  264.               size: pagination.value.pageSize,
  265.             });
  266.           } else {
  267.             message.error(data.message);
  268.           }
  269.         });
  270.       };
  272.       const getCategoryName = (cid: number) => {
  273.         // console.log(cid)
  274.         let result = "";
  275.         categorys.forEach((item: any) => {
  276.           if (item.id === cid) {
  277.             // return item.name; // 注意，这里直接return不起作用
  278.             result = item.name;
  279.           }
  280.         });
  281.         return result;
  282.       };
  284.       onMounted(() => {
  285.         handleQueryCategory();
  286.       });
  288.       return {
  289.         param,
  290.         ebooks,
  291.         pagination,
  292.         columns,
  293.         loading,
  294.         handleTableChange,
  295.         handleQuery,
  296.         getCategoryName,
  298.         edit,
  299.         add,
  301.         ebook,
  302.         modalVisible,
  303.         modalLoading,
  304.         handleModalOk,
  305.         categoryIds,
  306.         level1,
  308.         handleDelete
  309.       }
  310.     }
  311.   });
  312. </script>
  314. <style scoped>
  315.   img {
  316.     width: 50px;
  317.     height: 50px;
  318.   }
  319. </style>

首页显示分类菜单

思路非常简单，第一步加载数据变成树形结构，第二步将菜单做出循环，然后使用a-sub-menu这个组件写成树形的菜单。

  1. <template>
  2.   <a-layout>
  3.     <a-layout-sider width="200" style="background: #fff">
  4.       <a-menu
  5.         mode="inline"
  6.         :style="{ height: '100%', borderRight: 0 }"
  7.         @click="handleClick"
  8.         :openKeys="openKeys"
  9.       >
  10.         <a-menu-item key="welcome">
  11.           <MailOutlined />
  12.           <span>欢迎</span>
  13.         </a-menu-item>
  14.         <a-sub-menu v-for="item in level1" :key="item.id" :disabled="true">
  15.           <template v-slot:title>
  16.             <span><user-outlined />{{item.name}}</span>
  17.           </template>
  18.           <a-menu-item v-for="child in item.children" :key="child.id">
  19.             <MailOutlined /><span>{{child.name}}</span>
  20.           </a-menu-item>
  21.         </a-sub-menu>
  22.         <a-menu-item key="tip" :disabled="true">
  23.           <span>以上菜单在分类管理配置</span>
  24.         </a-menu-item>
  25.       </a-menu>
  26.     </a-layout-sider>
  27.     <a-layout-content
  28.     :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
  29.   >
  30.       <div class="welcome" v-show="isShowWelcome">
  31.         <the-welcome></the-welcome>
  32.       </div>
  33.       <a-list v-show="!isShowWelcome" item-layout="vertical" size="large" :grid="{ gutter: 20, column: 3 }" :data-source="ebooks">
  34.         <template #renderItem="{ item }">
  35.           <a-list-item key="item.name">
  36.             <template #actions>
  37.               <span>
  38.                 <component v-bind:is="'FileOutlined'" style="margin-right: 8px" />
  39.                 {{ item.docCount }}
  40.               </span>
  41.               <span>
  42.                 <component v-bind:is="'UserOutlined'" style="margin-right: 8px" />
  43.                 {{ item.viewCount }}
  44.               </span>
  45.               <span>
  46.                 <component v-bind:is="'LikeOutlined'" style="margin-right: 8px" />
  47.                 {{ item.voteCount }}
  48.               </span>
  49.             </template>
  50.             <a-list-item-meta :description="item.description">
  51.               <template #title>
  52.                 <router-link :to="'/doc?ebookId=' + item.id">
  53.                   {{ item.name }}
  54.                 </router-link>
  55.               </template>
  56.               <template #avatar><a-avatar :src="item.cover"/></template>
  57.             </a-list-item-meta>
  58.           </a-list-item>
  59.         </template>
  60.       </a-list>
  61.   </a-layout-content>
  62.   </a-layout>
  63. </template>
  65. <script lang="ts">
  66. import { defineComponent, onMounted, ref, reactive, toRef } from 'vue';
  67. import axios from 'axios';
  68. import { message } from 'ant-design-vue';
  69. import {Tool} from "@/util/tool";
  70. import TheWelcome from '@/components/the-welcome.vue';
  72. export default defineComponent({
  73.   name: 'Home',
  74.   components: {
  75.     TheWelcome
  76.   },
  77.   setup() {
  78.     const ebooks = ref();
  79.     // const ebooks1 = reactive({books: []});
  81.     const openKeys =  ref();
  83.     const level1 =  ref();
  84.     let categorys: any;
  85.     /**
  86.      * 查询所有分类
  87.      **/
  88.     const handleQueryCategory = () => {
  89.       axios.get("/category/all").then((response) => {
  90.         const data = response.data;
  91.         if (data.success) {
  92.           categorys = data.content;
  93.           console.log("原始数组：", categorys);
  95.           // 加载完分类后，将侧边栏全部展开
  96.           openKeys.value = [];
  97.           for (let i = 0; i < categorys.length; i++) {
  98.             openKeys.value.push(categorys[i].id)
  99.           }
  101.           level1.value = [];
  102.           level1.value = Tool.array2Tree(categorys, 0);
  103.           console.log("树形结构：", level1.value);
  104.         } else {
  105.           message.error(data.message);
  106.         }
  107.       });
  108.     };
  110.     const isShowWelcome = ref(true);
  111.     let categoryId2 = 0;
  113.     /**
  114.      * 查询数据
  115.      */
  116.     const handleQueryEbook = () => {
  117.       axios.get("/ebook/list", {
  118.         params: {
  119.           page: 1,
  120.           size: 1000,
  121.           categoryId2: categoryId2
  122.         }
  123.       }).then((response) => {
  124.         const data = response.data;
  125.         ebooks.value = data.content.list;
  126.         // ebooks1.books = data.content;
  127.       });
  128.     };
  130.     const handleClick = (value: any) => {
  131.       // console.log("menu click", value)
  132.       if (value.key === 'welcome') {
  133.         isShowWelcome.value = true;
  134.       } else {
  135.         categoryId2 = value.key;
  136.         isShowWelcome.value = false;
  137.         handleQueryEbook();
  138.       }
  139.       // isShowWelcome.value = value.key === 'welcome';
  140.     };
  142.     onMounted(() => {
  143.       handleQueryCategory();
  144.     });
  146.     return {
  147.       ebooks,
  148.       pagination: {
  149.         onChange: (page: any) => {
  150.           console.log(page);
  151.         },
  152.         pageSize: 3,
  153.       },
  155.       handleClick,
  156.       level1,
  158.       isShowWelcome,
  160.       openKeys
  161.     }
  162.   }
  163. });
  164. </script>
  166. <style scoped>
  167.   .ant-avatar {
  168.     width: 50px;
  169.     height: 50px;
  170.     line-height: 50px;
  171.     border-radius: 8%;
  172.     margin: 5px 0;
  173.   }
  174. </style>

点击分类菜单显示电子书

后端我们就做两个事情，由于前端需要查询电子书的时候，需要添加上分类，所以查询的时候要带上分类参数categoryId2，于是我们就需要在EbookQueryReq.java当中去添加categoryId2。

  1. package com.taopoppy.wiki.req;
  3. public class EbookQueryReq extends PageReq{
  4.     private Long id;
  6.     private String name;
  8.     private Long categoryId2; // 添加该参数
  10.     public Long getId() {
  11.         return id;
  12.     }
  14.     public void setId(Long id) {
  15.         this.id = id;
  16.     }
  18.     public String getName() {
  19.         return name;
  20.     }
  22.     public void setName(String name) {
  23.         this.name = name;
  24.     }
  26.     public Long getCategoryId2() {
  27.         return categoryId2;
  28.     }
  30.     public void setCategoryId2(Long categoryId2) {
  31.         this.categoryId2 = categoryId2;
  32.     }
  34.     @Override
  35.     public String toString() {
  36.         return "EbookQueryReq{" +
  37.                 "id=" + id +
  38.                 ", name='" + name + '\'' +
  39.                 ", categoryId2=" + categoryId2 +
  40.                 '}';
  41.     }
  42. }
  1.     /**
  2.      * 查询电子书
  3.      * @param req 电子书查询参数
  4.      * @return 电子书分页列表
  5.      */
  6.     public PageResp<EbookQueryResp> list(EbookQueryReq req) {
  7.         EbookExample ebookExample = new EbookExample();
  8.         EbookExample.Criteria criteria = ebookExample.createCriteria();
  9.         if(!ObjectUtils.isEmpty(req.getName())) {
  10.             criteria.andNameLike("%" + req.getName() + "%");
  11.         }
  12.         // 添加category的动态sql的写法
  13.         if(!ObjectUtils.isEmpty(req.getCategoryId2())) {
  14.             criteria.andCategory2IdEqualTo(req.getCategoryId2());
  15.         }
  16.         PageHelper.startPage(req.getPage(), req.getSize());
  17.         List<Ebook> ebooksList = ebookMapper.selectByExample(ebookExample);
  19.         PageInfo<Ebook> pageInfo = new PageInfo<>(ebooksList);
  20.         LOG.info("总行数：{}",pageInfo.getTotal()); 
  21.         LOG.info("总页数：{}",pageInfo.getPages()); 
  23.         List<EbookQueryResp> respList = CopyUtil.copyList(ebooksList, EbookQueryResp.class);
  24.         PageResp<EbookQueryResp> pageResp = new PageResp();
  25.         pageResp.setTotal(pageInfo.getTotal());
  26.         pageResp.setList(respList);
  27.         return pageResp;
  28.     }

前端的代码在home.vue，完整的代码我们已经在首页显示分类菜单当中完整的展示。