少儿舞蹈小程序8校区信息后台搭建
少儿舞蹈小程序(8)校区信息后台搭建
前言
前述章节我们已经完整介绍了机构基本信息的搭建过程,家长除了了解机构的基本信息,接着就需要了解这家机构有多少个校区,分布在哪里,离家长最近的是哪一家。
为了方便家长了解具体的信息,本篇我们来介绍一下校区后台的搭建过程。
1 创建数据模型
为了管理校区信息,我们需要创建数据模型来管理数据。打开控制台,点击Mysql数据库,点击+号创建数据模型
字段名 | 类型 | 描述 |
---|---|---|
institution_id | 关联关系 | 所属机构ID |
name | 文本 | 校区名称 |
address | 文本 | 详细地址 |
city | 文本 | 城市 |
longitude | 数字 | 经度(用于导航) |
latitude | 数字 | 纬度(用于导航) |
contact_phone | 电话 | 校区电话 |
capacity | 数字 | 容纳学员数 |
status | 枚举 | 状态:1-正常,0-关闭 |
点击添加字段,添加我们的第一个字段,机构ID,为什么要增加这个字段,因为我们录入校区需要知道所属机构是谁。类型选择关联关系,关联到机构表,选择多对一
2 搭建管理页面
数据表创建好了之后,我们就需要搭建后台的管理页面。打开之前创建好的后台应用
点击创建页面
选择表格与表单页模板,选择校区信息表,选择左侧导航布局
切换到页面布局
选择左侧导航布局,选中布局导航,点击添加平级菜单
选择校区信息列表页面,修改菜单的标题和图标
3 传入机构标识
在创建校区信息的时候我们要知道校区关联的是哪一家机构,需要在列表页面上先增加URL参数来接收传入的机构标识。选中页面组件,创建URL参数
输入参数名称
切换到机构列表页面,在操作列添加一个校区的按钮
设置按钮的点击事件,方法选择打开页面
选择校区信息列表页面,传入机构标识
4 新增校区信息
传入机构标识后,在新建的时候我们要打开弹窗,绑定机构信息。选中页面组件,添加弹窗组件
在弹窗内容里添加表单容器组件,选择校区信息表
选择机构ID组件,绑定选中值
绑定URL参数
选中表单容器组件,点击组件内置方法,在表单提交成功时新增方法
添加关闭弹窗
在弹窗关闭成功时,继续添加方法,刷新表格
选择弹窗组件,关闭弹窗默认打开
关闭显示底部按钮
选择新建按钮,更改默认配置的打开页面方法,修改为打开弹窗
最终效果
点击实时预览按钮
点击机构列表的校区按钮
点击校区列表的新建按钮
在弹窗中录入校区信息即可
总结
本篇我们手把手带着大家搭建了校区管理的后台功能,从创建数据表,根据表自动生成页面,到页面之间的数据传递。后台功能搭建总体上还是非常简单的,无需写任何代码即可完成,下一篇我们介绍一下首页机构信息的展示功能搭建,敬请期待。