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

目录

  • 前言
  • [1 创建数据模型](#1 创建数据模型)
  • [2 搭建管理页面](#2 搭建管理页面)
  • [3 传入机构标识](#3 传入机构标识)
  • [4 新增校区信息](#4 新增校区信息)
  • 最终效果
  • 总结

前言

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

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

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参数

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

添加关闭弹窗

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

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

关闭显示底部按钮

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

最终效果

点击实时预览按钮

点击机构列表的校区按钮

点击校区列表的新建按钮

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

总结

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

相关推荐
巨神峰SEO14 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰15 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐15 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐15 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蒙奇·D·路飞-17 小时前
2025-10-16-TH 开源框架JeecgBoot Pro搭建流程
低代码
weixin_lynhgworld18 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
葡萄城技术团队19 小时前
活字格低代码平台:本地独立部署与数据备份恢复的企业级实践方案
低代码
计算机徐师兄19 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张19 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
云霄IT20 小时前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序