• 重点学习无限极树的管理功能设计&富文本编辑框的使用
  • 文档表设计与代码生成
  • 按照分类管理的代码，复制出一套文档树管理
  • 关于无限极树的增删改查功能开发
  • 文档内容保存于显示：富文本框的使用
  • 首页点击某个电子书时，跳转到文档页面，显示文档树
  • 点击某个文档时，加载文档内容

✿文档表设计与代码生成

1. 文档表设计

给文档表起名doc，然后sql如下：

  1. drop table if exists `doc`;
  2. create table `doc` (
  3.     `id` bigint not null comment 'id',
  4.     `ebook_id` bigint not null default 0 comment '电子书id',
  5.     `parent` bigint not null default 0 comment '父id',
  6.     `name` varchar(50) not null comment '名称',
  7.     `sort` int comment '排序',
  8.     `view_count` int default 0 comment '阅读数',
  9.     `vote_count` int default 0 comment '点赞数',
  10.     primary key (`id`)
  11. ) engine=innodb default charset=utf8mb4 comment='文档';
  13. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (1,1,0,'文档1',1,0,0);
  14. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (2,1,1,'文档1.1',1,0,0);
  15. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (3,1,0,'文档2',2,0,0);
  16. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (4,1,3,'文档2.1',1,0,0);
  17. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (5,1,3,'文档2.2',2,0,0);
  18. insert into `doc` (id, ebook_id, parent,name, sort, view_count, vote_count) values (6,1,5,'文档2.2.1',1,0,0);

2. 生成持久层代码

生成持久层代码，依旧去generator-config.xml，将最后一行的table改成doc，然后去执行mybatis-generator这个命令，去生成四个文件，依次是Doc.java，DocExample.java，DocMapper.java，DocMapper.xml。

  1. <table tableName="doc"/>

✿文档表增删改查

1. 后端改造

