Spring Boot + Vue3前后端分离实战wiki知识库系统＜九＞--文档管理功能开发一

webor2006

已于 2023-07-07 10:30:13 修改

阅读量554

点赞数 2

分类专栏： java后端开发文章标签： spring boot java 数据库

于 2023-06-28 02:00:23 首次发布

本文链接：https://blog.csdn.net/webor2006/article/details/131428263

版权

java后端开发专栏收录该内容

13 篇文章 22 订阅

订阅专栏

接着Spring Boot + Vue3前后端分离实战wiki知识库系统＜八＞--分类管理功能开发二继续往下，这次咱们则来到文档管理功能的开发学习了，对于知识库的核心功能当然得是能发表文章及查看对吧，所以接下来一步一个脚印来完成它，先来提前感受一下这个功能的样式：

功能还是挺复杂的，反正对于小白的我肯定是搞不定的，费话不多说，直接开撸。

文档表设计与代码生成：

文档表设计：

这里就直接给出sql了：

-- 文档表
drop table if exists `doc`;
create table `doc` (
                       `id` bigint not null comment 'id',
                       `ebook_id` bigint not null default 0 comment '电子书id',
                       `parent` bigint not null default 0 comment '父id',
                       `name` varchar(50) not null comment '名称',
                       `sort` int comment '顺序',
                       `view_count` int default 0 comment '阅读数',
                       `vote_count` int default 0 comment '点赞数',
                       primary key (`id`)
) engine=innodb default charset=utf8mb4 comment='文档';

insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (1, 1, 0, '文档1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (2, 1, 1, '文档1.1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (3, 1, 0, '文档2', 2, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (4, 1, 3, '文档2.1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (5, 1, 3, '文档2.2', 2, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (6, 1, 5, '文档2.2.1', 1, 0, 0);

这里表字段有一个关联电子书的字段：

因为文档是属于某个电子书的，所以这里在插入数据时，需要保证这个id是存在于电子书表记录当中的：

其它的字段都比较好理解，就不过多说明，下面将sql执行一下，然后确保表成功创建了：

代码生成：

接下来咱们就可以使用mybatis generator【如果对它木有印象的可以参考Spring Boot + Vue3 前后端分离实战 wiki 知识库系统<二>---后端架构完善与接口开发】来生成mybatis相关的代码了，如下：

此时相关的代码就已经生成了：

相当的happy。

完成文档表基本增删改查功能：

接下来则通过CV大法快速实现文档表的增删改查功能，关于这块的技巧在之前Spring Boot + Vue3 前后端分离实战 wiki 知识库系统<七>--分类管理功能开发分类管理时已经使用过了，有些忘了，下面则再来复习一下这整个过程。

1、DocController：

这里直接拷贝分类的代码：

接下来打开新拷贝的类，进行如下替换：

然后再换成小写替换一次：

此时替换完之后有一堆报错，不用管，因为还没整体替换完。

2、 DocService:

然后打开类，跟Controller一样的替换规则，这里就不再重复啰嗦了，替换完之后也是一堆报错。

3、req实体：

对于分类请求实体有两个：

这里就不能无脑的CV了，先来看一下查询的：

这里倒可以直接copy，里面没有涉及到字段，如下：

而保存的实体这里由于会涉及到表字段：

很显然不能直接拷贝分类的了，这里还是直接基于文档的domain进行拷贝比较好：

然后在里面再标注非空的字段，如下：

4、resp实体：

这个也是直接从文档的domain实体进行拷贝：

这样整个后端的代码就拷贝完了，报错也没有了。

5、admin-doc.vue：

接下来回到前端进行同样的CV大法，也拷贝自分类页面：

然后进行大小写的替换：

这里就不过多说明了，另外对于前端还需要替换一个中文：

接下来通常需要修改一下表单的内容了，毕竟业务表的字段是不一样的，凑巧这里的文档和分类目前的字段是一样的，暂时先不用改，之后等做到时再细化。

6、添加路由：

接下来则配置一下文档页面的路由：

7、电子书管理增加跳转入口：

由于文档的管理是需要从某个电子书中点击进来的，毕竟文档是隶属于电子书的，所以咱们回到电子书管理页面，在这块增加一个跳转文档管理的入口：

8、运行：

通过这么一顿CV大法之后，咱们运行看一下初步的效果：

增删改查都有了，效率还是相当高的，不过从运行效果中可以发现编辑时，目前只能选择一级分类作为父文档，照理应该是可以选择任务级文档作为当前的父文档的，关于这块的细节之后再来完善。

使用树形选择组件选择父节点：

概述：

在上面也说了现在在编辑文档时，只能选择一级文档做为父节点：

接下来咱们得将它改成树形的选择框。

实现：

1、找选择框组件：

这里可以用这个组件：

其中我们使用最基础的效果就可以了：

点开代码查看一下它的基本用法，貌似发现这个树形菜单的生成不是基于json数据：

很明显我们得根据文档树形的json数据来进行菜单的生成对吧，所以这种方式很显然不适合咱们使用，那得找使用json数据生成的，刚好在下面就有一个：

简单了解一下它是如何通过json数据来生成的：

而treeData则是定义的一个树形结构的json：

interface TreeDataItem {
  value: string;
  key: string;
  title?: string;
  slots?: Record<string, string>;
  children?: TreeDataItem[];
}

const treeData: TreeDataItem[] = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        value: '0-0-1',
        key: '0-0-1',
        slots: {
          title: 'title',
        },
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];

而这个树形结构其实刚好跟咱们定义的文档树形结构是一样的，好，接下来咱们来将它集成到工程中。

2、集成TreeSelect树选择组件：

模板代码从ant design进行拷贝，如下：

运行看一下效果：

树形结构已经有了，但是现在里面的数据没正常显示出来，其实原因是因为这个组件默认需要的json中的属性是这样的：

而咱们的树形json的key是id和name：

那这个组件有有木有转换的属性呢？答案是有的：

咱们来使用一下：

运行发现不好使。。这里其实是故意挖个坑来让自己对vue的语法理解得更加深刻一些，错误的原因是replaceFields前面没有加一个“:”导致，咱们录个动图来感受一下不加":"和加了“:”的区别：

有木有发现加了冒号之后，它设置的json的颜色都不一样了，也就是如果属性加了冒号，它里面的值是动态生成的，如果不加冒号则会将它里面的值当一个string，是一个死的值，基础巩固一下，下面再运行：

3、完成文档编辑功能：

接下来我们来完成文档的编辑功能，目前编辑功能其实是有很多问题的，下面一一来进行解决。

问题一：父节点可选择自己及子节点

这个问题其实在之前分类管理时就遇到过，下面来演示一下：

看到木有，也就是将“文档111”的父节点设置成了它的孩子“文档1.1”，这样就造成了这俩文档相互引用，在查询树形菜单时则会将这样的数据给过滤掉，造成设置之后该数据不见了，也就是该数据从树形结构中断掉了，很显然不合理，而解决这种问题思路就是不让它可以选择自己及孩子做为它的父节点，效果如下：

下面来解决一下，对于某个项不让用户点，其实只需要在树形结构中将对应的节点设置一下disabled=true既可，如官方的示例所示：

所以下面咱们来处理一下树形选择框绑定的数据：

这里需要用到递归了，因为是无限级的树形菜单，有可能有很多层，处理逻辑这里直接贴出来了：

接下来就是集中来处理setDisable，逻辑如下：

// 将某节点及其子孙节点全部置为disabled
    const setDisable = (treeSelectData: any, id: any) => {
      // 遍历数组，即遍历某一层节点
      for (let i = 0; i < treeSelectData.length; i++) {
        const node = treeSelectData[i];
        if (node.id === id) {
          // 如果当前节点就是目标节点
          console.log("disabled", node);
          // 将目标节点设置为disabled
          node.disabled = true;

          // 遍历所有子节点，将所有子节点全部都加上disabled
          const children = node.children;
          if (Tool.isNotEmpty(children)) {
            for (let j = 0; j < children.length; j++) {
              setDisable(children, children[j].id)
            }
          }
        } else {
          // 如果当前节点不是目标节点，则到其子节点再找找看。
          const children = node.children;
          if (Tool.isNotEmpty(children)) {
            setDisable(children, id);
          }
        }
      }
    }

下面来运行看一下效果，由于之前我们为了演示问题，目前列表中只展示文档2的内容了，这里到数据库中将文档1.1的父id给手动改为0让其列表中可以多显示点数据：