Skip to main content

入门示例-学生管理搭建

基础版

新建应用

  1. 点击创建应用按钮(如果没有创建应用的按钮,请检查左上角是否切换到了应用开发模式,切换后仍不能创建应用,请联系企业空间的管理员授权【创建人员】角色后可以创建)

  1. 选择新建空白应用

  1. 填写应用名称后点击创建

新建模组

可使用默认模组或创建新的模组

tips:平台管理模组是针对复杂登录场景的预置资源,此处我们不需要,可删掉

  1. 点击左上角"+"号后点击新建

  1. 填写模组名称和模组编号,选择创建空模组,点击保存。

领域模型

  1. 点击创建实体后点击新的实体

  1. 填写实体名称和实体编码,点击创建

  1. 创建后领域模型中会有创建的学生实体,点击新增实体属性

  1. 填写实体属性编码、实体属性名称,以及选择实体属性类型

选择数据类型的时候要根据实体类型选择合适的类型

  1. 同理,增加学号、年龄实体属性;新增班级实体,以及班级实体属性:名称、人数

  1. 在学生实体和班级实体之间增加 N-1 关联关系

这个关联关系可以根据两个实体的关系在属性栏进行修改

配置页面

新增学生

  1. 新增学生页面

填写页面名称后点击保存

  1. 点击空白处,选择在属性栏中将布局方式设置为弹框

  1. 表单页面搭建
  2. 从数据视图中拖入数据视图

  1. 点击实体框选择实体,点击学生实体,后点击确认

可选择自动填充,也可以手动填充。

  1. 从元件栏拖入单行文本后在属性栏内点击实体属性框,选择姓名属性

  1. 年龄和学号操作如上,选择班级名称的时候使用下拉框,点击实体属性,点击关联到学生的实体,再选择实体属性,最后点击选择。

  1. 配置好属性后,拖入 2 栏,在 2 栏内拖入按钮

1. 保存按钮:拖入按钮后修改按钮的名称,点击事件,选择事件为其他,选择操作类型为【保存更改】

1. 取消按钮如保存按钮,操作类型选择取消,区别是在"风格"上可以选择默认按钮

学生列表

  1. 新增学生列表页面,但页面的布局方式保持为默认布局
  2. 拖入数据容器中的数据表格后选择学生实体

在属性栏的列中点击添加列,选择实体属性,列信息的内容可以随着功能和界面进行修改

  1. 编辑、删除、新增按钮配置:分别拖入三个按钮到如图所示位置

  1. 编辑和新增按钮:修改按钮的名称为编辑和新增,设置事件为打开页面,并选择打开的页面为新增学生页面

  1. 删除按钮设置按钮风格为危险,事件操作类型为删除

并配置二次确认

新增班级

如上 1.4.1

班级列表

如上 1.4.2

设置应用导航

  1. 点击应用导航,

  1. 选中一个导航,选择点击事件为页面,选择学生列表页面,并修改导航名称

  1. 设置其他页面

点击导航栏,或者点击"+"新增导航,点击页面选择页面后点击确定。根据需要修改一下导航名称

预览

点击预览按钮

运行后添加数据

新增数据,点击新增按钮后跳转到新增数据的页面

填写好相应的数据后,点击保存

新增班级信息如下

新增学生信息如下

点击删除后会出现是否确认删除按钮,点击确认删除数据

编辑按钮可修改已添加好的数据

(扩展)改用逻辑实现班级列表

新增逻辑

点击"+",点击新增逻辑后填写逻辑名称后,跳转到逻辑页面

  1. 配置检索元件
  2. 将检索对象元件从元件栏拉入到画布上

  1. 设置检索对象元件的属性,首先数据源选择数据库,然后选择班级实体

  1. 因为我们需要班级实体的所有数据,所以范围这里我们选择所有。并配置返回的列表名称为 sclass

  1. 配置结束节点

因为班级列表需要通过逻辑传值,所以需要配置返回节点为有值。

点击结束节点,返回值选择有值,选择返回实体集合数据类型

之后选择实体

最后配置返回的值

逻辑发布

点击发布

修改班级列表的数据源为逻辑

再次预览,数据可以全部展示

进阶版(增加专业管理功能)

领域模型更新

同理新建专业实体,属性为专业名称,然后建立班级和专业之间的 N-1 关联关系,最终领域模型如下图

配置页面

新增专业