按照分类管理，复制出一套文档管理的代码，每个文件复制过来之后使用ctrl + R将关键字全部改掉即可，代码如下：

  1. package com.taopoppy.wiki.controller;
  3. import com.taopoppy.wiki.req.DocQueryReq;
  4. import com.taopoppy.wiki.req.DocSaveReq;
  5. import com.taopoppy.wiki.resp.DocQueryResp;
  6. import com.taopoppy.wiki.resp.CommonResp;
  7. import com.taopoppy.wiki.resp.PageResp;
  8. import com.taopoppy.wiki.service.DocService;
  9. import org.springframework.web.bind.annotation.*;
  11. import javax.annotation.Resource;
  12. import javax.validation.Valid;
  13. import java.util.List;
  15. @RestController
  16. @RequestMapping("/doc")
  17. public class DocController {
  18.     @Resource
  19.     private DocService docService;
  22.     @GetMapping("/all")
  23.     public CommonResp all(@Valid DocQueryReq req) {
  24.         // controller层尽量不要出现Doc这个实体类
  25.         // 因为实体类是和数据库一一对应的
  27.         CommonResp<List<DocQueryResp>> resp = new CommonResp<>();
  28.         List<DocQueryResp> list =  docService.all(req);
  29.         resp.setContent(list);
  30.         return resp;
  31.     }
  33.     @GetMapping("/list")
  34.     public CommonResp list(@Valid DocQueryReq req) {
  35.         // controller层尽量不要出现Doc这个实体类
  36.         // 因为实体类是和数据库一一对应的
  38.         CommonResp<PageResp<DocQueryResp>> resp = new CommonResp<>();
  39.         PageResp<DocQueryResp> list =  docService.list(req);
  40.         resp.setContent(list);
  41.         return resp;
  42.     }
  44.     @PostMapping("/save")
  45.     public CommonResp save(@Valid @RequestBody DocSaveReq req) {
  46.         CommonResp resp = new CommonResp<>();
  47.         docService.save(req);
  48.         return resp;
  49.     }
  51.     @DeleteMapping("/delete/{id}")
  52.     public CommonResp delete(@PathVariable long id) {
  53.         CommonResp resp = new CommonResp<>();
  54.         docService.delete(id);
  55.         return resp;
  56.     }
  57. }
  1. package com.taopoppy.wiki.service;
  3. import com.github.pagehelper.PageHelper;
  4. import com.github.pagehelper.PageInfo;
  5. import com.taopoppy.wiki.domain.Doc;
  6. import com.taopoppy.wiki.domain.DocExample;
  7. import com.taopoppy.wiki.mapper.DocMapper;
  8. import com.taopoppy.wiki.req.DocQueryReq;
  9. import com.taopoppy.wiki.req.DocSaveReq;
  10. import com.taopoppy.wiki.resp.DocQueryResp;
  11. import com.taopoppy.wiki.resp.PageResp;
  12. import com.taopoppy.wiki.util.CopyUtil;
  13. import com.taopoppy.wiki.util.SnowFlake;
  14. import org.slf4j.Logger;
  15. import org.slf4j.LoggerFactory;
  16. import org.springframework.stereotype.Service;
  17. import org.springframework.util.ObjectUtils;
  19. import javax.annotation.Resource;
  20. import java.util.List;
  22. @Service
  23. public class DocService {
  24.     // 这个就是用来打印的，在WikiApplication当中也用到了
  25.     private static final Logger LOG = LoggerFactory.getLogger(DocService.class);
  27.     @Resource
  28.     private DocMapper docMapper;
  30.     @Resource
  31.     private SnowFlake snowFlake;
  33.     /**
  34.      * 查询分类
  35.      * @param req 分类查询参数
  36.      * @return 分类分页列表
  37.      */
  38.     public List<DocQueryResp> all(DocQueryReq req) {
  39.         DocExample docExample = new DocExample();
  40.         docExample.setOrderByClause("sort asc"); // 按照sort排序
  41.         List<Doc> docsList = docMapper.selectByExample(docExample);
  43.         List<DocQueryResp> respList = CopyUtil.copyList(docsList, DocQueryResp.class);
  44.         return respList;
  45.     }
  47.     /**
  48.      * 查询分类
  49.      * @param req 分类查询参数
  50.      * @return 分类分页列表
  51.      */
  52.     public PageResp<DocQueryResp> list(DocQueryReq req) {
  53.         DocExample docExample = new DocExample();
  54.         docExample.setOrderByClause("sort asc"); // 按照sort排序
  56.         // createCriteria相当于where条件
  57.         DocExample.Criteria criteria = docExample.createCriteria();
  59.         // 根据docExample条件查询
  60.         PageHelper.startPage(req.getPage(), req.getSize());
  61.         List<Doc> docsList = docMapper.selectByExample(docExample);
  63.         PageInfo<Doc> pageInfo = new PageInfo<>(docsList);
  64.         LOG.info("总行数：{}",pageInfo.getTotal()); // 总行数
  65.         LOG.info("总页数：{}",pageInfo.getPages()); // 总页数，一般不需要,前端会根据总数自动计算总页数
  67.         List<DocQueryResp> respList = CopyUtil.copyList(docsList, DocQueryResp.class);
  68.         PageResp<DocQueryResp> pageResp = new PageResp();
  69.         pageResp.setTotal(pageInfo.getTotal());
  70.         pageResp.setList(respList);
  71.         return pageResp;
  72.     }
  75.     /**
  76.      * 分类保存接口(保存包括编辑保存->更新， 也包括新增保存->新增， 根据req是否有id来判断)
  77.      * @param req 分类保存参数
  78.      */
  79.     public void save(DocSaveReq req) {
  80.         Doc doc = CopyUtil.copy(req, Doc.class);
  81.         if(ObjectUtils.isEmpty(req.getId())) {
  82.             // 新增
  83.             doc.setId(snowFlake.nextId());
  84.             docMapper.insert(doc);
  85.         } else {
  86.             // 更新
  87.             // 因为updateByPrimaryKey传递的Doc类型的参数，所以需要将DocSaveReq 转化成Doc
  88.             docMapper.updateByPrimaryKey(doc);
  89.         }
  90.     }
  92.     /**
  93.      * 分类删除接口（按照id进行删除）
  94.      * @param id
  95.      */
  96.     public void delete(long id) {
  97.         docMapper.deleteByPrimaryKey(id);
  98.     }
  99. }
  1. package com.taopoppy.wiki.req;
  3. public class DocQueryReq extends PageReq{
  4.     @Override
  5.     public String toString() {
  6.         return "DocQueryReq{} " + super.toString();
  7.     }
  8. }
  1. package com.taopoppy.wiki.req;
  3. import javax.validation.constraints.NotNull;
  5. public class DocSaveReq {
  6.     private Long id;
  8.     @NotNull(message = "【电子书】不能为空")
  9.     private Long ebookId;
  11.     @NotNull(message = "【父文档】不能为空")
  12.     private Long parent;
  14.     @NotNull(message = "【名称】不能为空")
  15.     private String name;
  17.     @NotNull(message = "【排序】不能为空")
  18.     private Integer sort;
  20.     private Integer viewCount;
  22.     private Integer voteCount;
  24.     public Long getId() {
  25.         return id;
  26.     }
  28.     public void setId(Long id) {
  29.         this.id = id;
  30.     }
  32.     public Long getEbookId() {
  33.         return ebookId;
  34.     }
  36.     public void setEbookId(Long ebookId) {
  37.         this.ebookId = ebookId;
  38.     }
  40.     public Long getParent() {
  41.         return parent;
  42.     }
  44.     public void setParent(Long parent) {
  45.         this.parent = parent;
  46.     }
  48.     public String getName() {
  49.         return name;
  50.     }
  52.     public void setName(String name) {
  53.         this.name = name;
  54.     }
  56.     public Integer getSort() {
  57.         return sort;
  58.     }
  60.     public void setSort(Integer sort) {
  61.         this.sort = sort;
  62.     }
  64.     public Integer getViewCount() {
  65.         return viewCount;
  66.     }
  68.     public void setViewCount(Integer viewCount) {
  69.         this.viewCount = viewCount;
  70.     }
  72.     public Integer getVoteCount() {
  73.         return voteCount;
  74.     }
  76.     public void setVoteCount(Integer voteCount) {
  77.         this.voteCount = voteCount;
  78.     }
  80.     @Override
  81.     public String toString() {
  82.         StringBuilder sb = new StringBuilder();
  83.         sb.append(getClass().getSimpleName());
  84.         sb.append(" [");
  85.         sb.append("Hash = ").append(hashCode());
  86.         sb.append(", id=").append(id);
  87.         sb.append(", ebookId=").append(ebookId);
  88.         sb.append(", parent=").append(parent);
  89.         sb.append(", name=").append(name);
  90.         sb.append(", sort=").append(sort);
  91.         sb.append(", viewCount=").append(viewCount);
  92.         sb.append(", voteCount=").append(voteCount);
  93.         sb.append("]");
  94.         return sb.toString();
  95.     }
  96. }
  1. package com.taopoppy.wiki.resp;
  3. public class DocQueryResp {
  4.     private Long id;
  6.     private Long ebookId;
  8.     private Long parent;
  10.     private String name;
  12.     private Integer sort;
  14.     private Integer viewCount;
  16.     private Integer voteCount;
  18.     public Long getId() {
  19.         return id;
  20.     }
  22.     public void setId(Long id) {
  23.         this.id = id;
  24.     }
  26.     public Long getEbookId() {
  27.         return ebookId;
  28.     }
  30.     public void setEbookId(Long ebookId) {
  31.         this.ebookId = ebookId;
  32.     }
  34.     public Long getParent() {
  35.         return parent;
  36.     }
  38.     public void setParent(Long parent) {
  39.         this.parent = parent;
  40.     }
  42.     public String getName() {
  43.         return name;
  44.     }
  46.     public void setName(String name) {
  47.         this.name = name;
  48.     }
  50.     public Integer getSort() {
  51.         return sort;
  52.     }
  54.     public void setSort(Integer sort) {
  55.         this.sort = sort;
  56.     }
  58.     public Integer getViewCount() {
  59.         return viewCount;
  60.     }
  62.     public void setViewCount(Integer viewCount) {
  63.         this.viewCount = viewCount;
  64.     }
  66.     public Integer getVoteCount() {
  67.         return voteCount;
  68.     }
  70.     public void setVoteCount(Integer voteCount) {
  71.         this.voteCount = voteCount;
  72.     }
  74.     @Override
  75.     public String toString() {
  76.         StringBuilder sb = new StringBuilder();
  77.         sb.append(getClass().getSimpleName());
  78.         sb.append(" [");
  79.         sb.append("Hash = ").append(hashCode());
  80.         sb.append(", id=").append(id);
  81.         sb.append(", ebookId=").append(ebookId);
  82.         sb.append(", parent=").append(parent);
  83.         sb.append(", name=").append(name);
  84.         sb.append(", sort=").append(sort);
  85.         sb.append(", viewCount=").append(viewCount);
  86.         sb.append(", voteCount=").append(voteCount);
  87.         sb.append("]");
  88.         return sb.toString();
  89.     }
  90. }

