为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第1天 文档页面功能开发

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

2022.09.22 20:10 31浏览

课程名称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>


https://img4.sycdn.imooc.com/632c4eed0001b64d09690425.jpg


然后加上左侧文档树,需要将文档界面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>

https://img1.sycdn.imooc.com/632c4f280001efc508150411.jpg

但此时还有个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,电子书管理进入编辑界面时,点击父文档没有选项

https://img3.sycdn.imooc.com/632c4f5e00019b4612560234.jpg

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

将原选择树的变量向上移

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

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

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

https://img1.sycdn.imooc.com/632c4f8b000128dc12690401.jpg


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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消