【教程】第四章:任务与评论插件 —— 如虎添翼,顺利掌握

回顾上一节

小伙伴们还记得上一节的挑战任务吗?我们要为任务表配置 状态附件 字段,并在任务列表里展示它们。别急,咱们先揭晓答案!

  1. 状态字段的配置
    • 选择 下拉菜单(单选) 字段,填写选项标签:未开始、进行中、待审核、已完成、已取消、已归档。颜色根据你的喜好自由设置,给任务增添一点色彩吧!

状态字段配置

  1. 附件字段的配置
    • 新建 附件 字段,给它取个名字,比如“附件”,点击提交,完成得简简单单。

  1. 任务列表显示创建人和状态
    • 在表格区块中勾选“创建人”、“状态”和“附件”字段,让任务列表展示更多关键信息,变得更加丰富。

任务列表显示字段

  1. 添加和编辑表单中显示字段
    • 在弹窗表单中,别忘了勾选状态和附件字段,这样无论是添加还是编辑任务时,都能方便地看到这些字段。

表单中显示字段

做得不错吧?别急,反复操作几次,你会发现自己逐渐熟练掌握 NocoBase 的核心用法。每一步操作都为你后续的任务管理打下坚实的基础,咱们继续往下看!


4.1 任务内容与评论:任务管理互动

到目前为止,你的任务管理系统已经能够承载基本的任务信息了。然而,我们知道,任务管理不仅仅是几行文字的描述,有时候我们需要更丰富的内容,以及团队成员之间的实时互动。

4.1.1 Markdown(Vditor):让任务内容更加丰富

你可能已经注意到了 NocoBase 提供的 富文本Markdown 编辑器,不过它们的功能可能还不够让你满意。
富文本编辑器功能较为有限,Markdown 编辑器虽然好用,但不支持实时预览。

那么,有没有一种编辑器既能实时预览、又支持丰富的功能呢?答案是肯定的!Markdown(Vditor) 是 NocoBase 里功能最强大的文本编辑器,支持实时预览、图片上传、甚至语音录制。而且,它已经内置在系统中,完全免费!

插件简介: 插件是NocoBase的核心功能之一,允许用户根据项目需求添加自定义功能或集成第三方服务。
通过使用插件扩展,可以扩展实现一些方便或意想不到的功能集成,更加方便你的创作与开发。

下面我将带你一步步开启这个强大的编辑器,还记得我们的插件管理器吗?哈哈没错,它就在里面。

Markdown(Vditor): 用于存储 Markdown,并使用 Vditor 编辑器渲染,支持常见 Markdown 语法,如列表,代码,引用等,并支持上传图片,录音等。同时可以做到即时渲染,所见即所得。

  1. 启用 Markdown(Vditor) 插件
    • 打开右上角的 插件管理器,输入 "markdown" 搜索插件,启用 Markdown(Vditor)。别担心页面会短暂刷新,几秒钟后它就会恢复正常啦。

启用 Markdown 插件

  1. 创建 Markdown 字段

    • 回到任务表,点击“创建字段”,我们的 Markdown Pro Plus 加强版已经出现了!

  • 给它取个名字,比如“任务详情(task_detail)”,勾选所有可用功能。
  1. 你可能注意到 “文件数据表” 的选项,不选会不会影响文件功能?不必担心,会存储到我们的默认存储空间中,放心使用吧。

  1. 测试 Markdown 字段
    • 现在返回任务管理页面,开始写下你的第一个 Markdown 文本吧!再试试粘贴图片,或者上传文件,是不是感觉很强大?

任务表越来越丰富了!跟随每个步骤,你的系统功能逐步扩展,接着我们来看看如何调整字段的排布,让界面更加美观。

4.1.2 调整字段的排布

随着任务表里字段的增多,页面布局可能会显得有些混乱,别担心,NocoBase 的灵活性让你可以轻松调整字段的位置。

调整字段位置

  • 将鼠标移到字段右上角的十字图标,点击并拖动字段到想要的位置,放手即可完成调整。试试看,页面瞬间整洁多了吧!

调整字段位置

这样操作后,页面布局会更符合你的需求。接下来,我们来为任务表增加评论功能,让团队互动更轻松。

4.2 评论功能

光有任务描述还不够,有时我们还需要团队成员为任务添加评论,讨论问题,记录反馈。一起开始实现吧。

4.2.1 方法一:使用评论插件

4.2.1.1 安装评论插件

评论插件 (商业插件): 提供评论数据表模板和区块,为任意数据表的数据添加评论功能。

注意添加评论时需要通过关系字段关联目标数据表,以免评论数据冲突

插件管理器 中,上传并启用 评论插件。插件启用后,数据源里会出现一个新的“评论表”选项。
点击添加 > 上传插件 > 拖入压缩包 > 提交
搜索评论,评论插件已经出现!开启后进入数据源,看到评论表的选项了,安装成功!

安装评论插件

4.2.1.2 新建评论表

我们切换到数据源,新建评论数据表 评论表(Comments)

4.2.1.3 评论表与任务表的关系探讨

我们已经创建了 评论表(Comments),可能你会想:是不是可以直接去页面上绘制评论区了呢?别着急,我们先来想一想,每个任务都有自己的评论区,而评论和任务之间应当是多对一的关系。那么如何把评论和任务联系起来呢?

对了!这就是我们接下来要用到的“关系字段”

NocoBase 允许我们通过关系字段,在数据层面上把表与表之间的关系建立起来,就像搭建桥梁一样,将相关的数据紧密连接。

为什么选择多对一关系?

