家校通小程序实战教程03学生管理

embedded/2024/12/3 2:51:05/

目录

  • 1 创建数据源
  • 2 搭建后台功能
  • 3 设置主列字段
  • 4 批量导入数据
  • 5 设置查询条件
  • 6 实现查询和重置
  • 总结

我们现在已经搭建了班级管理,并且录入了班级口令。之后就是加入班级的功能了。这里分为老师加入班级和学生家长加入班级。

如果是学生家长的话,在加入之后需要选择对应的学生,这里就需要事先将学生的信息录入系统中。本篇我们介绍一下如何管理学生信息。

1 创建数据源

打开我们的管理后台应用,点击云数据库,点击+号创建数据模型
在这里插入图片描述
保持默认,点击下一步
在这里插入图片描述
录入数据源的名称,学生表
在这里插入图片描述
第一个字段我们要添加班级信息,数据类型选择关联关系
在这里插入图片描述
学生和班级是多对一的关系,因为一个班级有多个学生

第二个字段添加学生编号,类型选择数字
在这里插入图片描述
第三个字段添加学生姓名,类型选择文本
在这里插入图片描述
第四个字段添加学生性别,类型选择枚举
在这里插入图片描述
点击立即创建添加枚举项,分为男和女
在这里插入图片描述
字段我们先不添加太多,因为在后续业务的展开过程中会有各种各样的采集表,我们后续再添加其他信息

修改基础权限信息,改为所有人可读,创建者和管理员可写
在这里插入图片描述

2 搭建后台功能

数据源搭建好之后,我们就需要搭建管理功能,切换到可视化开发,点击页面创建的图标
在这里插入图片描述
选择表格与表单模板,右侧选择学生表,布局选择左侧导航布局
在这里插入图片描述
切换到布局模式,选择左侧导航布局,选中导航布局组件,点击添加平级菜单
在这里插入图片描述
选择学生列表
在这里插入图片描述
修改菜单的名称和图标
在这里插入图片描述
点击实时预览让配置生效
在这里插入图片描述

3 设置主列字段

一个个录入学生信息未免比较啰嗦,我们可以使用导入的功能,这里我们添加了关联关系,关联关系在导入的时候需要一个唯一的主列字段,需要我们设置一下班级表

点击云数据库,选中班级表,切换到配置模型,点击编辑字段
在这里插入图片描述
填写班级全称,是否唯一选择是,是否主列选择是
在这里插入图片描述
回到可视化开发,切换到班级列表,选中表格组件,将刚才添加的班级全称添加到列管理里
在这里插入图片描述
我们在录入的时候还没有这个字段,在全局按钮里添加一个按钮,更新一下班级全称字段
在这里插入图片描述
修改一下表格的默认显示数据,我们显示200条记录
在这里插入图片描述
在代码区点击点击新建按钮,创建一个自定义方法
在这里插入图片描述
在这里插入图片描述
输入如下代码

