Spring Boot + Vue3前后端分离实战wiki知识库系统八--分类管理功能开发二

news2024/11/8 6:50:10

接着上一次https://www.cnblogs.com/webor2006/p/17291405.html的分类功能继续完善。

分类编辑功能优化:

概述:

现在分类编辑时的界面长这样:

很明显目前的父分类的展现形式不太人性,这里需要指定父分类的id才可以,对于用户来说这种交互是反人道的,用户怎么知道父分类在数据库中的id值呢?所以接下来咱们需要来优化一下它,其优化的效果如下:

也就是新增/修改分类时,支持选中某一分类作为父分类,或无父分类。

说实话,对于小白来说,要实现这么一个效果,还是挺让人抓狂的,下面则来一点点攻克它。

实现:

1、先来挑选下拉框组件:

首先上Ant Design Vue上来挑选下拉框组件,如下:

咱们将它集成到自己的页面中先来看一下效果:

运行:

2、修改下拉框数据

接下来咱们则来将下拉框展示所有的父分类,如下:

此时运行:

其中为了调试方便,将这个文本框先保留,能看出选择之后的父分类ID:

此时咱们新建编辑看一下,是否好使:

一切正常。

3、禁止父分类可以选择自己:

这里演示一个bug:

发现木有,新建的“测试”这个父分类,在编辑时,还是选择它,再保存时就从列表中消失不见了,因为我们显示一级分类的id都是0,而“测试”这个分类在编辑时由于将父分类也选择成了自己了,那么很显然它的父分类id就变成了“测试”的id,而不是一个0,当然就显示不到这个列表上了。

所以需要规避这种情况,其思路也很简单,就是在父分类选择中,将自己这一项不让用户选既可,而让选项置灰也很简单:

加一个属性既可,所以咱们需要做一个判断:

此时再来看一下效果:

最后咱们将测试的这个文本框给去掉:

最终的效果:

电子书管理增加分类选择:

概述:

对于电子书管理这个模块来说,也有分类的选择属性:

所对应的数据库字段:

那很明显目前的电子书新增时对于分类的选择是非常不人性的,需要让用户指定分类的id,所以接下来需要来优化电子书编辑时分类的选择。

实现:

1、上Ant Design Vue寻找分类选择组件:

 而最终咱们要实现的效果如下:

  

接下来看一下它的实现代码:

<template>
  <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
</template>

其中v-model:value中的值其实是选择的多个分类:

也就是它里面是一个数组:

而:options则是分类的树形菜单,这个在分类管理的树形显示中已经知道怎么将其转换成树形结构了。

2、查询所有分类:

为了能让分类可以让用户选择,很明显需要查询出所有的分类,并将数据以树形的结构组装起来,这块可以直接用分类管理的:

3、显示所有分类:

接下来咱们就可以在编辑分类时显示级联效果,原来我们是把分类一和分类二都显示了,没有一个树形结构:

现在很明显需要将这俩合二为一了,变成这样:

此时就需要用到a-cascader,修改如下:

那怎么修改呢?很明显这个分类这一列的样式应该需要定义一下,此时就需要用到<a-table>自定义渲染了,如下:

接下来则需要来定义categoryIds这个响应式变量了:

这个响应式的变量的含义有木有明白?它其实就是用来保存选择二级分类的两个分类id的,也就是这个级联控件选择之后,会将选择的两个分类的id存在categoryIds变量中,接下来在显示的时候,则需要将这个变量给分解开了,如下:

接下来运行的效果如下:

4、选择分类保存处理:

接下来处理一下编辑时分类保存的逻辑,现在点击编辑其显示效果是出来了:

但是只是一个假像,没有处理保存的逻辑,下面来处理一下。

编辑分类回显:

而categoryIds刚好是级联控件所使用的:

 

保存分类数据:

接下来则来将选择的分类保存到数据库中,如下:

好,接下来运行看一下效果:

5、从数据库中读取选择的分类:

接下来还差最后一步,就是列表分类的显示处理了,目前我们的分类显示的是id:

而处理它,其实就是根据id到分类列表中找到对应的分类名,如下:

此时运行一下,你会发现结果有问题:

原因是因为获取的这个方法有点问题,得改一下:

再运行就正常显示了:

首页显示分类菜单:

效果:

接下来则需要来完善一下首页的分类菜单了,也就是这块的东东:

而最终的效果就是:

实现:

1、加载分类数据,变成树形结构:

这块代码跟之前分类管理加载所有分类是一样的,如下:

2、显示菜单:

接下来则循环树型分类数据,将分类菜单给展现出来,如下:

对于这段代码是不是有点陌生了,你能理解它么?

