目录

少儿舞蹈小程序8校区信息后台搭建

少儿舞蹈小程序(8)校区信息后台搭建

前言

前述章节我们已经完整介绍了机构基本信息的搭建过程,家长除了了解机构的基本信息,接着就需要了解这家机构有多少个校区,分布在哪里,离家长最近的是哪一家。

为了方便家长了解具体的信息,本篇我们来介绍一下校区后台的搭建过程。
https://i-blog.csdnimg.cn/direct/7ce2fea7d79c4b1a801093d9034f4a82.png

1 创建数据模型

为了管理校区信息,我们需要创建数据模型来管理数据。打开控制台,点击Mysql数据库,点击+号创建数据模型
https://i-blog.csdnimg.cn/direct/55179de3af754a24b760fe0112aa7698.png

字段名类型描述
institution_id关联关系所属机构ID
name文本校区名称
address文本详细地址
city文本城市
longitude数字经度(用于导航)
latitude数字纬度(用于导航)
contact_phone电话校区电话
capacity数字容纳学员数
status枚举状态:1-正常,0-关闭

点击添加字段,添加我们的第一个字段,机构ID,为什么要增加这个字段,因为我们录入校区需要知道所属机构是谁。类型选择关联关系,关联到机构表,选择多对一
https://i-blog.csdnimg.cn/direct/242e97f85703473b876712f2d3f04264.png

2 搭建管理页面

数据表创建好了之后,我们就需要搭建后台的管理页面。打开之前创建好的后台应用
https://i-blog.csdnimg.cn/direct/ba6a35f90cde4fcf8e0f3111f0c5deb4.png
点击创建页面
https://i-blog.csdnimg.cn/direct/b78a039d4fe748af8f6bc33894ecd743.png
选择表格与表单页模板,选择校区信息表,选择左侧导航布局
https://i-blog.csdnimg.cn/direct/1641872bd6ba485a8fdb39294277f85c.png
切换到页面布局
https://i-blog.csdnimg.cn/direct/dc14ea3a600d4c18828e98ebb44bb7bd.png
选择左侧导航布局,选中布局导航,点击添加平级菜单
https://i-blog.csdnimg.cn/direct/fbd014c27c0b4573b3114ff102d44eca.png
选择校区信息列表页面,修改菜单的标题和图标
https://i-blog.csdnimg.cn/direct/4ecc1c02f44a4efabec15254328e573f.png

3 传入机构标识

在创建校区信息的时候我们要知道校区关联的是哪一家机构,需要在列表页面上先增加URL参数来接收传入的机构标识。选中页面组件,创建URL参数
https://i-blog.csdnimg.cn/direct/a451072503e344fab34bbb9ee7ccd596.png
输入参数名称
https://i-blog.csdnimg.cn/direct/d7bd4ed1a05249cfaf0c55c1b448016e.png
切换到机构列表页面,在操作列添加一个校区的按钮
https://i-blog.csdnimg.cn/direct/6ce4641180ec494ab24ead3b4dae2f15.png
设置按钮的点击事件,方法选择打开页面
https://i-blog.csdnimg.cn/direct/0072b120dd954717816da64f9acfab21.png
https://i-blog.csdnimg.cn/direct/df3446b1e0074514b7a19d99c7d0c579.png
选择校区信息列表页面,传入机构标识
https://i-blog.csdnimg.cn/direct/a05e050c515544f1b984db1d6f81ca75.png
https://i-blog.csdnimg.cn/direct/379cd572dff74fd9bc50395c05f8ec68.png

4 新增校区信息

传入机构标识后,在新建的时候我们要打开弹窗,绑定机构信息。选中页面组件,添加弹窗组件
https://i-blog.csdnimg.cn/direct/2ef20439a4d64ea3a08cd4b5934d4376.png
在弹窗内容里添加表单容器组件,选择校区信息表
https://i-blog.csdnimg.cn/direct/c7bff6ad5b11438e875100facbbf2b68.png
选择机构ID组件,绑定选中值
https://i-blog.csdnimg.cn/direct/7755ce84c37147b3a6319d4b3bab8aab.png
绑定URL参数
https://i-blog.csdnimg.cn/direct/a3223e805a574b26918e265bad16882b.png
选中表单容器组件,点击组件内置方法,在表单提交成功时新增方法
https://i-blog.csdnimg.cn/direct/ecc0cb541bd149438b5742f8d2122567.png

添加关闭弹窗
https://i-blog.csdnimg.cn/direct/076b67bc809847f096654ab3eacd52f5.png
在弹窗关闭成功时,继续添加方法,刷新表格
https://i-blog.csdnimg.cn/direct/f53bde1723414ed9b8a8317e2dd8123b.png
选择弹窗组件,关闭弹窗默认打开
https://i-blog.csdnimg.cn/direct/a426e396992c45a4bfdbbf1814eaa3ee.png
关闭显示底部按钮
https://i-blog.csdnimg.cn/direct/48c7781012174b7497f30b02f359f529.png
选择新建按钮,更改默认配置的打开页面方法,修改为打开弹窗
https://i-blog.csdnimg.cn/direct/fbe2f72da1b04c46b757e7c37eecd0a9.png

最终效果

点击实时预览按钮
https://i-blog.csdnimg.cn/direct/7664988715564e598b0132212b30fe79.png
点击机构列表的校区按钮
https://i-blog.csdnimg.cn/direct/5a775659ad8540e5b4033e97c43662c4.png
点击校区列表的新建按钮
https://i-blog.csdnimg.cn/direct/5f905a5ca6b04a97b59dd9a0ea21500f.png
在弹窗中录入校区信息即可
https://i-blog.csdnimg.cn/direct/645d5b0f24cf4831b6ab35c42cb6fe83.png

总结

本篇我们手把手带着大家搭建了校区管理的后台功能,从创建数据表,根据表自动生成页面,到页面之间的数据传递。后台功能搭建总体上还是非常简单的,无需写任何代码即可完成,下一篇我们介绍一下首页机构信息的展示功能搭建,敬请期待。