CodeWave系列：5.CodeWave 智能开发平台 逻辑功能实现

文章目录

• • @[toc]
• 1.前言
• 2.概念介绍
• • 2.1 前端逻辑分类：
  • 2.2 服务端逻辑
• 3.前端逻辑实践
• • 3.1 页面逻辑
  • 3.2 事件逻辑
• 4.服务端逻辑实践
• 5.高级用法
• • 5.1 匹配组件实践
  • 5.2 循环组件实践
• 6.小结

1.前言

前一节我们学习了模型的构建以及应用，通过前面的学习，我们已经可以使用CodeWave进行简单的表单的构建，本节我们将学习逻辑处理功能，这样前端页面就可以按照我们的业务要求进行运行了。我们将首先学习逻辑的概念，逻辑的分类，页面逻辑的实践以及几个高级的用法。

2.概念介绍

页面中的功能由逻辑实现，逻辑按照作用域区分为页面逻辑和服务端逻辑。

• 页面逻辑：作用于指定前端页面的逻辑，不支持跨页面调用。
• 服务端逻辑：作用于整个应用，支持被所有逻辑和流程调用，在各页面中的调用需要通过页面逻辑来完成。

逻辑流转： 逻辑有开始和结束节点，每个逻辑由多个逻辑项组成，逻辑项按照开始到结束的顺序流有序执行。

内置函数：为了降低开发难度，系统预先定义了一些功能，处理特定场景下的需求，比如字符串处理，日期时间处理等等，这些称之为内置函数；内置函数可以在任何一个逻辑中使用，也可以在动态绑定中使用。

2.1 前端逻辑分类：

事件逻辑： 事件逻辑是一种特殊的页面逻辑，由组件或页面的使用过程中某个可被用户感知的事件触发，如点击事件、页面进入时事件等。在对组件进行操作时，系统会自动传入event参数，开发者可以在该事件逻辑中使用这个参数完成特定业务功能，举个例子，当你点击一个按钮时，会传入该按钮在页面的X轴和Y轴的坐标位置。

组件逻辑： 组件逻辑属于一种特殊的页面逻辑，拖拽部分组件到页面中后会自动生成相关逻辑，用于调用相关组件功能。比如要完成打开弹窗的动作，就需要调用弹窗组件的open逻辑。

页面逻辑： 页面逻辑通常用来描述页面中要完成的业务功能，可以搭配事件逻辑共同使用。如页面中多个事件要完成同样的操作或功能，可将重复的部分放到页面逻辑中，在不同的事件逻辑中进行调用

2.2 服务端逻辑

特有组件： 服务端逻辑是服务端逻辑，可以在整个应用范围内使用。页面逻辑与服务端逻辑大部分逻辑组件均相同，但仍有部分组件仅可在页面逻辑中使用或仅可在服务端逻辑中使用。

• 页面逻辑特有组件：弹出消息、跳转页面、JS代码块。
• 服务端逻辑特有组件：数据查询、SQL查询。

实体逻辑： 在应用开发中，系统中的业务数据往往需要存储到数据库中，系统功能需要到数据库中查询数据、存储数据、更新数据和删除数据等操作。而上述一系列的操作都可以通过实体逻辑生成。在新建实体后，平台自动生成了实体的增删改查逻辑，开发者在需要时直接调用即可，实体操作逻辑也是服务端逻辑。

逻辑作用域： 逻辑之间有调用规则：页面逻辑可以调用页面逻辑、服务端逻辑和系统逻辑；服务端逻辑只能调用服务端逻辑和系统逻辑，不能调用页面逻辑。

3.前端逻辑实践

页面逻辑指前端某个页面下的逻辑。页面逻辑可再细分为自定义页面逻辑、事件逻辑。

3.1 页面逻辑

自定义页面逻辑可通过右键点击页面名称添加到对应页面。自定义页面逻辑可使用大部分逻辑的通用组件。除此之外，它还支持自定义、JS 代码块、输出日志、弹出消息、跳转页面。

3.2 事件逻辑

事件逻辑是一种特殊的页面逻辑，可通过页面或相关组件的操作触发。事件逻辑自带事件参数，不可添加输入输出参数。事件逻辑统一展示在页面下的“事件逻辑”文件夹中。事件逻辑包括双击，点击，鼠标按下，鼠标释放等。下面以“点击”为例进行示范：