不用理解,这其实就是Ant Design Vue中这个分类组件的模板代码,此时运行的效果:

发现咋展不开呢?

将它去掉:

点击分类菜单显示电子书:

接下来则需要来完成点击分类,查把该分类下所有的电子书给查出来了。

点击分类重新查询电子书:

1、菜单增加点击事件:

运行看一下:

其中可以发现,只有点击二级分类时才会进行打印,也符合常理。

2、根据二级分类来查询电子书:

在点击时我们先获取二级分类的id【由于我们点击只有响应二级分类,所以这里查询的话也只查二级分类了】,如下:

这里在点击之后需要发起一下查询动作,所以我们可以将这一段代码封装一下:

电子书后端接口增加分类参数:

1、EbookController:

接下来则需要回到后端进行电子书查询接口的修改了,先来找到列表查询接口:

其中查询参数中目前只有:

咱们则需要再加一个二级分类的id了:

2、EbookService:

接下来则来到Service中增加对于这个参数的查询处理:

这样对于电子书二级分类的查询接口就写好了。

运行:

 

首页显示欢迎页面:

概述:

最后,咱们对于首页做一个小调整,就是进来时先显示欢迎页,也就是长这样:

实现:

1、定义欢迎的内容区域:

对于右侧的内容我们是定义了一个列表标签:

这里我们再来定义一个欢迎区域:

2、左侧菜单增加一个欢迎项:

接下来左侧菜单新增一个欢迎项,用来回到首页,如下:

其中要注意,这里的key我们定义死了,以便之后在进行点击事件的处理里使用。

3、点击分类时,则需要隐藏欢迎页:

先来定义一个响应式的变量用来控制这个欢迎的显示与隐藏:

然后在点击分类时对该变量进行一下控制:

此时咱们还需要在控件上使用该响应式的变量,如下:

4、运行:

运行看一下效果:

总结:

其实也没啥可总结的,写这篇断断续续地耗时大约2个多月,也是因为工作上的烦心事比较多,思想变懒惰了,但是无论如何,不要忘了坚持就可以了,人的心情也是会随着四季的变化而变化,心情不好思想懒惰懒惰也是很有必要的,人生漫漫,学会享受各种变化,心灵鸡汤就不多说了,下篇继续~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/636157.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

规范即治理函数:LLM 赋能的软件架构治理与架构设计

在我们设计架构治理平台 ArchGuard 2.0 的架构时&#xff0c;一直在强调的点是&#xff1a;基于规范 模式的工具化。简单来说&#xff0c;规范是架构设计的共时&#xff0c;也是架构知识的显性化。所以&#xff0c;在让 AI 设计架构时&#xff0c;规范是我们要考虑的第一要素&…

0 基础学脚本:给同事做一个排班表并每日通知「02」

Hello 小伙伴们早上、中午、下午、晚上、深夜好&#xff01; 我是爱折腾的 jsliang~ 本系列文章和配套直播视频&#xff0c;面向金山文档的「轻维表」「表单」用户。 希望通过【自动化】和【脚本】等能力&#xff0c;让里面数据相互流转起来&#xff0c;从而提升工作效率。 序 …

企业级信息系统开发讲课笔记4.10 配置国际化页面

文章目录 零、学习目标一、使用Thymeleaf配置国际化页面&#xff08;一&#xff09;创建Spring Boot项目 - ThymeleafI18N&#xff08;二&#xff09;编写多语言国际化配置文件1、在resources下创建i18n目录2、在i18n目录里创建login.properties3、在i18n目录里创建login_zh_CN…

Prompt 用法大全!让 ChatGPT 更智能的六种策略(下)

上两篇介绍了 Pormpt 用法大全中前四种策略&#xff0c;本篇继续讲解后两种策略。‍‍‍‍‍ 点燃创作灵感&#xff1a;Prompt 实践指南揭秘&#xff01;让 ChatGPT 更智能的六种策略&#xff08;上&#xff09; Prompt 用法大全&#xff01;让 ChatGPT 更智能的六种策略&#…

基于html+css的图展示122

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

docker 的网络模式

一、docker网络概述 1、docker网络实现的原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是 每个容器的…

ISO21434 操作和维护(十)

目录 一、概述 二、目标 三、网络安全事件响应 3.1 输入 3.1.1 先决条件 3.1.2 进一步支持信息 3.2 要求和建议 3.3 输出 四、更新 4.1 输入 4.1.1 先决条件 4.1.2 进一步支持信息 4.2 要求和建议 4.3 输出 一、概述 本条款描述了对文件中的项目…

Mysql中explain的用法详解

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

企业级信息系统开发讲课笔记4.8 Spring Boot整合Redis