2. 前端代码改造

  1. <template>
  2.   <a-layout>
  3.     <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
  4.       <h3 v-if="level1.length === 0">对不起，找不到相关文档！</h3>
  5.       <a-row>
  6.         <a-col :span="6">
  7.           <a-tree
  8.             v-if="level1.length > 0"
  9.             :tree-data="level1"
  10.             @select="onSelect"
  11.             :replaceFields="{title: 'name', key: 'id', value: 'id'}"
  12.             :defaultExpandAll="true"
  13.             :defaultSelectedKeys="defaultSelectedKeys"
  14.           >
  15.           </a-tree>
  16.         </a-col>
  17.         <a-col :span="18">
  18.           <div>
  19.             <h2>{{doc.name}}</h2>
  20.             <div>
  21.               <span>阅读数：{{doc.viewCount}}</span> &nbsp; &nbsp;
  22.               <span>点赞数：{{doc.voteCount}}</span>
  23.             </div>
  24.             <a-divider style="height: 2px; background-color: #9999cc"/>
  25.           </div>
  26.           <div class="wangeditor" :innerHTML="html"></div>
  27.           <div class="vote-div">
  28.             <a-button type="primary" shape="round" :size="'large'" @click="vote">
  29.               <template #icon><LikeOutlined /> &nbsp;点赞：{{doc.voteCount}} </template>
  30.             </a-button>
  31.           </div>
  32.         </a-col>
  33.       </a-row>
  34.     </a-layout-content>
  35.   </a-layout>
  36. </template>
  38. <script lang="ts">
  39.   import { defineComponent, onMounted, ref, createVNode } from 'vue';
  40.   import axios from 'axios';
  41.   import {message} from 'ant-design-vue';
  42.   import {Tool} from "@/util/tool";
  43.   import {useRoute} from "vue-router";
  45.   export default defineComponent({
  46.     name: 'Doc',
  47.     setup() {
  48.       const route = useRoute();
  49.       const docs = ref();
  50.       const html = ref();
  51.       const defaultSelectedKeys = ref();
  52.       defaultSelectedKeys.value = [];
  53.       // 当前选中的文档
  54.       const doc = ref();
  55.       doc.value = {};
  57.       /**
  58.        * 一级文档树，children属性就是二级文档
  59.        * [{
  60.        *   id: "",
  61.        *   name: "",
  62.        *   children: [{
  63.        *     id: "",
  64.        *     name: "",
  65.        *   }]
  66.        * }]
  67.        */
  68.       const level1 = ref(); // 一级文档树，children属性就是二级文档
  69.       level1.value = [];
  71.       /**
  72.        * 内容查询
  73.        **/
  74.       const handleQueryContent = (id: number) => {
  75.         axios.get("/doc/find-content/" + id).then((response) => {
  76.           const data = response.data;
  77.           if (data.success) {
  78.             html.value = data.content;
  79.           } else {
  80.             message.error(data.message);
  81.           }
  82.         });
  83.       };
  85.       /**
  86.        * 数据查询
  87.        **/
  88.       const handleQuery = () => {
  89.         axios.get("/doc/all/" + route.query.ebookId).then((response) => {
  90.           const data = response.data;
  91.           if (data.success) {
  92.             docs.value = data.content;
  94.             level1.value = [];
  95.             level1.value = Tool.array2Tree(docs.value, 0);
  97.             if (Tool.isNotEmpty(level1)) {
  98.               defaultSelectedKeys.value = [level1.value[0].id];
  99.               handleQueryContent(level1.value[0].id);
  100.               // 初始显示文档信息
  101.               doc.value = level1.value[0];
  102.             }
  103.           } else {
  104.             message.error(data.message);
  105.           }
  106.         });
  107.       };
  109.       const onSelect = (selectedKeys: any, info: any) => {
  110.         console.log('selected', selectedKeys, info);
  111.         if (Tool.isNotEmpty(selectedKeys)) {
  112.           // 选中某一节点时，加载该节点的文档信息
  113.           doc.value = info.selectedNodes[0].props;
  114.           // 加载内容
  115.           handleQueryContent(selectedKeys[0]);
  116.         }
  117.       };
  119.       // 点赞
  120.       const vote = () => {
  121.         axios.get('/doc/vote/' + doc.value.id).then((response) => {
  122.           const data = response.data;
  123.           if (data.success) {
  124.             doc.value.voteCount++;
  125.           } else {
  126.             message.error(data.message);
  127.           }
  128.         });
  129.       };
  131.       onMounted(() => {
  132.         handleQuery();
  133.       });
  135.       return {
  136.         level1,
  137.         html,
  138.         onSelect,
  139.         defaultSelectedKeys,
  140.         doc,
  141.         vote
  142.       }
  143.     }
  144.   });
  145. </script>
  147. <style>
  148.   /* wangeditor默认样式, 参照: http://www.wangeditor.com/doc/pages/02-%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86/03-%E8%8E%B7%E5%8F%96html.html */
  149.   /* table 样式 */
  150.   .wangeditor table {
  151.     border-top: 1px solid #ccc;
  152.     border-left: 1px solid #ccc;
  153.   }
  154.   .wangeditor table td,
  155.   .wangeditor table th {
  156.     border-bottom: 1px solid #ccc;
  157.     border-right: 1px solid #ccc;
  158.     padding: 3px 5px;
  159.   }
  160.   .wangeditor table th {
  161.     border-bottom: 2px solid #ccc;
  162.     text-align: center;
  163.   }
  165.   /* blockquote 样式 */
  166.   .wangeditor blockquote {
  167.     display: block;
  168.     border-left: 8px solid #d0e5f2;
  169.     padding: 5px 10px;
  170.     margin: 10px 0;
  171.     line-height: 1.4;
  172.     font-size: 100%;
  173.     background-color: #f1f1f1;
  174.   }
  176.   /* code 样式 */
  177.   .wangeditor code {
  178.     display: inline-block;
  179.     *display: inline;
  180.     *zoom: 1;
  181.     background-color: #f1f1f1;
  182.     border-radius: 3px;
  183.     padding: 3px 5px;
  184.     margin: 0 3px;
  185.   }
  186.   .wangeditor pre code {
  187.     display: block;
  188.   }
  190.   /* ul ol 样式 */
  191.   .wangeditor ul, ol {
  192.     margin: 10px 0 10px 20px;
  193.   }
  195.   /* 和antdv p冲突，覆盖掉 */
  196.   .wangeditor blockquote p {
  197.     font-family:"YouYuan";
  198.     margin: 20px 10px !important;
  199.     font-size: 16px !important;
  200.     font-weight:600;
  201.   }
  203.   /* 点赞 */
  204.   .vote-div {
  205.     padding: 15px;
  206.     text-align: center;
  207.   }
  209.   /* 图片自适应 */
  210.   .wangeditor img {
  211.     max-width: 100%;
  212.     height: auto;
  213.   }
  215.   /* 视频自适应 */
  216.   .wangeditor iframe {
  217.     width: 100%;
  218.     height: 400px;
  219.   }
  220. </style>
  1. <template>
  2.   <a-layout>
  3.     <a-layout-content
  4.       :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
  5.     >
  6.       <a-row :gutter="24">
  7.         <a-col :span="8">
  8.           <p>
  9.             <a-form layout="inline" :model="param">
  10.               <a-form-item>
  11.                 <a-button type="primary" @click="handleQuery()">
  12.                   查询
  13.                 </a-button>
  14.               </a-form-item>
  15.               <a-form-item>
  16.                 <a-button type="primary" @click="add()">
  17.                   新增
  18.                 </a-button>
  19.               </a-form-item>
  20.             </a-form>
  21.           </p>
  22.           <a-table
  23.             v-if="level1.length > 0"
  24.             :columns="columns"
  25.             :row-key="record => record.id"
  26.             :data-source="level1"
  27.             :loading="loading"
  28.             :pagination="false"
  29.             size="small"
  30.             :defaultExpandAllRows="true"
  31.           >
  32.             <template #name="{ text, record }">
  33.               {{record.sort}} {{text}}
  34.             </template>
  35.             <template v-slot:action="{ text, record }">
  36.               <a-space size="small">
  37.                 <a-button type="primary" @click="edit(record)" size="small">
  38.                   编辑
  39.                 </a-button>
  40.                 <a-popconfirm
  41.                   title="删除后不可恢复，确认删除?"
  42.                   ok-text="是"
  43.                   cancel-text="否"
  44.                   @confirm="handleDelete(record.id)"
  45.                 >
  46.                   <a-button type="danger" size="small">
  47.                     删除
  48.                   </a-button>
  49.                 </a-popconfirm>
  50.               </a-space>
  51.             </template>
  52.           </a-table>
  53.         </a-col>
  54.         <a-col :span="16">
  55.           <p>
  56.             <a-form layout="inline" :model="param">
  57.               <a-form-item>
  58.                 <a-button type="primary" @click="handleSave()">
  59.                   保存
  60.                 </a-button>
  61.               </a-form-item>
  62.             </a-form>
  63.           </p>
  64.           <a-form :model="doc" layout="vertical">
  65.             <a-form-item>
  66.               <a-input v-model:value="doc.name" placeholder="名称"/>
  67.             </a-form-item>
  68.             <a-form-item>
  69.               <a-tree-select
  70.                 v-model:value="doc.parent"
  71.                 style="width: 100%"
  72.                 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  73.                 :tree-data="treeSelectData"
  74.                 placeholder="请选择父文档"
  75.                 tree-default-expand-all
  76.                 :replaceFields="{title: 'name', key: 'id', value: 'id'}"
  77.               >
  78.               </a-tree-select>
  79.             </a-form-item>
  80.             <a-form-item>
  81.               <a-input v-model:value="doc.sort" placeholder="顺序"/>
  82.             </a-form-item>
  83.             <a-form-item>
  84.               <a-button type="primary" @click="handlePreviewContent()">
  85.                 <EyeOutlined /> 内容预览
  86.               </a-button>
  87.             </a-form-item>
  88.             <a-form-item>
  89.               <div id="content"></div>
  90.             </a-form-item>
  91.           </a-form>
  92.         </a-col>
  93.       </a-row>
  95.       <a-drawer width="900" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  96.         <div class="wangeditor" :innerHTML="previewHtml"></div>
  97.       </a-drawer>
  99.     </a-layout-content>
  100.   </a-layout>
  102.   <!--<a-modal-->
  103.   <!--  title="文档表单"-->
  104.   <!--  v-model:visible="modalVisible"-->
  105.   <!--  :confirm-loading="modalLoading"-->
  106.   <!--  @ok="handleModalOk"-->
  107.   <!--&gt;-->
  108.   <!--  -->
  109.   <!--</a-modal>-->
  110. </template>
  112. <script lang="ts">
  113.   import { defineComponent, onMounted, ref, createVNode } from 'vue';
  114.   import axios from 'axios';
  115.   import {message, Modal} from 'ant-design-vue';
  116.   import {Tool} from "@/util/tool";
  117.   import {useRoute} from "vue-router";
  118.   import ExclamationCircleOutlined from "@ant-design/icons-vue/ExclamationCircleOutlined";
  119.   import E from 'wangeditor'
  121.   export default defineComponent({
  122.     name: 'AdminDoc',
  123.     setup() {
  124.       const route = useRoute();
  125.       console.log("路由：", route);
  126.       console.log("route.path：", route.path);
  127.       console.log("route.query：", route.query);
  128.       console.log("route.param：", route.params);
  129.       console.log("route.fullPath：", route.fullPath);
  130.       console.log("route.name：", route.name);
  131.       console.log("route.meta：", route.meta);
  132.       const param = ref();
  133.       param.value = {};
  134.       const docs = ref();
  135.       const loading = ref(false);
  136.       // 因为树选择组件的属性状态，会随当前编辑的节点而变化，所以单独声明一个响应式变量
  137.       const treeSelectData = ref();
  138.       treeSelectData.value = [];
  140.       const columns = [
  141.         {
  142.           title: '名称',
  143.           dataIndex: 'name',
  144.           slots: { customRender: 'name' }
  145.         },
  146.         {
  147.           title: 'Action',
  148.           key: 'action',
  149.           slots: { customRender: 'action' }
  150.         }
  151.       ];
  153.       /**
  154.        * 一级文档树，children属性就是二级文档
  155.        * [{
  156.        *   id: "",
  157.        *   name: "",
  158.        *   children: [{
  159.        *     id: "",
  160.        *     name: "",
  161.        *   }]
  162.        * }]
  163.        */
  164.       const level1 = ref(); // 一级文档树，children属性就是二级文档
  165.       level1.value = [];
  167.       /**
  168.        * 数据查询
  169.        **/
  170.       const handleQuery = () => {
  171.         loading.value = true;
  172.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
  173.         level1.value = [];
  174.         axios.get("/doc/all/" + route.query.ebookId).then((response) => {
  175.           loading.value = false;
  176.           const data = response.data;
  177.           if (data.success) {
  178.             docs.value = data.content;
  179.             console.log("原始数组：", docs.value);
  181.             level1.value = [];
  182.             level1.value = Tool.array2Tree(docs.value, 0);
  183.             console.log("树形结构：", level1);
  185.             // 父文档下拉框初始化，相当于点击新增
  186.             treeSelectData.value = Tool.copy(level1.value) || [];
  187.             // 为选择树添加一个"无"
  188.             treeSelectData.value.unshift({id: 0, name: '无'});
  189.           } else {
  190.             message.error(data.message);
  191.           }
  192.         });
  193.       };
  195.       // -------- 表单 ---------
  196.       const doc = ref();
  197.       doc.value = {
  198.         ebookId: route.query.ebookId
  199.       };
  200.       const modalVisible = ref(false);
  201.       const modalLoading = ref(false);
  202.       const editor = new E('#content');
  203.       editor.config.zIndex = 0;
  204.       // 显示上传图片按钮，转成Base64存储，同时也支持拖拽图片
  205.       // 上传图片文档：https://doc.wangeditor.com/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
  206.       // 上传视频文档：https://doc.wangeditor.com/pages/07-%E4%B8%8A%E4%BC%A0%E8%A7%86%E9%A2%91/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
  207.       editor.config.uploadImgShowBase64 = true;
  209.       const handleSave = () => {
  210.         modalLoading.value = true;
  211.         doc.value.content = editor.txt.html();
  212.         axios.post("/doc/save", doc.value).then((response) => {
  213.           modalLoading.value = false;
  214.           const data = response.data; // data = commonResp
  215.           if (data.success) {
  216.             // modalVisible.value = false;
  217.             message.success("保存成功！");
  219.             // 重新加载列表
  220.             handleQuery();
  221.           } else {
  222.             message.error(data.message);
  223.           }
  224.         });
  225.       };
  227.       /**
  228.        * 将某节点及其子孙节点全部置为disabled
  229.        */
  230.       const setDisable = (treeSelectData: any, id: any) => {
  231.         // console.log(treeSelectData, id);
  232.         // 遍历数组，即遍历某一层节点
  233.         for (let i = 0; i < treeSelectData.length; i++) {
  234.           const node = treeSelectData[i];
  235.           if (node.id === id) {
  236.             // 如果当前节点就是目标节点
  237.             console.log("disabled", node);
  238.             // 将目标节点设置为disabled
  239.             node.disabled = true;
  241.             // 遍历所有子节点，将所有子节点全部都加上disabled
  242.             const children = node.children;
  243.             if (Tool.isNotEmpty(children)) {
  244.               for (let j = 0; j < children.length; j++) {
  245.                 setDisable(children, children[j].id)
  246.               }
  247.             }
  248.           } else {
  249.             // 如果当前节点不是目标节点，则到其子节点再找找看。
  250.             const children = node.children;
  251.             if (Tool.isNotEmpty(children)) {
  252.               setDisable(children, id);
  253.             }
  254.           }
  255.         }
  256.       };
  258.       const deleteIds: Array<string> = [];
  259.       const deleteNames: Array<string> = [];
  260.       /**
  261.        * 查找整根树枝
  262.        */
  263.       const getDeleteIds = (treeSelectData: any, id: any) => {
  264.         // console.log(treeSelectData, id);
  265.         // 遍历数组，即遍历某一层节点
  266.         for (let i = 0; i < treeSelectData.length; i++) {
  267.           const node = treeSelectData[i];
  268.           if (node.id === id) {
  269.             // 如果当前节点就是目标节点
  270.             console.log("delete", node);
  271.             // 将目标ID放入结果集ids
  272.             // node.disabled = true;
  273.             deleteIds.push(id);
  274.             deleteNames.push(node.name);
  276.             // 遍历所有子节点
  277.             const children = node.children;
  278.             if (Tool.isNotEmpty(children)) {
  279.               for (let j = 0; j < children.length; j++) {
  280.                 getDeleteIds(children, children[j].id)
  281.               }
  282.             }
  283.           } else {
  284.             // 如果当前节点不是目标节点，则到其子节点再找找看。
  285.             const children = node.children;
  286.             if (Tool.isNotEmpty(children)) {
  287.               getDeleteIds(children, id);
  288.             }
  289.           }
  290.         }
  291.       };
  293.       /**
  294.        * 内容查询
  295.        **/
  296.       const handleQueryContent = () => {
  297.         axios.get("/doc/find-content/" + doc.value.id).then((response) => {
  298.           const data = response.data;
  299.           if (data.success) {
  300.             editor.txt.html(data.content)
  301.           } else {
  302.             message.error(data.message);
  303.           }
  304.         });
  305.       };
  307.       /**
  308.        * 编辑
  309.        */
  310.       const edit = (record: any) => {
  311.         // 清空富文本框
  312.         editor.txt.html("");
  313.         modalVisible.value = true;
  314.         doc.value = Tool.copy(record);
  315.         handleQueryContent();
  317.         // 不能选择当前节点及其所有子孙节点，作为父节点，会使树断开
  318.         treeSelectData.value = Tool.copy(level1.value);
  319.         setDisable(treeSelectData.value, record.id);
  321.         // 为选择树添加一个"无"
  322.         treeSelectData.value.unshift({id: 0, name: '无'});
  323.       };
  325.       /**
  326.        * 新增
  327.        */
  328.       const add = () => {
  329.         // 清空富文本框
  330.         editor.txt.html("");
  331.         modalVisible.value = true;
  332.         doc.value = {
  333.           ebookId: route.query.ebookId
  334.         };
  336.         treeSelectData.value = Tool.copy(level1.value) || [];
  338.         // 为选择树添加一个"无"
  339.         treeSelectData.value.unshift({id: 0, name: '无'});
  340.       };
  342.       const handleDelete = (id: number) => {
  343.         // console.log(level1, level1.value, id)
  344.         // 清空数组，否则多次删除时，数组会一直增加
  345.         deleteIds.length = 0;
  346.         deleteNames.length = 0;
  347.         getDeleteIds(level1.value, id);
  348.         Modal.confirm({
  349.           title: '重要提醒',
  350.           icon: createVNode(ExclamationCircleOutlined),
  351.           content: '将删除：【' + deleteNames.join("，") + "】删除后不可恢复，确认删除？",
  352.           onOk() {
  353.             // console.log(ids)
  354.             axios.delete("/doc/delete/" + deleteIds.join(",")).then((response) => {
  355.               const data = response.data; // data = commonResp
  356.               if (data.success) {
  357.                 // 重新加载列表
  358.                 handleQuery();
  359.               } else {
  360.                 message.error(data.message);
  361.               }
  362.             });
  363.           },
  364.         });
  365.       };
  367.       // ----------------富文本预览--------------
  368.       const drawerVisible = ref(false);
  369.       const previewHtml = ref();
  370.       const handlePreviewContent = () => {
  371.         const html = editor.txt.html();
  372.         previewHtml.value = html;
  373.         drawerVisible.value = true;
  374.       };
  375.       const onDrawerClose = () => {
  376.         drawerVisible.value = false;
  377.       };
  379.       onMounted(() => {
  380.         handleQuery();
  382.         editor.create();
  383.       });
  385.       return {
  386.         param,
  387.         // docs,
  388.         level1,
  389.         columns,
  390.         loading,
  391.         handleQuery,
  393.         edit,
  394.         add,
  396.         doc,
  397.         modalVisible,
  398.         modalLoading,
  399.         handleSave,
  401.         handleDelete,
  403.         treeSelectData,
  405.         drawerVisible,
  406.         previewHtml,
  407.         handlePreviewContent,
  408.         onDrawerClose,
  409.       }
  410.     }
  411.   });
  412. </script>
  414. <style scoped>
  415.   img {
  416.     width: 50px;
  417.     height: 50px;
  418.   }
  419. </style>

