家政维修平台实战11搭建服务规格

article/2025/7/28 23:05:52

目前首页的功能我们已经搭建好了,当用户点击某个服务内容的时候要跳转到详情页,详情页需要展示服务的各类信息,难点是在规格切换的时候价格也要跟上有变化。
在这里插入图片描述

在数据源设计部分我们还没有考虑规格的问题,本篇我们介绍一下服务规格功能的一个具体搭建的过程。

1 调整数据模型

目前服务项目表只是搭建了基础字段,还没有和规格进行关联。一个服务项目可能会有多种规格,可以考虑在服务内容下增加一个子表,叫服务规格表

创建我们的表,创建第一个字段,服务内容ID,类型选择关联关系,关联到我们的服务项目表

在这里插入图片描述
创建第二个字段,规格类型
在这里插入图片描述
创建第三个字段,规格值
在这里插入图片描述
依次添加其余字段
在这里插入图片描述

2 搭建后台功能

表创建好之后,需要提供后台维护数据的功能。打开我们的后台应用,点击创建页面的图标
在这里插入图片描述
选择表格与表单页模板,选择我们的服务规格表,选择左侧导航布局
在这里插入图片描述
切换到页面布局
在这里插入图片描述
切换到左侧导航布局,在属性面板点击添加平级菜单
在这里插入图片描述
选择服务规格列表
在这里插入图片描述
调整服务规格的菜单名称和图标
在这里插入图片描述

3 和服务项目联动

我们的服务规格是从服务项目里添加的,需要获取到从服务项目传递的数据标识,因此需要创建一个URL参数来进行接收。

选择页面组件,创建URL参数
在这里插入图片描述
在这里插入图片描述
选中数据表格,设置筛选条件,然我们的服务项目ID等于我们的URL参数
在这里插入图片描述
排序字段设置为规格类型,升序
在这里插入图片描述
筛选器勾选规格类型、规格值、状态
在这里插入图片描述

4 配置服务内容操作列

规格功能搭建好之后,需要给服务内容的操作列增加一个按钮,叫服务规格,按钮的类型选择链接
在这里插入图片描述
设置点击事件,打开我们的服务规格列表页面
在这里插入图片描述
在这里插入图片描述
打开我们的服务规格列表页,并且传入当前表格所在行的数据标识
在这里插入图片描述

5 搭建新建服务规格页面

当我们在服务规格列表页面点击新建的时候,默认的功能是继续打开新建页面,这样跳转的就比较多了,我们通过弹窗进行替代

选中页面组件,添加弹窗
在这里插入图片描述
在弹窗内容下添加表单容器,右侧数据模型选择服务规格
在这里插入图片描述
选择服务项目ID,设置选中值
在这里插入图片描述
绑定为我们的的URL参数,这样新建的时候就会默认选中传入的服务项目的数据
在这里插入图片描述
关闭弹窗的默认打开状态
在这里插入图片描述
选择新建按钮,配置点击事件,修改为打开弹窗
在这里插入图片描述

6 整体效果

点击服务项目菜单,可以看到操作列多了一个服务规格的按钮

在这里插入图片描述
点击服务规格进入服务规格列表页面
在这里插入图片描述
点击新建,打开弹窗
在这里插入图片描述
自动填充了服务项目ID,可以录入具体的规格信息

总结

本篇我们讲解了服务规格的搭建过程,主要体现了数据设计的表拆分原则,将不同的信息拆分到不同的表中,方便数据维护和扩展。


http://www.hkcw.cn/article/jxZKMwXvao.shtml

相关文章

【创新实训个人博客】实现了新的前端界面

我们的项目还需要ppt展示和文案展示 实现了新的html页面 对接口进行测试示例 启动app.py和aippt部分 使用postman发送请求测试大模型api 后端命令行返回

使用lighttpd和开发板进行交互

文章目录 🧠 一、Lighttpd 与开发板的交互原理1. 什么是 Lighttpd?2. 与开发板交互的方式? 🧾 二、lighttpd.conf 配置文件讲解⚠️ 注意事项: 📁 三、目录结构说明💡 四、使用 C 编写 CGI 脚本…

【无标题】安富莱V5程序移植到原子探索者F4控制板带TFT LCD显示屏

安富莱V5控制板用的控制器是STM32F407IGT, 原子探索者用的控制器是STM32F407ZGT6. 手里有原子探索者主控板2.8寸TFT LCD屏,需要把安富莱程序用于原子探索者硬件来运行和显示,经过一番折腾,成功运行。 省了安富莱的硬件&#xff0c…

【从0带做】基于Springboot3+Vue3的反炸宣传网站

大家好,我是武哥,最近给大家手撸了一个基于SpringBoot3Vue3的反炸宣传网站,可用于毕业设计、课程设计、练手学习,系统全部原创,如有遇到网上抄袭站长的,欢迎联系博主~ 资料获取方式 https://www.javaxm.c…

git 如何解决分支合并冲突(VS code可视化解决+gitLab网页解决)

