家校通小程序实战教程04教师管理

1 创建数据源

打开编辑器，切换到云数据库，点击+号创建数据源
在这里插入图片描述
保持默认，点击下一步

输入模型名称教师表

点击添加字段，输入教师名称，类型选择文本

将教师名称设置为主列字段

添加第二个字段，教师性别，类型选择枚举，枚举项可以复用学生性别

添加第三个字段，联系电话，类型选择电话
在这里插入图片描述
添加第四个字段，所教科目，类型选择枚举，选择设置为多选

科目的话可以根据学校开展的科目不同进行具体的设置

添加第五个字段，是否班主任，类型选择布尔值

添加第六个字段，班级，选择关联关系，类型选择多对一
在这里插入图片描述
这里可能涉及到一个教师带多个班级的情况，这就需要设计多对多的关系，我们这个版本先不考虑，因为多对多一个是比较复杂，再一个功能上也需要有很多考虑

字段设置完毕了之后，我们设置一下权限，选择所有用户可读，创建者和管理员可以修改
在这里插入图片描述

2 搭建管理后台

数据源创建好之后，就需要搭建后台功能，打开我们的管理后台，点击页面创建的图标
在这里插入图片描述
选择教师表，左侧导航布局

切换到布局模式，选择左侧导航布局，在右侧点击添加平级菜单

选择我们的教师列表页面

修改菜单的名称，选择图标

回到设计界面，点击实时预览，可以看到我们设置的菜单已经生效
在这里插入图片描述

3 搭建查询条件

我们这里因为有了班级这种关联关系的字段，所以查询条件也需要自己设置一下。低代码的好处可以复制粘贴复用已经设置好的成果，切换到学生列表页面，选中我们的网格布局，复制一下，按ctrl+c就可以
在这里插入图片描述
切换到教师列表页面，选择布局内容组件，按ctr+v进行粘贴

点击网格布局组件，点击鼠标的右键，选择移动到最前

我们要重新设置一下变量，首先添加一个数据表查询变量，查询班级表的信息

选择班级表，方法选择查询多条，查询200条数据
在这里插入图片描述
将第二个字段改为教师姓名

第三个字段改为教师性别

第二行的第一列添加下拉单选组件，设置为所教科目，选项设置为语文、数学、英语、体育、音乐

第二行的第二列添加单行输入组件，修改为联系电话
在这里插入图片描述
然后我们按照字段一一建立自定义变量，对应我们每个查询条件的输入值

创建一个自定义方法用来绑定我们的查询按钮的点击事件

export default function ({ event, data }) {$w.page.dataset.state.className = $w.select1.value$w.page.dataset.state.teacherName = $w.input1.value$w.page.dataset.state.sex = $w.select2.value$w.page.dataset.state.subject = $w.select3.value$w.page.dataset.state.phone = $w.input2.value
}

在这里插入图片描述
再添加一个方法，用来和重置按钮绑定

export default function({event, data}) {$w.page.dataset.state.className = undefined$w.page.dataset.state.sex = undefined$w.page.dataset.state.teacherName = undefined$w.page.dataset.state.subject = undefined$w.page.dataset.state.phone = undefined
}

在这里插入图片描述
选中页面组件，设置onShow事件，选择我们的load的自定义方法

选择重置按钮，绑定我们的reset方法

选择查询按钮，绑定我们的query方法

4 功能测试

搭建好了之后，我们就需要测试相关功能了，测试之前先准备测试数据。在数据表格点击新建按钮，我们加入一些老师
在这里插入图片描述
输入查询条件，点击查询，发现数据没有过滤

这是因为我们的数据表格忘记绑定筛选条件导致的，选中数据表格，我们绑定一下

测试就是将各种场景都覆盖到，然后遇到问题再找出问题的原因进行针对性的解决。有时候开发阶段是发现不了问题的，到了线上的环境需要结合生产日志进行定位。