少儿舞蹈小程序(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参数

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

添加关闭弹窗

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

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

关闭显示底部按钮

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

最终效果

点击实时预览按钮

点击机构列表的校区按钮

点击校区列表的新建按钮

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

总结

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

相关推荐
一枚前端小姐姐1 天前
低代码平台表单设计系统技术分析(实战三)
前端·vue.js·低代码
一枚前端小姐姐1 天前
低代码平台表单设计系统技术分析(实战二)
低代码·架构·前端框架
一枚前端小姐姐1 天前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
麦聪聊数据2 天前
统一 Web SQL 平台如何收编企业内部的“野生数据看板”?
数据库·sql·低代码·微服务·架构
吴声子夜歌2 天前
小程序——布局示例
小程序
luffy54592 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟2 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
小小王app小程序开发2 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序
一叶星殇2 天前
微信小程序请求拦截器踩坑:避免重复刷新 token
微信小程序·小程序