树形选择组件

因为是个无限极树形，然后我们需要使用a-tree-select组件去作为父节点的选择组件，前端代码在上面有。

Vue页面参数传递

在电子书管理页面点击【文档管理】,跳到文档管理页面时，带上当前电子书id参数ebookID，在admin-ebook当中有这么一段代码就是跳转路由并且携带ID:

  1. <router-link :to="'/admin/doc?ebookId=' + record.id">
  2.   <a-button type="primary">
  3.     文档管理
  4.   </a-button>
  5. </router-link>

在admin-doc.vue当中就可以通过route拿到信息：

  1. const route = useRoute();
  2. console.log("路由：", route);
  3. console.log("route.path：", route.path);
  4. console.log("route.query：", route.query); // admin/doc?ebookid=1
  5. console.log("route.param：", route.params);// admin/doc/1
  6. console.log("route.fullPath：", route.fullPath);
  7. console.log("route.name：", route.name);
  8. console.log("route.meta：", route.meta);
  9. setup() {
  10.    axios.get("/doc/all/" + route.query.ebookId).then((response) => {});
  11. }

✿删除文档功能

删除某个文档的时候，其下所有的文档也应该删除，也就是删掉文档2的时候，下面的文档2.1、文档2.2、包括文档2.2.1都要删掉。

