课程名称：Spring Boot+Vue3前后端分离，实战wiki知识库系统
章节名称：8-12 文档页面功能开发-1
讲师姓名：甲蛙
课程内容：
首先增加电子书界面，在views文件夹里新建一个文档界面doc.vue，暂时内容先显示一行字
<template> <a-layout> <a-layout-content :> <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: '无'});学习收获：这次因为很多地方和以前的差不多，所以很多都是自己尝试独立完成，加强了自主完成功能的能力，而不是一板一眼地完全照着课程视频做。