我们为什么要选择多对一关系,而不是一对多或其他类型的关系呢?回想一下,每个任务都有多个评论,因此,多条评论可以指向同一个任务。这种情况下,我们就需要在评论表中创建一个多对一的字段,指向任务表中的任务。

聪明的你可能已经想到:
既然评论和任务是多对一的关系,那么在任务表中是不是可以建立一个一对多的字段,来指向评论表呢?
恭喜你,完全正确! 一对多和多对一是互为反向的关系,我们同样可以在任务表里创建一个一对多的字段,关联到评论表。你真是棒极了!

4.2.1.4 设置多对一关系字段

接下来,我们就要在评论表中创建一个多对一的字段,用来与任务表进行关联。我们可以将这个字段命名为所属任务(belong_task)。在设置时,有几个关键配置需要注意:

  1. 数据源表:我们从哪里发起关系?这里选择的是评论表
  2. 目标数据表:我们要与哪张表建立关系?这里选择的是任务表

外键与目标数据表字段标识:举例:
接下来是关键的部分:外键目标数据表字段标识
这个概念听起来有点复杂?别担心,接下来我们用一个详细的例子来帮你轻松理解。

设想一个场景,假如你现在手里有很多张高考成绩单,我们的任务是将每一张成绩单找到它所对应的学生。那么我们如何做呢?
我们拿到了一张成绩单,上面有如下信息:

  • 姓名:张三
  • 班级:高三十五班
  • 准考证号:202300000001
  • 身份证号:111111111111
    现在,假设你想通过姓名班级来找到学生张三。但是问题来了——在同一个学校里,同名的学生有很多,光高三十五班就有 20 个叫张三的同学!这样光靠姓名和班级,很难精确地确认是哪一个张三对吧?
    这时候,我们就需要一个更独特的标识来帮助我们识别。比如,准考证号就是一个非常好的选择。每个学生的准考证号都是唯一的,通过准考证号,我们可以精准地找到成绩单对应的学生。例如,你发出了准考证号 202300000001 的查询,不一会儿,有个学校传来了回复:“这张成绩单属于张三,我们高三十五班第 3 排戴眼镜的那个!”
    同样的道理,回到评论关系设计的场景,你是否灵光一现:我们可以选一个任务表的唯一标识字段(比如 id),保存到这个评论中,来确定评论归属于哪个任务?
    这就是多对一关系的实现的核心概念:外键,简单吧,哈哈哈

我们在评论表中,保存任务表的这个唯一 id 字段,我们命名为 task_id,这样就能通过 task_id 把评论和任务绑定在一起。

4.2.1.5 删除时的外键处理策略

在 NocoBase 中,设置多对一关系后,还需要考虑如果删除任务时,评论的数据应当如何处理。你可以选择以下几种方式:

  • CASCADE:如果你删除了任务,所有与这个任务关联的评论也会一起被删除。
  • SET NULL(默认设置):任务被删除时,评论的数据会被保留,但关联的外键字段会被置空。
  • RESTRICT 和 NO ACTION:当任务有关联的评论时,系统会阻止你删除这个任务,确保评论不会丢失。

4.2.1.7 在任务表中创建反向关系

最后,我们勾选 ”在目标数据表里创建反向关系字段”,用来方便我们从任务中查看所有关联的评论。这让数据管理更加便捷。

在 NocoBase 中,关系字段的存放位置决定了数据的获取方式,所以如果我们希望在任务表中也能查看到对应的评论数据,就需要在任务表中创建一个一对多的反向关系字段,关联到评论表。

当你再次打开任务表时,系统会自动生成一个关联的评论字段,并注明“一对多”的关系,这样你就可以轻松查看和管理所有关联的评论啦!

4.3 页面搭建

4.3.1 开启评论表

紧张刺激的时刻来了,我们回到编辑弹窗,创建评论表区块,顺便勾上需要的功能,搞定!

demov3N-16.gif

4.3.2 调整页面

我们美化下页面样式,鼠标放在编辑按钮右上侧,选择较宽的弹窗。运用我们刚学的知识,拖动评论区块,放在弹窗右侧,完美!

demov3N-17.gif

现在有的朋友可能眼馋了:我也想要实现评论!别怕,我也为你准备了第二种免费方案。

4.2.2 方法二:自定义评论表

如果你没有购买评论插件,我们还可以通过创建普通表来实现类似的评论功能。

  1. 新建评论表

    • 创建 评论表(comments2),添加 评论内容(content) 字段(Markdown 类型)和 所属任务(belong_task) 字段(多对一类型)。
  2. 在页面中创建评论列表区块

    • 在任务表的编辑弹窗中,添加一个 列表区块(我们的第三种区块出现啦,列表同时可以展示字段的详情信息),选择评论,测试一下:
      创建评论列表区块

小结

你已经学会了如何通过 Markdown(Vditor) 丰富任务内容,并且给任务添加了评论功能!任务管理系统已经有了完整的功能基础,是不是感觉自己离打造一个专业的任务管理工具更近了一步呢?

别忘了继续探索和操作,NocoBase 充满无限可能。如果你遇到什么问题,别慌,我会一直陪着你,带你走过每个步骤。

下一章(第五章:标签页 & 区块 —— 丰富视图,精彩纷呈),我们将深入探索 NocoBase 的更多区块功能,帮助你把系统提升到一个新的高度。继续加油!


继续探索,尽情发挥你的创造力!如果遇到问题,不要忘了随时可以查阅 NocoBase 官方文档 或加入 NocoBase 社区 进行讨论。

posted @ 2024-11-11 19:46  NocoBase  阅读(4)  评论(0编辑  收藏  举报