（1）选中按钮或其他页面组件，切换到组件的属性面板中的事件子面板来添加。如下图为按钮组件添加点击事件逻辑：

（2）添加成功后对应逻辑会显示在页面下的“事件逻辑”文件夹中。如下图按钮组件的点击事件逻辑：

4.服务端逻辑实践

服务端逻辑是逻辑面板下的逻辑，服务端逻辑在整个应用中均可见，可以被所有逻辑和流程调用。

1.直接点击+选择”添加服务端逻辑“

2.点击服务端逻辑右侧+或右击服务端逻辑选择”添加逻辑“。

提示： 服务端逻辑需要配合 服务端扩展开发来使用，这里先略过，后端会单独介绍服务端逻辑开发以及调用的相关内容。

5.高级用法

5.1 匹配组件实践

匹配组件可根据变量、表达式的值或类型进行匹配，若匹配一致则执行该分支。例如：在商品列表中根据不同商品类型使标签展示不同颜色。

（1）已有商品管理页面如下图所示。其中商品实体中商品状态字段为枚举类型，在表格中使用标签展示。

（2）选中数据表格中的标签组件，在右侧属性栏中找到背景颜色属性，点击进入动态绑定。

（3）在动态绑定中拖拽匹配组件，并在上方拖入商品状态对应的变量current.commodity.state，平台会根据枚举的枚举项自动生成分支，分别对应各个枚举值。然后再各分支下拖入文本原子项输入各枚举值对应显示的颜色，支持简单单词和十六进制颜色码两种方式。

（4）退出动态绑定后，发布预览效果，效果如下图所示。

5.2 循环组件实践

这里以生成一个长度为10的随机数数组，并为数组的每一项的值加5为例进行操作。

（1）在页面中放置两个文本组件和一个按钮组件如下图所示，在页面下创建两个局部变量listint和listintAdd，数据类型为List，并将两个文本组件的文本动态绑定为这两个局部变量，来分别展示生成的随机数数组和每个值加5生成的新数组。

（2）选中按钮组件，在右侧属性栏中的事件中添加点击事件，生成事件逻辑click。在逻辑中拖拽while组件，在while循环条件中拖拽比较运算符“<”，左侧放置变量listint下的属性length，右侧放置数字原子项并输入10。表示当数组长度小于10的时候进入循环。

（3）拖拽内置函数放置在while循环中，选择Add，并将局部变量listint放置在list参数中。再次拖拽内置函数放置在item中，选择Random，并在start和end参数中分别拖拽两个数字原子项并输入0和100。表示生成0-100的随机数添加至数组中。

（4）发布预览查看效果，点击按钮后可以看到生成了包含10个随机数的数组.

（5）返回可视化开发界面，在事件逻辑中while循环的下方拖拽foreach逻辑组件，并拖入变量listint。平台会自动生成索引设置，其中索引的起始值为0，结束值为列表长度，表示循环列表每一项。

（6）在foreach循环中，放置内置函数Add，并将局部变量listintAdd放置在list参数中，在item参数中拖拽算数运算“+”，左侧选择item，表示列表的项，右侧放置数字原子项并输入5，表示给每一项都加5，并放置到另一个列表中。

（7）发布预览查看效果，点击按钮后可以看到生成了包含10个随机数的数组以及每项加5的新数组。

6.小结

本节我们学习了CodeWave 智能开发平台总 逻辑的相关功能，通过本节的学习，我们可以实现一些简单的页面功能，使得页面功能满足我们的业务需求，我们还学习了一些CodeWave的高级功能，有些功能还不太熟悉，所以就没有列举出来，后面会针对这些具体的能力进行详细输出，让我们一起进行。

**文末彩蛋：**作者一名热爱人工智能的专栏作者，致力于分享人工智能领域的最新知识、技术和趋势。这里，你将能够了解到人工智能在各个领域的应用和创新，探讨人工智能对未来社会的影响，以及探索人工智能背后的科学原理和技术实现。欢迎大家点赞，评论，收藏，让我们一起探索人工智能的奥秘，共同见证科技的进步！