关于css:NoCode-实战-想要开发在线选课系统何必那样大费周章

42次阅读

共计 3049 个字符,预计需要花费 8 分钟才能阅读完成。


「关注」并「星标」咱们,
每天接管对于亚马逊云科技的最新资讯!

作为课余生存丰富多彩的大学生,你兴许加入过很多兴趣小组。如果你读到了本文,那么很大概率猜想,你八成也会加入各种计算机兴趣小组。

那么无妨试着和组员们一起,给大家开发个在线订课选课零碎吧!不仅能够借此机会锤炼一下软件 开发技能,学习新技术,在实践中把握新技能,还能让更多老师同学从中受害,岂不美哉?

就算你曾经进入职场,相似的技术也能够换个角度利用到工作中很多与预订无关的场景中。快来一起来看看吧!

01. 定义数据表

数据表是低代码或零代码的根基,实质上就是通过对数据表的操作来定制化展示数据。首先解说下本我的项目中会应用到的数据表。

本例一共波及七张表,别离如下:

  1. ClassTab 表,用来展示本周的全副课程安顿

  1. MyClass 表,用来记录学生抉择的将要加入的本周课程。表中的“value”列的数据提取自 WeekDays 表中的“value”列,用作工作日排序,前面会用到。

=FINDROW(WeekDays,”WeekDays[工作日]=%”,[Weekday])[Value]

  1. ClassList 表,记录着本周所有的课程目录

  1. ClassLocation 表,这个表中记录着每个课程对应的上课地点

  1. ClassMap 表记录着每个课程对应的老师名称

  1. Teachers 表是老师目录表,记录着本周课程对应的所有老师的名称

  1. WeekDays 表是本周工作日的记录表,表中的 Value 列是编号列,用做排序应用

下面七张表的对应关系为:

● ClassList 表和 WeekDays 表对应 ClassTab 表的“工作日”列和“课程时段”列的 PickList 援用数据源表

● ClassList 表和 Teachers 表是 ClassMap 表的“Name”和“Teacher”列的 PickList 援用数据源表

● ClassList 表也是 ClassLocation 表的“Class”列的 PickList 援用表

能够看出 ClassList 课程表是大部分其余表的援用数据源,其本质上是通过逻辑对应关系,把 ClassList 中的课程展示进去。这里须要重点了解下。

02. 剖析业务逻辑

接下来咱们介绍下本例的业务逻辑,业务逻辑决定着底层数据的展示形式。

  1. 首页数据展现,数据来自 ClassTab 表,每个工作日的课程依照行的形式进行展示,不同的课程时段作为列来宰割。

  1. 每日课程展现,在首页的每个数据行代表一个工作日的课程,点击后开展每日课程具体,在本页中能够通过点击“具体”按钮查看本日每个课程的详细信息(课程名称、课程工夫、对应的老师、上课地点),还能够点击“加入”按钮来决定是否加入本人感兴趣的课。

  1. 我的课程展现,在我的课程页面中列出了所有订阅过的课程,能够看到这些课程对应的工作日、工夫及课程名信息。还能够对其进行勾销操作。本页数据来自 MyClass 表,并将按照“工作日”和“工夫”列进行排序。

03. 开始构建 App

在介绍了数据表设计和业务逻辑后,咱们开始着手对 APP 进行构建。

  1. 登录 Honeycode 网站,新建一个 Workbook 并将其命名为 ClassBooking。

  1. 创立第一局部介绍的七张数据表,并设置好援用关系。

  1. 在首页中增加 Column List 列表对象,数据源抉择“Classtab”数据表。选中增加具体页。

  1. 列表属性页面增加条件显示,用来应用蓝绿色来距离显示每行,同时对边缘进行钝化,减少界面好看度。

其条件表达式为:

=MOD(ROW(THISROW()),2)=0

表达式中应用 ROW 对以后数据行进行标号,而后应用 MOD 来对行号取模判奇偶行并设置对应的色彩。


  1. 在主动生成行内容具体页中,每行的前面别离增加两个按钮“具体”和“加入”。

  1. 在具体页底部减少一个 Block 和四个 DataCell 用来展现课程具体内容。

  1. 对第 5 步中的“具体”按钮设置可见性。

表达式内容为:

=NOT(ISBLANK($[0800 0950 column data]))

通过判断课程时段列的值是否为空,决定是否显示“具体”按钮。


  1. 设置“具体”按钮的 ACTIONS,把数据从 InputRow 中取出并且写入到第 6 步的属性 Block 中。须要留神的是,DataCell 变量 teacher 和 location 的值取自 ClassMap 和 ClassLocation 表,通过 FINDROW 函数进行匹配。

  1. 设置“加入”按钮的可见性。

表达式为:

=AND(NOT(ISBLANK($[0800 0950 column data])),ROWS(FILTER(MyClass,”MyClass[Time]=% AND MyClass[Class]=% AND MyClass[Weekday]=%”,$[0800 0950 column header],$[0800 0950 column data],$[Weekday column data]))=0)

通过 AND 函数来连贯两个条件语句,第一个是判断对应的课程时段值是否为空,第二个是判断这个时段的课程是否曾经存在于我的课程 MyClass 表中。条件均满足的状况下才会显示“加入”按钮。


  1. 设置“加入”按钮的 ACTIONS,把要加入的课程信息写入到我的课程 MyClass 表中。


  1. 为每个时间段列反复 7 -10 步的设置。
  2. 值得注意的是课程具体页的工作日 DataCell 取值的设置。


认真思考下为什么这么写?

后面咱们提到过 WeekDays 表是作为 ClassTab 表中“工作日”列的 PickList 内部数据源表,在具体页面中展现的数据是 ClassTab 表的每行的数据,那么工作日这个 DataCell 所对应的值就是指向 WeekDays 表中一行的 RowLink,所以这么写的意思是从 ClassTab 的“工作日”列指向的 WeekDays 表的行数据中取出“工作日”列的值。

  1. 减少一个新的 Screen,用来显示要加入的课程,并且在页面中增加一个 Column List 的对象,并且设置数据源。


数据源表达式为:

=FILTER(MyClass,”ORDER BY MyClass[value],MyClass[Time]”)

留神表达式中的 ORDER BY 的应用,这里咱们根据 MyClass 的“value”列和“Time”进行排序。

  1. 在下面新创建的 Screen 中的列表行里增加一个“勾销”按钮,用来将对应的课程记录从 MyClass 表中删除。设置其 ACTIONS 为删除以后行。


至此,本 APP 构建全副实现,所有页面的显示成果如下:



04. 总结

在本例中波及到了很多 Amazon Honeycode 的外围操作,例如对 PickList 及 RowLink 的应用以及对数据源进行过滤和基于条件的款式设置等,然而没有对课程公布的环节进行设置,大家能够尝试通过判断以后登录用户,为其绑定角色和权限,而后对课程表进行增删改的操作。

置信通过这些入手练习,肯定能够对 Honeycode 低代码平台有更深刻的理解同时积攒相当的入手教训。

如果您想要更深刻地学习 Amazon Honeycode 更多内容,咱们向您举荐「Amazon Honeycode community」,在这里,您能够与其余 Honeycoders 分割,一起交换、学习新技能!

复制网址(https://honeycodecommunity.aws/)或扫描下方二维码即可拜访哦~

本文作者介绍

李军强
亚马逊云科技业余服务团队
云架构征询参谋

负责企业级客户的云上架构征询,基础架构现代化革新及优化。在基础架构和容器畛域有多年运维治理教训,对 DevOps、继续交付及云原生服务框架、运维自动化等有深刻的了解。

END

正文完
 0