首页 > 其他分享 >【教程】第四章:任务与评论插件 —— 如虎添翼,顺利掌握

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

时间:2024-11-11 19:44:13浏览次数:1  
标签:插件 Markdown NocoBase 教程 如虎添翼 任务 评论 我们

回顾上一节

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

  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 社区 进行讨论。

标签:插件,Markdown,NocoBase,教程,如虎添翼,任务,评论,我们
From: https://www.cnblogs.com/nocobase/p/18540419

相关文章

  • Python小白学习教程从入门到入坑------第二十九课 访问模式(语法进阶)
    目录一、访问模式1.1 r1.2 w1.3 + 1.3.1r+1.3.2w+1.3.3a+1.4a一、访问模式模式可做操作若文件不存在是否覆盖r只能读报错-r+可读可写报错是w只能写创建是w+可读可写创建是a只能写创建否,追加写a+可读可写创建否,追加写1.1 rr:只读模式(默认模式),文件......
  • Python小白学习教程从入门到入坑------第三十课 文件定位操作(语法进阶)
    一、文件指针python中严格来说没有指针这个说法,但有指针这个用法的体现。指针概念常用于c语言、c++语言中在Python的文件操作中,文件指针(也称为文件游标或文件句柄的位置)是一个内部标记,它指示了当前文件操作的读写位置,文件指针在打开文件时初始化,并随着文件的读写操作而移动......
  • 【Cytoscape 3.10软件下载与安装教程】
    1、安装包 Cytoscape3.10:链接:https://pan.quark.cn/s/0fc00372f3a4提取码:styPCytoscape3.9链接:https://pan.quark.cn/s/f2747b32fe54提取码:ean2Cytoscape3.8:链接:https://pan.quark.cn/s/c6092262f108提取码:24G6Cytoscape3.7:链接:https://pan.quark.cn/s/9153d0603b83......
  • 数学与统计计算:Python math 与 statistics库基础教程
    数学与统计计算:Pythonmath与statistics库基础教程在数据分析、机器学习和科学计算中,数学和统计学是两个至关重要的基础。Python提供了强大的内置库math和statistics,可以帮助我们快速、方便地完成常见的数学和统计计算。本篇博客将介绍math和statistics库中的基......
  • screen使用教程
    screen是一个非常有用的终端多任务管理工具,允许你在一个终端会话中运行多个会话,也可以让你在断开连接后重新连接会话,特别适用于远程服务器管理。以下是screen的一些基础使用方法和命令:1.安装screen在大多数Linux发行版中,screen都可以通过包管理器来安装。以下是一些常用......
  • 分享Photoshop(PS)最新安装包教程百度云网盘资源下载
    如小伙伴们所熟悉和了解的,PS是AdobePhotoshop的简称,它是一款常用的平面设计软件,也是大家经常接触到的图像处理工具。目前最新已推出CC2025版本。PS有很多功能,可分为图像编辑、图像合成、校色调色及功能色效制作部分等。PS软件使用众多的编修与绘图工具,可以有效地进行图片编辑......
  • ospf静态路由基础教程
     需要准备的设备如下(这边推荐把地址标出来防止敲的中途忘记)  我们这边给PC1和PC2顺便配置好 第一步,我们需配置端口,这边我给需要配置的端口地址圈起来我们已经清楚了每个路由器端口需要配置的地址,我们就可以开始配了 !!!第一台路由器是需要配置4个端口不要忘了!!!......
  • OMV安装文件管理器filebrowser和照片管理photoprism插件时Pull不了镜像的解决办法
    OMV安装文件管理器filebrowser和照片管理photoprism插件安装后不能启动服务或者PULL不了镜像卡着不动都是因为现在国内pull不了镜像的原因这里有个迷惑的人的地方是很多朋友认为是用docker来pull的镜像,于是增加了docker国内加速源后发现OMV还是拉取不了镜像。解决方法如下:因为OM......
  • 【Visual Studio系列教程】什么是 Visual Studio?
    欢迎阅读本文!这意味着你可能已经准备好开始学习如何使用VisualStudio进行开发。既然如此,我们就不多做废话,直接进入本系列的第1篇文章:《什么是VisualStudio?》。VisualStudio是一款功能强大的开发人员工具。是一个全面的集成开发环境(IDE),可用于编写、编辑、调试和生成......
  • 【GeoDa 1.22软件下载与安装教程】
    1、安装包  GeoDa1.22:链接:https://pan.quark.cn/s/a0faa3a9c3c7提取码:d98eGeoDa1.20:链接:https://pan.quark.cn/s/5c403f13bfba提取码:eycSGeoDa1.14:链接:https://pan.quark.cn/s/e7b619c98761提取码:5EuS2、安装教程1)       双击安装,弹窗安装对话框  ......