由于这个功能需要递归，所以我们需要将其书写在前端，这样可以减少服务器的压力，就是递归将所有的id拿出来，然后传个后端，让后端删除。

1. 后端的代码展示

前端传入后端的是类似于这样的字符串：”1,2,3,4,5”, 后端要将其转换成[1,2,3,4,5]这样的数组。

  1. @DeleteMapping("/delete/{idsStr}")
  2. public CommonResp delete(@PathVariable String idsStr) {
  3.     CommonResp resp = new CommonResp<>();
  5.     // String 转成List<Long>的集合
  6.     List<String> list =  Arrays.asList(idsStr.split(","));
  7.     docService.delete(list);
  8.     return resp;
  9. }
  2. /**
  3.  * 分类删除接口（按照id进行删除）
  4.  * @param ids
  5.  */
  6. public void delete(List<String> ids) {
  7.     DocExample docExample = new DocExample();
  8.     DocExample.Criteria criteria = docExample.createCriteria();
  10.     List<Long> result = new ArrayList<>();
  11.     ids.forEach(item -> {
  12.         result.add(Long.parseLong(item));
  13.     });
  14.     // 数组直接传入查询条件
  15.     criteria.andIdIn(result);
  17.     docMapper.deleteByExample(docExample);
  18. }

2. 前端代码展示

  1.   const deleteIds: Array<string> = [];
  2.   const deleteNames: Array<string> = [];
  3.   /**
  4.    * 查找整根树枝
  5.    */
  6.   const getDeleteIds = (treeSelectData: any, id: any) => {
  7.     // console.log(treeSelectData, id);
  8.     // 遍历数组，即遍历某一层节点
  9.     for (let i = 0; i < treeSelectData.length; i++) {
  10.       const node = treeSelectData[i];
  11.       if (node.id === id) {
  12.         // 如果当前节点就是目标节点
  13.         console.log("delete", node);
  14.         // 将目标ID放入结果集ids
  15.         // node.disabled = true;
  16.         deleteIds.push(id);
  17.         deleteNames.push(node.name);
  19.         // 遍历所有子节点
  20.         const children = node.children;
  21.         if (Tool.isNotEmpty(children)) {
  22.           for (let j = 0; j < children.length; j++) {
  23.             getDeleteIds(children, children[j].id)
  24.           }
  25.         }
  26.       } else {
  27.         // 如果当前节点不是目标节点，则到其子节点再找找看。
  28.         const children = node.children;
  29.         if (Tool.isNotEmpty(children)) {
  30.           getDeleteIds(children, id);
  31.         }
  32.       }
  33.     }
  34.   };
  36.  const handleDelete = (id: number) => {
  37.     // console.log(level1, level1.value, id)
  38.     // 清空数组，否则多次删除时，数组会一直增加
  39.     deleteIds.length = 0;
  40.     deleteNames.length = 0;
  41.     getDeleteIds(level1.value, id);
  42.     Modal.confirm({
  43.       title: '重要提醒',
  44.       icon: createVNode(ExclamationCircleOutlined),
  45.       content: '将删除：【' + deleteNames.join("，") + "】删除后不可恢复，确认删除？",
  46.       onOk() {
  47.         // console.log(ids)
  48.         axios.delete("/doc/delete/" + deleteIds.join(",")).then((response) => {
  49.           const data = response.data; // data = commonResp
  50.           if (data.success) {
  51.             // 重新加载列表
  52.             handleQuery();
  53.           } else {
  54.             message.error(data.message);
  55.           }
  56.         });
  57.       },
  58.     });
  59.   };

