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

前言

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

为了方便家长了解具体的信息，本篇我们来介绍一下校区后台的搭建过程。

1 创建数据模型

为了管理校区信息，我们需要创建数据模型来管理数据。打开控制台，点击Mysql数据库，点击+号创建数据模型

输入模型的名称和标识，校区信息表 (campuses)

为了正确的搭建出数据模型，我们先设计一下表结构

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

点击添加字段，添加我们的第一个字段，机构ID，为什么要增加这个字段，因为我们录入校区需要知道所属机构是谁。类型选择关联关系，关联到机构表，选择多对一

继续添加字段，增加校区名称，类型选择文本

继续添加字段，添加详细地址，类型选择文本

继续添加字段，添加城市，类型选择文本

继续添加字段，添加经度，类型选择数字

继续添加字段，添加纬度，类型选择数字

继续添加字段，添加校区电话，类型选择电话

继续添加字段，添加容纳学员数，类型选择数字

继续添加字段，添加状态，类型选择枚举

枚举值设置为，正常、关闭

选择读取全部数据，修改本人数据权限，点击创建完成表结构的创建

2 搭建管理页面

数据表创建好了之后，我们就需要搭建后台的管理页面。打开之前创建好的后台应用

点击创建页面

选择表格与表单页模板，选择校区信息表，选择左侧导航布局

切换到页面布局

选择左侧导航布局，选中布局导航，点击添加平级菜单

选择校区信息列表页面，修改菜单的标题和图标

3 传入机构标识

在创建校区信息的时候我们要知道校区关联的是哪一家机构，需要在列表页面上先增加URL参数来接收传入的机构标识。选中页面组件，创建URL参数

输入参数名称

切换到机构列表页面，在操作列添加一个校区的按钮

设置按钮的点击事件，方法选择打开页面


选择校区信息列表页面，传入机构标识

4 新增校区信息

传入机构标识后，在新建的时候我们要打开弹窗，绑定机构信息。选中页面组件，添加弹窗组件

在弹窗内容里添加表单容器组件，选择校区信息表

选择机构ID组件，绑定选中值

绑定URL参数

选中表单容器组件，点击组件内置方法，在表单提交成功时新增方法

添加关闭弹窗

在弹窗关闭成功时，继续添加方法，刷新表格

选择弹窗组件，关闭弹窗默认打开

关闭显示底部按钮

选择新建按钮，更改默认配置的打开页面方法，修改为打开弹窗

最终效果

点击实时预览按钮

点击机构列表的校区按钮

点击校区列表的新建按钮

在弹窗中录入校区信息即可

总结

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