export default async function({event, data}) {const records = $w.table1.recordsfor(const record of records){const grade = app.utils.formatEnum(record.nj, 'nj', app)const classname = record.bjmcconst fullname = grade+classnameconsole.log(fullname)await $w.cloud.callDataSource({dataSourceName: "bjb",methodName: "wedaUpdateV2",params: {// 更新数据data: {bjqc: fullname,},// 筛选内容,筛选内容推荐使用编辑器数据筛选器生成filter: {where: {$and: [{_id: {$eq: record._id, // 更新单条时,推荐传入_id数据标识进行操作},},],},},},});}}

点击更新班级全称按钮,设置点击事件
在这里插入图片描述
选择javascript代码
在这里插入图片描述
选择我们刚刚创建的自定义方法
在这里插入图片描述
更新完毕后我们需要刷新一下表格,看一下更新的结果,在成功时添加一个刷新表格的事件
在这里插入图片描述
在这里插入图片描述
添加完毕后点击按钮,可以看到全称已经更新完毕了
在这里插入图片描述

4 批量导入数据

导入数据需要一个模板,我们可以先点击导出按钮,导出一份数据来
在这里插入图片描述
在这里插入图片描述
打开excel填充好数据
在这里插入图片描述
然后再导入数据
在这里插入图片描述
这样数据就准备好了

5 设置查询条件

如果只是基本字段,我们可以使用筛选器设置,但是有了关联关系就需要我们自己构造一下查询条件

在表格组件上边添加一个网格布局
在这里插入图片描述
第一列我们添加一个下拉单选组件
在这里插入图片描述
在代码区点击点击新建按钮
在这里插入图片描述
选择新建内置数据表查询
在这里插入图片描述
选择班级表,触发方式选择入参变化时自动执行,每页大小设置为200,页面设置为1
在这里插入图片描述
然后点击选项旁边的fx
在这里插入图片描述
选到records节点
在这里插入图片描述
选项名称选择bjqc,选项标识选择_id
在这里插入图片描述
第二列添加单行输入组件,将标题内容修改为学生姓名
在这里插入图片描述
第三列添加下拉单选,选项设置为男和女
在这里插入图片描述
在这里插入图片描述
设置好之后,我们选中列组件,设置PC端列宽为手动调节,设置为4
在这里插入图片描述
按照同样的方法将第二列、第三列也设置一下

设置好之后预览一下,现在字段有点叠加
在这里插入图片描述
我们可以设置字段的宽度,设置为100%
在这里插入图片描述
选中行组件,点击向下添加行
在这里插入图片描述
在新添加行的第三列添加两个按钮,修改按钮的内容分别为重置和查询
在这里插入图片描述
选中列,设置为右对齐
在这里插入图片描述
给重置按钮一点右外边距
在这里插入图片描述
创建三个变量,分别是className、studentName、sex
在这里插入图片描述
将变量绑定到表格组件的数据筛选
在这里插入图片描述

6 实现查询和重置

查询和重置我们分别创建两个自定义方法,查询的时候就把组件的值赋值给我们的自定义变量

export default function({event, data}) {$w.page.dataset.state.className = $w.select1.value$w.page.dataset.state.studentName =$w.input1.value$w.page.dataset.state.sex = $w.select2.value
}

在这里插入图片描述
重置呢,就需要把变量设置为undefined,而且要清除组件的值

export default function({event, data}) {$w.select1.clearValue()$w.select2.clearValue()$w.input1.clearValue()$w.page.dataset.state.className = undefined$w.page.dataset.state.sex = undefined$w.page.dataset.state.studentName = undefined
}

在这里插入图片描述
然后把自定义方法绑定到按钮上
在这里插入图片描述
默认的时候我们要查全部数据,可以再创建一个Load方法,将变量都赋值为undeinfed,绑定到页面的onShow事件即可

$w.page.dataset.state.className = undefined$w.page.dataset.state.sex = undefined$w.page.dataset.state.studentName = undefined

在这里插入图片描述
在这里插入图片描述

总结

我们本篇介绍了学生管理的功能开发,包括数据模型的创建,数据导入以及数据查询。看似一个简单的功能,其实也是需要写不少逻辑的,有时候只是看似简单,复杂度是隐藏在实际的开发中的。


http://www.ppmy.cn/embedded/142487.html

相关文章

python画图plt.close()一直闪烁

解决方法: import matplotlib matplotlib.use(Agg) # 设置后端为 Agg 在Matplotlib中,’后端’(backend)指的是用于实际绘制图形的底层图形库。Matplotlib支持多种后端,如’TkAgg’、’Qt5Agg’、’WXAgg’等&…

小车AI视觉交互--2.颜色跟随

一、实验目标 前面利用了颜色对象在摄像头画面的x,y不同位置通过云台进行跟踪,接下来我们可以在这个基础上修改下,x方向改为车身左右运动进行跟随,然后根据识别的图像外切圆大小进行前进的控制,通过二者叠加来整体控制…

PMP–一、二、三模、冲刺–分类–8.质量管理

文章目录 技巧五、质量管理 一模8.质量管理--质量管理计划--质量管理计划包括项目采用的质量标准,到底有没有满足质量需求,看质量标准即可。6、 [单选] 自项目开始以来,作为项目经理同事的职能经理一直公开反对该项目,在讨论项目里…

OGRE 3D----5. OGRE和QML事件交互

在现代图形应用程序开发中,OGRE(Object-Oriented Graphics Rendering Engine)作为一个高性能的3D渲染引擎,广泛应用于游戏开发、虚拟现实和仿真等领域。而QML(Qt Modeling Language)则是Qt框架中的一种声明式语言,专注于设计用户界面。将OGRE与QML结合,可以充分利用OGR…

faiss库中ivf-sq(ScalarQuantizer,标量量化)代码解读-4

参考内容 参考代码解读3 调试 通过调试跑通ivfsq的流程,记录调试内容: 前面的初始化内容如下: int d 64; // dimensionint nb 100000; // database sizeint nq 10000; // nb of queriesstd::mt19937 rng;std::uniform_real_dist…

VC++网络安全编程范例(12)-PKI编程

PKI(Public Key Infrastructure ) 即"公钥基础设施",是一种遵循既定标准的密钥管理平台,它能够为所有网络应用提供加密和数字签名等密码服务及所必需的密钥和证书管理体系,简单来说,PKI就是利用公钥理论和技…

蓝桥杯备赛笔记(一)

这里的笔记是关于蓝桥杯关键知识点的记录,有别于基础语法,很多内容只要求会用就行,无需深入掌握。 文章目录 前言一、编程基础1.1 C基础格式和版本选择1.2 输入输出cin和cout: 1.3 string字符串简介字符串的基本操作:字…

汽车控制软件下载移动管家手机控车一键启动app

移动管家手机控制汽车系统是一款实现车辆远程智能控制的应用程序‌。通过下载并安装特定的APP,用户可以轻松实现以下功能:‌远程启动与熄火‌:无论身处何地,只要有网络,即可远程启动或熄火车辆,提前预冷或预…