✿集成富文本插件wangEditor

wangEditor是Typescript开发的富文本编辑器，官网地址是https://www.wangeditor.com/，这个比较重要，因为这个是开源免费的，使用下面的方式来下载：

  1. npm i wangeditor --save

下面我们将在admin-doc.vue当中相关的wangeditor的代码都粘出来：

  1. <template>
  2.   <a-drawer width="900" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  3.     <div class="wangeditor" :innerHTML="previewHtml"></div>
  4.   </a-drawer>
  5. </template>
  7. <script lang="ts">
  8.   import E from 'wangeditor'
  10.   export default defineComponent({
  11.     name: 'AdminDoc',
  12.     setup() {
  13.       const editor = new E('#content');
  14.       editor.config.zIndex = 0;
  15.       // 显示上传图片按钮，转成Base64存储，同时也支持拖拽图片
  16.       // 上传图片文档：https://doc.wangeditor.com/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
  17.       // 上传视频文档：https://doc.wangeditor.com/pages/07-%E4%B8%8A%E4%BC%A0%E8%A7%86%E9%A2%91/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
  18.       editor.config.uploadImgShowBase64 = true;
  20.       /**
  21.       * 编辑
  22.       */
  23.       const edit = (record: any) => {
  24.         // 清空富文本框
  25.         editor.txt.html("");
  26.         modalVisible.value = true;
  27.         doc.value = Tool.copy(record);
  28.         handleQueryContent();
  30.         // 不能选择当前节点及其所有子孙节点，作为父节点，会使树断开
  31.         treeSelectData.value = Tool.copy(level1.value);
  32.         setDisable(treeSelectData.value, record.id);
  34.         // 为选择树添加一个"无"
  35.         treeSelectData.value.unshift({id: 0, name: '无'});
  36.       };
  38.       /**
  39.       * 新增
  40.       */
  41.       const add = () => {
  42.         // 清空富文本框
  43.         editor.txt.html("");
  44.         modalVisible.value = true;
  45.         doc.value = {
  46.           ebookId: route.query.ebookId
  47.         };
  49.         treeSelectData.value = Tool.copy(level1.value) || [];
  51.         // 为选择树添加一个"无"
  52.         treeSelectData.value.unshift({id: 0, name: '无'});
  53.       };
  55.       const handleDelete = (id: number) => {
  56.         // console.log(level1, level1.value, id)
  57.         // 清空数组，否则多次删除时，数组会一直增加
  58.         deleteIds.length = 0;
  59.         deleteNames.length = 0;
  60.         getDeleteIds(level1.value, id);
  61.         Modal.confirm({
  62.           title: '重要提醒',
  63.           icon: createVNode(ExclamationCircleOutlined),
  64.           content: '将删除：【' + deleteNames.join("，") + "】删除后不可恢复，确认删除？",
  65.           onOk() {
  66.             // console.log(ids)
  67.             axios.delete("/doc/delete/" + deleteIds.join(",")).then((response) => {
  68.               const data = response.data; // data = commonResp
  69.               if (data.success) {
  70.                 // 重新加载列表
  71.                 handleQuery();
  72.               } else {
  73.                 message.error(data.message);
  74.               }
  75.             });
  76.           },
  77.         });
  78.       };
  80.       // ----------------富文本预览--------------
  81.       const drawerVisible = ref(false);
  82.       const previewHtml = ref();
  83.       const handlePreviewContent = () => {
  84.         const html = editor.txt.html();
  85.         previewHtml.value = html;
  86.         drawerVisible.value = true;
  87.       };
  88.       const onDrawerClose = () => {
  89.         drawerVisible.value = false;
  90.       };
  92.       onMounted(() => {
  93.         handleQuery();
  95.         editor.create();
  96.       });
  97.     }
  98.   });
  99. </script>
  101. <style scoped>
  102.   img {
  103.     width: 50px;
  104.     height: 50px;
  105.   }
  106. </style>

