Spring Boot + Vue3前后端分离实战wiki知识库系统<十一>--文档管理功能开发三

文档内容的显示：

在上一次https://www.cnblogs.com/webor2006/p/17510360.html文档管理模块还差文档的显示木有完成，所以接下来先将这块模块给收尾了。

增加单独获取内容的接口：

概述：

在前端页面文档查询时，只查询了文档的基本信息，其中文档的富文本内容是木有带出来的：

当然也不可能在列表中把富文本的内容给查出来，因为这是大文本，在列表中带出它来会占用我们的带宽流量，且影响数据库性能，在查看文档时才会去加载文档的富文本的内容，所以此时我们需要增加一个查文档内容的接口了。

实现：

这个接口的定义比较简单，贴出来如下：

前端获得html字符串后显示在富文本框中：

接下来咱们就可以调用查询文档内容的接口将保存的文档内容显示在富文本框中了。

1、发起接口请求：

接下来咱们则在点击编辑时调用它：

2、运行：

接下来咱们运行看一下效果：

内容成功展示。

3、bug修复：

接下来演示一个bug：

也就是之有回显的富文本的内容，在点击新增时没有清空，所以咱们处理一下：

再运行就正常了。

文档页面功能开发：

概述：

文档的编辑功能已经开发好了之后，接下来则需要让读者可以进行文档的阅读了，所以接下来会开发如下两个功能，一个是在编辑时增加一个文档的预览功能：

点击它之后，则会弹出预览界面：

另外一个功能就是在首页中点击某一门电子书可以进到对应的文档查看界面，具体交互如下：

增加文档页面：

首先咱们来实现点击首页的电子书能跳到一个文档页面，也就是：

1、新建文档页面：

里面的内容先弄个文本占个位：

<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
    </a-layout-content>
    <div class="doc">
      <h1>欢迎来到文档页面</h1>
    </div>
  </a-layout>
</template>

2、配置页面路由：

此时则需要回到这块进行路由的配置：

3、修改电子书的跳转：

接下来在点击电子书时跳转到该文档页面：

将它改为：

4、运行：

此时运行看一下效果：

呃，欢迎的提示语位置不太对：

布局写错了，改一下：

左边显示文档树：

概述：

接下来则来构建这个文档页面的细节了，先来将所有的文档树显示在左侧，效果如下：

下面则来具体实现一下。

实现：

1、将内容划分为左右区域：

内容左右划分这块在之前已经用过了，使用它：

所以修改如下：

此时预览效果：

2、左侧显示文档树：

接下来将文档树显示在左侧的菜单中，这个其实效果跟文档管理差不多：

只不过这里就木有对于文档树的编辑操作了，所以，逻辑可以参考文档管理的，先来将文档树形菜单的查询逻辑拷过来，这块就不过多说明了：

这里采用ant design vue的一个新组件：

然后其中level1则是文档的树形结构的数据，整个代码如下：

<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <a-row>
        <a-col :span="6">
          <a-tree
              v-if="level1.length > 0"
              :tree-data="level1"
              :replaceFields="{title: 'name', key: 'id', value: 'id'}"
              :defaultExpandAll="true"
          >
          </a-tree>
        </a-col>
        <a-col :span="18">
          <div>右侧内容</div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from 'axios';
import {message} from 'ant-design-vue';
import {Tool} from "@/util/tool";

export default defineComponent({
  name: 'Doc',
  setup() {
    const docs = ref();

    /**
     * 一级文档树，children属性就是二级文档
     * [{
     *   id: "",
     *   name: "",
     *   children: [{
     *     id: "",
     *     name: "",
     *   }]
     * }]
     */
    const level1 = ref(); // 一级文档树，children属性就是二级文档
    level1.value = [];

    /**
     * 数据查询
     **/
    const handleQuery = () => {
      axios.get("/doc/all/").then((response) => {
        const data = response.data;
        if (data.success) {
          docs.value = data.content;

          level1.value = [];
          level1.value = Tool.array2Tree(docs.value, 0);
        } else {
          message.error(data.message);
        }
      });
    };

    onMounted(() => {
      handleQuery();
    });

    return {
      level1,
    }
  }
});
</script>

运行看一下：

修复文档数据不是按某个电子书查询的bug：

概述：

对于这个文档树形菜单的功能显示其实是有问题的，先拿之前文档管理的页面来说：

有木有发现每次查看某个电子书下的文档管理，其左侧文档树显示得都是一模一样的，很明显是不对的，其原因也很简单，是因为目前咱们对于文档树的查询就是每次查所有：

应该查询只能查出某个电子书下的文档才行，所以对于文档查看页面也存在同样的问题，所以接下来咱们先来修复这些的一个Bug。

修复：

1、后台接口修改：

2、前端页面修改：

此时在前端页面上在发起此接口请求时就需要加上一个电子书id了，如下：

3、运行：

右边显示第一个节点的内容：

接下来咱们接着文档的内容显示继续编写，现在左侧的文档树已经显示出来了，接下来则需要在点击某个文档时，在右侧能够显示出该文档的内容。

1、右侧定义显示div：

当点击左侧的文档树时，则需要将该文档的html显示在右侧的区域，这里其实就是一个纯html的显示，所以定义一个div：

其中这个html是一个响应式的变量：

2、点击文档菜单查询html数据：

首先处理文档菜单的点击事件：

此时咱们运行看一下效果：

3、bug修复：

接下来咱们来演示一个Bug，为了看到这个Bug，咱们先来编辑一个带引用标题的文档：

此时保存一下，然后再到首页查看一下此电子书下的这篇新编辑的文档，你会发现，带引号的样式木有了：

这是为啥呢？其实是由于我们所引用的wangEditor没有定义它默认的样式，关于这块可以上官网了解到：https://www.wangeditor.com/v4/pages/02-%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86/03-%E8%8E%B7%E5%8F%96html.html

言外之意就是说我们获取的html是不带样式的，要想有样式则可以使用官方提供的默认样式，咱们就按着官网的要求引入这么一个样式：

<style>
  /* 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 */
  /* table 样式 */
  .wangeditor table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }

  .wangeditor table td,
  .wangeditor table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }

  .wangeditor table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */
  .wangeditor blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  .wangeditor code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }

  .wangeditor pre code {
    display: block;
  }

  /* ul ol 样式 */
  .wangeditor ul, ol {
    margin: 10px 0 10px 20px;
  }
</style>