家政预约小程序05活动管理

devtools/2025/1/8 2:34:03/

目录

  • 1 搭建活动管理页面
  • 2 搭建活动规则页面
  • 3 搭建规则新增页面
  • 3 配置规则跳转
  • 4 搭建活动参与记录
  • 总结

上一篇我们介绍了活动管理的表结构设计,本篇我们介绍一下后台功能。

1 搭建活动管理页面

我们一共搭建了三个表,先搭建主表的后台功能。打开我们的后台应用,点击创建页面

在这里插入图片描述
选择表格与表单页模板,右侧选择活动管理数据源,布局选择左侧导航布局
在这里插入图片描述
选中表格组件,设置筛选器
在这里插入图片描述
勾选筛选条件
在这里插入图片描述
切换到布局设计
在这里插入图片描述
选择左侧导航布局,选中布局导航,添加导航菜单,选择活动管理列表页面
在这里插入图片描述

2 搭建活动规则页面

点击创建页面,选择活动规则数据源,自动生成页面
在这里插入图片描述
活动规则的页面是从活动管理页面进入,为此需要传入活动管理的数据标识

选择页面组件,创建URL参数,设置为activityid
在这里插入图片描述
在这里插入图片描述
选择数据表格组件,设置数据筛选
在这里插入图片描述
筛选条件选择所属活动,右侧选择fx
在这里插入图片描述
贴入我们的URL参数
在这里插入图片描述
这样配置之后当打开活动规则的时候就会过滤当前活动下的规则

3 搭建规则新增页面

默认带的新增功能,不能接收我们的活动信息,这里我们用弹窗组件搭建一下新增功能

选中页面,添加弹窗组件
在这里插入图片描述
在弹窗内容里添加表单容器组件,选择活动规则表
在这里插入图片描述
关闭显示底部按钮
在这里插入图片描述
选中所属活动组件,设置选中值
在这里插入图片描述
绑定我们的URL参数
在这里插入图片描述
在这里插入图片描述
现在显示的是活动的数据标识,我们需要显示活动名称,切换到云数据库,设置活动名称为主列字段
在这里插入图片描述
选择表单容器,在成功时我们添加数据表格的刷新事件
在这里插入图片描述
在这里插入图片描述
刷新成功后,关闭弹窗
在这里插入图片描述
选择新建按钮,将点击事件改为打开弹窗
在这里插入图片描述

3 配置规则跳转

切换到活动管理列表页面,我们需要在操作列上增加一个按钮叫规则管理
在这里插入图片描述
当点击按钮的时候,我们要跳转到活动规则页面。选择按钮,设置点击事件
在这里插入图片描述
选择打开页面
在这里插入图片描述
选择我们的活动规则列表页面,点击activityid的fx
在这里插入图片描述
传入我们当前所在行的数据标识
在这里插入图片描述
这样在点击按钮的时候就会把当前所在行的数据标识传入到下一个页面,就可以自动过滤出当前活动的规则了

4 搭建活动参与记录

活动管理搭建好之后,我们搭建一下活动参与记录。点击创建页面,选择活动参与记录数据源
在这里插入图片描述
切换到页面布局,添加我们的活动记录菜单
在这里插入图片描述
到此,我们的后台功能就搭建好了

总结

低代码工具开发后台还是非常方便的,只需要使用模板,选择数据源,配置菜单几步就可以了。这也是可视化搭建的优势,小程序我们通常都配套后台功能,使用自动生成可以节约不少时间,主要精力我们还是放在小程序的部分。


http://www.ppmy.cn/devtools/147910.html

相关文章

uni-data-select文字过长显示省略号问题修复

操作步骤&#xff1a; 下拉框选项文字超过25字符但是未满一行时会出现省略号 预期结果&#xff1a; 满一行再出现省略号而非25字符 实际结果&#xff1a; 满25字符就出现省略号 bug描述&#xff1a; 组件uni-data-select.vue显示修复过此bug <view v-if"current&…

前端笔记:vscode Vue nodejs npm

1 VS Code 终端中默认cmd 默认使用 cmd (Command Prompt), 不使用 PowerShell 解决方式&#xff1a; 【vscode配置】&#xff1a;vscode配置终端为cmd ​ 1 命令面板&#xff08;Ctrlshiftp&#xff09; ​ 2 输入 Terminal:Select Default Profile 之后回车 ​ 3 选择 c…

黑马JavaWeb开发跟学(十四).SpringBootWeb原理

黑马JavaWeb开发跟学 十四.SpringBootWeb原理 SpingBoot原理1. 配置优先级2. Bean管理2.1 获取Bean2.2 Bean作用域2.3 第三方Bean 3. SpringBoot原理3.1 起步依赖3.2 自动配置3.2.1 概述3.2.2 常见方案3.2.2.1 概述3.2.2.2 方案一3.2.2.3 方案二 3.2.3 原理分析3.2.3.1 源码跟踪…

基于Pytorch和yolov8n手搓安全帽目标检测的全过程

一.背景 还是之前的主题&#xff0c;使用开源软件为公司搭建安全管理平台&#xff0c;从视觉模型识别安全帽开始。主要参考学习了开源项目 https://github.com/jomarkow/Safety-Helmet-Detection&#xff0c;我是从运行、训练、标注倒过来学习的。由于工作原因&#xff0c;抽空…

JS 中 json数据 与 base64、ArrayBuffer之间转换

JS 中 json数据 与 base64、ArrayBuffer之间转换 json 字符串进行 base64 编码 function jsonToBase64(json) {return Buffer.from(json).toString(base64); }base64 字符串转为 json 字符串 function base64ToJson(base64) {try {const binaryString atob(base64);const js…

植物大战僵尸杂交版3.0.2版本

更新内容 植物大战僵尸杂交版3.0.2版本的更新内容如下&#xff1a; • 修复BUG&#xff1a; • 游戏内贴图错乱的BUG。 • 无尽模式卡死的BUG。 • 卡牌模仿者的一系列BUG。 • 干扰车可能同时出现多辆的BUG。 • 冒险模式部分关卡无法过关的BUG。 • 新增内容&#xf…

WCH的CH57X的J-LINK的芯片FLASH烧录文件

WCH的CH57X的J-LINK的芯片FLASH烧录文件,需要在 D:\app\Keil_v5\SEGGER\JLink_V616a目录中JLINKDEVICES.XML文件中修改并增加以下信息。同时&#xff0c;需要加入CH57X.FLM文件 <Device> <ChipInfo Vendor"WCH" Name"CH57X" WorkRAMAddr"…

区块链技术为电商API接口带来的数据安全革新

随着科技的飞速发展&#xff0c;数据交互已成为现代社会不可或缺的一部分。在电商领域&#xff0c;数据的高效与安全流通是业务运营的核心。区块链技术作为一种去中心化的分布式账本技术&#xff0c;以其独特的透明性、安全性和不可篡改性&#xff0c;为电商API接口的数据安全带…