✿文档内容表设计与代码生成

1. 文档表设计

这个表的设计是这样，这个content原本是doc表当中的一个字段，但是由于内容比较大，如果从数据库一下查出来很多doc内容，那么content也会随之查询出来，这样数据库压力就很大，我们设计的content的id和doc的id是一样的。这种叫做纵向分表，如果是一月份一张表，二月份一张表，这个随着业务的增加，这个就是横向的分表

  1. drop table if exists `content`;
  2. create table `content` (
  3.     `id` bigint not null comment '文档id',
  4.     `content` mediumtext not null comment '内容',
  5.     primary key (`id`)
  6. ) engine=innodb default charset=utf8mb4 comment='文档内容';

2. 生成持久层的代码

生成持久层代码，依旧去generator-config.xml，将最后一行的table改成doc，然后去执行mybatis-generator这个命令，去生成四个文件，依次是Content.java，DocExample.java，DocMapper.java，DocMapper.xml。

  1. <table tableName="content"/>

文档管理页面布局修改

之前编辑是使用了弹窗的形式，我们现在使用左右布局的形式，这种形式适合字段不多的列表，如果列表显示的字段非常多的话，就不适用了。 使用栅格区域，在ant design vue当中是Grid组件。

✿文档内容的保存与显示

文档的内容保存的是一个html的字符串，这个字符串可以以html的方式显示在富文本框当中。