文章目录 零、学习目标一、Redis概述1、Redis简介2、Redis优点&#xff08;1&#xff09;存取速度快&#xff08;2&#xff09;数据类型丰富&#xff08;3&#xff09;操作具有原子性&#xff08;4&#xff09;提供多种功能 3、Redis官网与在线教程 二、使用Spring Boot 整合 R…

c++11 标准模板(STL)(std::ios_base)(二)

定义于头文件 <ios> class ios_base; 类 ios_base 是作为所有 I/O 流类的基类工作的多用途类。它维护数种数据&#xff1a; 1) 状态信息&#xff1a;流状态标志&#xff1b; 2) 控制信息&#xff1a;控制输入和输出序列格式化和感染的本地环境的标志&#xff1b; 3)…

音视频技术开发周刊 | 297

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 Geenee AR为品牌商和零售商提供虚拟试穿应用 这意味着Geenee AR的虚拟试穿解决方案能够与品牌商现有的销售渠道无缝集成。 谁说苹果掉队了&#xff1f;WWDC上只字未提AI&a…

macbook pro存储空间不足怎么办? MacBook Pro怎么优化或清理Mac磁盘空间?

MacBook Pro用久了之后都会堆积很多残留文件或缓存垃圾&#xff0c;久经之下MacBook Pro磁盘空间将会面临不够用的情况。 macbook pro存储空间不足怎么办&#xff1f;macbook pro笔记本中的存储空间不足&#xff0c;想要优化一下&#xff0c;该怎么优化呢&#xff1f; 这时候…

【电路】电路与电子技术基础 课堂笔记 第8章 负反馈放大电路

反馈放大电路有很多好处&#xff0c;可以增加放大电路的输入电阻&#xff0c;使输出电流京可能稳定&#xff0c;保证输出电压随负载变化波动较小&#xff0c;减小电路元件参数变化对电路性能的影响等。 反馈放大电路分为正反馈和负反馈放大电路。 8.1 反馈的基本概念 8.1.1 反…

在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器

一、项目介绍 本项目实现了一个基于GTK和libvlc的视频播放器。使用GTK创建GUI界面,使用libvlc播放视频。用户可以通过选择视频文件,然后启动播放器来观看视频。 二、VLC介绍 VLC是一款自由、开放源代码的跨平台媒体播放器,支持播放几乎所有常见的音频和视频格式。最初于20…

STM32管脚模拟协议驱动双路16位DAC芯片TM8211

STM32管脚模拟协议驱动双路16位DAC芯片TM8211 TM8211是一款国产的低成本双路16位DAC驱动芯片&#xff0c;可以应用于普通数模转换领域及音频转换领域等。这里介绍STM32 HAL库驱动TM8211的逻辑,时序和代码。 TM8211的功能特性为&#xff1a; TM8211的内部电路功能框图为&…

一个人最大的愚蠢,就是 “习惯性反驳”

作者| Mr.K 编辑| Emma 来源| 技术领导力(ID&#xff1a;jishulingdaoli) 每个人都有“反驳的义务”&#xff0c;这是全球顶级咨询公司麦肯锡&#xff0c;对所有员工的行为要求&#xff0c;即对于自己不认同的看法和意见&#xff0c;明确表示出自己的想法并提出反驳。麦肯锡认…

揭秘报表新玩法!标配插件不再单调,手把手教你如何在浏览器中引入柱形图插件。

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 图表作为一款用于可视化数据的工具&#xff0c;可以帮助我们更好的分析和理解数…

【Rust日报】2023-06-10

nt-apiset: 一个用于 WindowsAPI API Set Map文件 的 Rust 解析器 我的bootloader程序项目的下一个构建块已经准备好了&#xff01;Nt-apiset 是用 Rust 编写的用于 Windows10及更高版本的 API Set Map 文件的解析器。 API Set是名称以“ API-”或“ ext-”开头的 PE 可执行文件…

【MySQL】View 视图用法及作用

文章目录 1. 视图概述1.1 为什么使用视图&#xff1f;1.2 视图的理解 2. 创建视图2.1 创建单表视图2.2 创建多表联合视图2.3 基于视图创建视图 3. 查看视图4. 更新视图的数据4.1 一般情况4.2 不可更新的视图 5. 删除视图6. 总结6.1 视图优点6.2 视图缺点 1. 视图概述 1.1 为什么…

STL之优先级队列(堆)的模拟实现与仿函数(8千字长文详解!)

STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数 文章目录 STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数优先级队列的概念priority_queue的接口介绍优先级队列的构造函数 priority_queue模拟实现类成员构造函数向下调整算法——正常实现 push向…