参考 1.4.1 小节,搭建如下图所示的新增专业页面,使用单行文本作为输入元素

专业列表

参考 1.4.2,搭建如下图所示的专业列表页面,使用数据表格作为数据容器

新增班级

修改新增班级的页面,新拖入一个下拉框到数据视图中

在右侧属性栏中点击实体属性,点击关联到班级的实体,再选择专业名称这个实体属性,最后点击[选择]按钮。这样就可以在新增/编辑班级信息时,选择班级对应的专业了。

设置应用导航

新增一个导航,名称为”专业列表”,绑定到专业列表页面

学生列表查询逻辑

学生列表想要同时显示其关联的班级,以及班级关联的专业,需要使用逻辑查询实现

新增逻辑

填写逻辑名称后点击保存

添加分页参数

拖入一个参数元件

选择数据类型为实体类型,并选择系统模组里的 page 实体,输出变量名定义为 page(变量名可以根据个人习惯命名)

检索所有学生

拖入一个检索对象到线上如下图所示,

  1. 查询的【源】选择数据库类型,并选择【学生】实体
  2. 范围要配置为【自定义】,页码和页大小如下图所示的表达式配置
  3. 页码:#page.page_num
  4. 页大小:#page.page_size

  1. 定义输出的列表名称为 stu(可根据个人习惯命名),这个 stu 代表了第一步查到的所有学生对象数据的列表

循环查询每个学生的班级和专业

  1. 拖入一个循环元件,如下图所示
  2. 循环类型为遍历循环
  3. 选择 stu 作为循环的列表,即查询 3-3 中检索到的每一个学生
  4. 然后定义循环对象的名称为 s,即在这个循环里的每条学生对象数据(可根据个人习惯命名)

  1. 在循环里依次拖入两个检索对象元件,并点击元件边缘的小圆点在两个元件中间拖出连线,这两个检索对象元件分别用于检索学生关联到的班级,和班级关联到的专业

  1. 配置第一个检索对象,用于检索班级,
  2. 检索的【源】选择【关联】类型,
  3. 选择学生班级关联关系作为关联列表,即查询学生班级关联关系数据。

  1. 将查询结果对象命名为 class,此时这个 class 代表学生_班级数据

  1. 配置第二个检索对象,用于检索班级关联的专业,
  2. 检索的【源】选择【多线关联】类型,
  3. 选择上一步查询到的 class 作为本步骤的主数据变量,
  4. 选择班级专业关联关系作为关联列表,即查询班级专业关联关系数据。

Tips:使用【多线关联】类型,会根据关联关系查询出对应的数据,并赋值到这个对象当中去;使用【关联】类型,仅查询并不赋值。因此这一步查询到班级专业关联数据后,会将其赋值到 class 即学生班级关联数据中,此时 class 包含了学生班级、班级专业这两层关联数据了。

  1. 在两个检索对象后面拖入一个修改对象,选择要修改的对象为 s,也就是学生实体,配置修改值如下图所示,将这个实体的【studentsclass】关联关系更新为上一步的 class,那么【student_sclass】关联关系就包含了学生班级、班级_专业这两层关联数据了。

Tips:注意提交行为要选择无,因为我们只需要查询数据,并不改变数据库里的数据

  1. 配置结束节点
  2. 返回值选择【有值】模式,因为我们要将查询的结果返回。
  3. 数据类型选择【实体集合】,因为我们查询的是所有学生数据,是一个集合。
  4. 实体依旧选择学生实体。
  5. 返回的值配置为#stu。

至此,这条逻辑配置完毕

学生列表页面修改

在上一节配置好了查询学生列表的逻辑,然后需要在学生列表页做一些修改,使用这条逻辑返回的数据作为列表展示。

  1. 数据源模式选择【逻辑】

  1. 选中上一节配置的逻辑

  1. 配置逻辑的入参值,逻辑中有一个参数 page,需要给出参数的值,配置为#searchObject

  1. 添加班级、专业列,参考 1.4.2 小节,将通过关联关系选择班级和专业作为学生列表的列即可。

预览查看页面

  1. 点击预览按钮

  1. 新增专业

  1. 新增班级,注意这里可以选择班级对应的专业

  1. 新增学生,选择学生的班级,然后应用会根据逻辑查询到班级所关联的专业

  1. 查看学生列表,通过逻辑查询到的学生的班级和专业显示在列表中了,如下图