1. 后端代码展示

（1）文档内容的保存

在保存我们编辑的文档的时候，文档的信息要保存在文档doc表中，而文档的文字内容要保存在content表当中，所以我们在保存的时候要分开保存这些字段：

  1. public class DocSaveReq {
  3.     @NotNull(message = "【内容】不能为空")
  4.     private String content;
  6.     public String getContent() {
  7.         return content;
  8.     }
  10.     public void setContent(String content) {
  11.         this.content = content;
  12.     }
  13. }
  1. public void save(DocSaveReq req) {
  2.     Doc doc = CopyUtil.copy(req, Doc.class);
  3.     Content content = CopyUtil.copy(req,Content.class);
  4.     if(ObjectUtils.isEmpty(req.getId())) {
  5.         // 新增文档doc
  6.         doc.setId(snowFlake.nextId());
  7.         docMapper.insert(doc);
  8.         // 同时新增内容content（保证id和doc是一致的）
  9.         content.setId(doc.getId());
  10.         contentMapper.insert(content);
  12.     } else {
  13.         // 更新
  14.         docMapper.updateByPrimaryKey(doc);
  15.         // BLOB方法包含大字段的操作
  16.         int count = contentMapper.updateByPrimaryKeyWithBLOBs(content);
  17.         if(count == 0) {
  18.             // 如果content当中没有该id的记录，就要插入
  19.             contentMapper.insert(content);
  20.         }
  21.     }
  22. }
  • 特别要主要生成器当中有updateByPrimaryKeyWithBLOBs方法，BLOBs相关的方法都是包含修改大字段的方法，富文本生成的html内容就是大的字段，所以需要使用这个方法。

    （4）文档内容的显示

    文档内容的显示需要增加单独获取内容的接口，前端得到html字符串后，放入富文本框当中 ```java

/**

  • 根据id去content表当中查找内容
  • @param id
  • @return */ public String findContent(Long id) { Content content = contentMapper.selectByPrimaryKey(id); return content.getContent(); } java

@GetMapping(“/find-content/{id}”) public CommonResp findContent(@PathVariable Long id) { CommonResp resp = new CommonResp<>(); String content = docService.findContent(id); resp.setContent(content); return resp; }

  1. <a name="VoNYJ"></a>
  2. ### 2. 前端代码的显示
  3. 前端代码我们前面已经给过完整展示。
  5. <a name="dli4E"></a>
  6. ## **✿**文档页面功能开发
  7. 关于文档页面开发我们还优化了很多东西，我们来看看
  8. <a name="lQ2aT"></a>
  9. ### 1. 后端代码展示
  10. 我们在查文档的时候，有个all接口没有写动态参数，我们不应该查所有的文档，我们只能查一个电子书下面的所有文档，所以我们需要修改一下all的接口：
  11. ```java
  12. @GetMapping("/all/{ebookId}")
  13. public CommonResp all(@PathVariable Long ebookId) {
  14.     CommonResp<List<DocQueryResp>> resp = new CommonResp<>();
  15.     List<DocQueryResp> list =  docService.all(ebookId);
  16.     resp.setContent(list);
  17.     return resp;
  18. }
  1. public List<DocQueryResp> all(Long ebookId) {
  2.     DocExample docExample = new DocExample();
  4.     // 添加一个动态查询
  5.     DocExample.Criteria criteria = docExample.createCriteria();
  6.     criteria.andEbookIdEqualTo(ebookId);
  8.     docExample.setOrderByClause("sort asc"); // 按照sort排序
  9.     List<Doc> docsList = docMapper.selectByExample(docExample);
  11.     List<DocQueryResp> respList = CopyUtil.copyList(docsList, DocQueryResp.class);
  12.     return respList;
  13. }

另外我们前面书写的根据id查询content内容的时候，没有做非空判断：

  1. public String findContent(Long id) {
  2.     Content content = contentMapper.selectByPrimaryKey(id);
  3.     if(ObjectUtils.isEmpty(content)) {
  4.         return "";
  5.     } else {
  6.         return content.getContent();
  7.     }
  9. }

2. 前端代码展示

前端代码前面有完整的展示。