1、定义:两个分支修改了同一文件的同一行代码,无法自动决定如何合并代码,需要人工干预的情况。(假设A提交了文件a,此时B在未拉取代码的情况下,直接提交是会报错的,此时需要拉取之后再提交才会成功&#xff…

大规模、高规格、全品类,2025郑州台球展览会,8月启幕

-同聚中原共赢未来,42000㎡的大型台球盛会,将在8月15-17日,在郑州中原国际会展中心启幕,期待台球企业、品牌和买家客户届时参与。全称:壹肆柒2025中国(郑州)国际台球产业博览会,同期…

学习STC51单片机23(芯片为STC89C52RCRC)

每日一言 成功的路上从不拥挤,因为坚持的人不多,你要做那个例外。 通过单片机发指令给ESP8266进行通信 通信原理(也是接线原理) 代码如下 代码解释一下,因为我们的指令是字符数组(c语言没有字符串的概念),…

Roller: 抽奖系统测试的幕后剧本-测试报告

抽奖系统 - 测试报告 项目名称:抽奖系统 测试人员:LlvZi 测试时间:2025年5月25 - 2025年6月1 一、项目概述 该项目是一个操作简便、安全可靠的抽奖系统 。主要业务是抽奖,并支持管理员管理用户、奖品和抽奖活动,以配…

智语心桥:当AI遇上“星星的孩子”,科技如何点亮沟通之路?

目录: 引言:当科技的温度,遇见“星星的孩子”“智语心桥”:一座为孤独症儿童搭建的AI沟通之桥核心技术探秘:AI如何赋能“读心”与“对话”?个性化魔法:AI如何实现“千人千面”的精准干预?应用场景畅想:从家庭到机构,AI的全方位支持为什么是“智语心桥”?——价值、可…

c++学习之---模版

目录 一、函数模板: 1、基本定义格式: 2、模版函数的优先匹配原则: 二、类模板: 1、基本定义格式: 2、类模版的优先匹配原则(有坑哦): 3、缺省值的设置: 4、ty…

GESP2024年3月认证C++二级( 第三部分编程题(1)乘法问题)

参考程序&#xff1a; #include <iostream> // 引入输入输出库 using namespace std; // 使用标准命名空间&#xff0c;简化代码int main() {int n; // 存储输入的数字个数cin >> n; // 读入 nlong long product 1; // 用 long long 存…

NX811NX816美光颗粒固态NX840NX845

NX811NX816美光颗粒固态NX840NX845 美光NX系列固态硬盘颗粒深度解析&#xff1a;技术、性能与市场全景透视 一、技术架构与核心特性解析 1. NX811/NX816&#xff1a;入门级市场的平衡之选 技术定位&#xff1a;基于176层TLC&#xff08;Triple-Level Cell&#xff09;3D NAN…

6、运算放大器—共模抑制比(七)

目录 1、共模抑制比&#xff08;CMRR&#xff09;的定义 2、共模误差推导 3、电阻对共模误差的影响 4、参数特性 运算放大器&#xff08;运放&#xff09;的共模抑制比&#xff08;Common-Mode Rejection Ratio, CMRR&#xff09;是衡量其抑制共模信号能力的关键参数&…

“日本7月5日末日论”疯传 漫画预言引发社会焦虑

最近,网上关于日本“末日论”的讨论引起了广泛关注。据说2025年7月5日日本将遭遇毁灭性灾难,三分之一的国土会被海水吞没,连中国游客都忙着退酒店改行程。这一说法源自30年前的一部漫画——《我所看见的未来》,作者自称梦见了未来。漫画家龙树谅曾“预言”过2011年的东日本…

卢伟冰:竞争从来不是小米面临的挑战 更重视内部优化与用户距离

小米集团发布第一季度财报后,总裁卢伟冰与投资人进行了深入交流。面对投资人关于小米未来挑战的问题,卢伟冰提出了两点看法。他指出,随着小米业务规模和组织规模的扩大,公司需要确保不偏离其价值观,并保持与用户的紧密联系。同时,小米的管理体系也需要不断升级,以匹配业…

郑钦文将第8次对阵萨巴伦卡 再战老对手

在2025年法网女单1/8决赛中,头号种子萨巴伦卡以7-5和6-3的比分击败阿尼西莫娃,顺利晋级八强。这已经是萨巴伦卡连续第三年进入法网八强,并且她在最近参加的十个大满贯赛事中都至少闯入了八强。接下来,萨巴伦卡将与中国选手郑钦文交手。两人此前已经有过七次对决,郑钦文仅在…

DeepSeek R1 重磅升级,天工超级智能体 App 上线,Claude 解锁语音新体验!| AI Weekly 5.26-6.1

&#x1f4e2;本周AI快讯 | 1分钟速览&#x1f680; 1️⃣ &#x1f9e0; DeepSeek R1-0528 重磅升级 &#xff1a;推理能力接近 o3 和 Gemini 2.5 Pro&#xff0c;AIME 2025 数学测试准确率从 70% 飙升至 87.5%&#xff0c;幻觉率降低 45-50%。 2️⃣ &#x1f50d; 阿里通义…

亚马逊FBA新规下:1个模型算准补货量,自动预警断货危机

随着亚马逊对库存管理日趋严格&#xff0c;尤其是近期FBA库存限制政策的频频调整&#xff0c;越来越多卖家开始重视智能补货的重要性。断货不仅会影响销量&#xff0c;还可能导致排名下降甚至失去黄金购物车。如何在FBA新规下精准补货、避免资金积压或断货风险&#xff1f;答案…

电工基础【3】星形(Y) 和 三角形(△) 电路切换

05 星三角形启动 (星三角启动) 1、电机星形(Y)的工作原理 2、电机三角形(△)的工作原理 3、电机星三角形启动电气原理图的讲解 4、时间继电器的讲解 -----小记----- 星三角也是很经常用&#xff0c;是很经典电路。 好&#xff0c;我们讲这个课之前的话&#xff0c;我们先了…

JS基础3—定时器

定时器目录 定时器周期定时器延迟定时器 定时器实践转盘旋转动画轮播图实现 定时器 周期定时器 setInterval() 每隔指定时间重复执行回调函数 const intervalId setInterval(callback, interval, [arg1], [arg2], ...);参数&#xff1a; callback&#xff1a;要执行的函数…