根据我们的功能需求,创建了下面的菜单信息,对于有子菜单的点击下图中的新建目录即可:
另外,我们还可以点击任意菜单-高级设置来配置菜单的图标、访问权限、关联页面等信息,并可以通过拖拽的方式来改变菜单的顺序:
2.3 表格
表格对很多类似的后台系统来讲都是最重要的部分之一,我们的学生管理系统也不例外。班级、学生管理页都需要表格。在smardaten中,我们可以通过点击顶部的列表按钮来创建表格:
创建完成后,可以点击顶部菜单栏来添加不同类型、来源的列字段数据:
右侧的样式标签页,可对表格的样式精选配置,包括按钮、序号、操作列、分页器等,功能非常的丰富:
待表头数据创建完成后,我们可以点击右上角的生成数据按钮来生成mock数据:
因为我们的设计中不需要行操作栏中有详情按钮,我们可以点击顶部的"按钮配置-行内按钮"来隐藏它:
隐藏后的效果:
2.4 数据资产
可以看到生成的数据是静态数据,我们需要绑定我们实际使用的数据的话就需要使用数据资产这项功能了。
我们首先需要在数据源页面配置我们的数据来源,也就是我们熟知的数据库连接信息:
然后我们在资产采集中配置采集信息就可以对数据源进行采集入库了:
采集完成后就可以在资产列表中找到采集的数据:
点击可查看详细数据信息:
然后我们点击右上角的数据绑定按钮:
对列表字段和映射的资产字段做一个绑定:
绑定完成后,再进行预览就可以看到我们想要的数据了:
2.5 交互操作和表单
现在,我们就需要绑定新建、编辑删除等交互操作了。
新建操作
我们先在资源管理处新增一个表单页面:
然后点击“高级开发-输入”,拖拽我们要使用的组件到编辑区域即可:
还可以在交互页签中设置必填、唯一校验,字符长度限制等操作:
待组件添加完成后,我们点击右上角的数据绑定按钮,将所有组件名称对应的字段映射到对应的资产字段中即可(我们之前class表中不存在系统默认的字段,这个时候我们直接在映射字段中新增即可,点击保存后会自动写入到数据库表中):
绑定完成后,我们回到班级的表格页,点击按钮配置:
点击新增按钮对应的修改图标:
然后再关联我们刚创建的表单页,就可以实现点击新增按钮创建数据了:
编辑操作
很棒的一点是,smardaten会自动帮我们配置好编辑操作我们只需要将编辑按钮绑定好刚才的弹窗页,后续点击行内编辑按钮时,就会自动打开弹窗并回填数据:
删除操作
同样,smardaten也会自动帮我们配置好删除操作,我们直接点击对应行的删除按钮即可实现删除,无需做其他操作:
之后,我们按照上述的操作流程我们再完善科目信息、学生管理信息等页面即可。
对于学生信息这块有点特殊的地方在于,学生信息需要展示班级名称,但学生表中是通过class_id进行关联的,所以我们需要再数据绑定时设置绑定的关联关系就可以拿到我们想要的数据了:
绑定字段
建立关联关系
完成后的结果
学生成绩的关联关系要相对复杂些:
关联完成后的效果如下:
成绩数据往往会很多,而且可能存在学生班级不同单名称相同的情况,这个时候我们就可以加入相应的筛选条件来增加检索效率:
在学生编辑页存在一个新的不一样的功能点:选择班级,这需要我们添加一个下拉框组件来实现:
然后配置好数据来源为我们的资产数据即可,就能很方便的关联实现:
实现后的效果如下:
2.6 图表
我们的数据基本已经准备完成了,这个时候就可以再首页添加一些图表来展示我们的概览数据,比如各班级学生人数统计、学生性别占比等。
对于类似“各班级学生人数统计”这样存在表关联的数据,我们需要在数据分析仪中做:
我们点击“新增-数据分析”进入数据分析编辑页,将两张表的关联关系绑定:
然后点击底部的“+”按钮新增一个工作区:
在工作区中先添加name#class作为X轴,在选择name#student,统计方式设置为“计数”作为Y轴:
然后拖入柱状图就可以实现各班级人数的统计了:
我们可以看到虽然完成了柱状图的绘制,但我们Y轴展示的是“name#student(计数)”,表达的意思不够明确,我们可以点击该字段,然后再点击别名进行修改即可:
这里我修改为了“学生人数”,这样展示就变得更明确了:
收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!