【九月打卡】第1天 文档页面功能开发

课程名称：Spring Boot+Vue3前后端分离，实战wiki知识库系统

章节名称：8-12 文档页面功能开发-1

讲师姓名：甲蛙

课程内容：

首先增加电子书界面，在views文件夹里新建一个文档界面doc.vue，暂时内容先显示一行字

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

然后在main.ts中加入doc的路由

{
  path: '/doc',
  name: 'Doc',
  component: Doc
},

在首页home.vue里将原左侧分类树的分类改为根据点击跳转到对应doc界面

原代码
<a :href="item.href">{{ item.name }}</a>
现代码
<router-link :to="'/doc?ebookId=' + item.id">
  {{ item.name }}
</router-link>

然后加上左侧文档树，需要将文档界面doc.vue的一行文字改了，还有加上像之前的树型结构一样的js代码

<a-row>
  <a-col :span="6">
    <a-tree
      v-if="level1.length > 0"
      :tree-data="level1"
      @select="onSelect"
      :replaceFields="{title: 'name', key: 'id', value: 'id'}"
      :defaultExpandAll="true"
      >
    </a-tree>
  </a-col>
  <a-col :span="18">
  </a-col>
</a-row>

<script>
import { defineComponent, onMounted, ref, createVNode } from 'vue';
import axios from 'axios';
import {message} from 'ant-design-vue';
import {Tool} from "@/util/tool";
import {useRoute} from "vue-router";

export default defineComponent({
  name: 'AdminDoc',
  setup() {
    const route = useRoute();
    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，上面查文档时请求的是doc/all，查询的是所有书的文档，应该只查询当前的电子书的文档。
把原all请求接口加上电子书id，根据这个参数只查询这个电子书的文档

@GetMapping("/all/{ebookId}")
public CommonResp all(@PathVariable Long ebookId){
    CommonResp<List<DocQueryResp>> resp = new CommonResp<>();
    List<DocQueryResp> list=docService.all(ebookId);
    resp.setContent(list);
    return resp;
}

再给DocService的all方法加上参数，增加一个根据id查询的条件docExample.createCriteria().andEbookIdEqualTo(ebookId);

public List<DocQueryResp> all(Long ebookId){
    DocExample docExample = new DocExample();
    docExample.createCriteria().andEbookIdEqualTo(ebookId);
    docExample.setOrderByClause("sort asc");
    List<Doc> docList = docMapper.selectByExample(docExample);
    // 列表复制
    List<DocQueryResp> list = CopyUtil.copyList(docList, DocQueryResp.class);
    return list;
}

然后在前端发送doc/all请求时加上ebookid作为参数

axios.get("/doc/all/" + route.query.ebookId)

还有另一个bug，电子书管理进入编辑界面时，点击父文档没有选项

只有点新增才会有父文档选项出现。需要点击编辑时就初始化父文档选择框。

将原选择树的变量向上移

// 因为树选择组件的属性状态，会随当前编辑的节点而变化，所以单独声明一个响应式变量
const treeSelectData = ref();
treeSelectData.value = [];

在数据查询handleQuery里初始化选择树

// 父文档下拉框初始化，相当于点击新增
treeSelectData.value = Tool.copy(level1.value);
// 为选择树添加一个"无"
treeSelectData.value.unshift({id: 0, name: '无'});

学习收获：这次因为很多地方和以前的差不多，所以很多都是自己尝试独立完成，加强了自主完成功能的能力，而不是一板一眼地完全照着课程视频做。