当前位置: 首页 > news >正文

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

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

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

1 调整数据模型

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

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

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

2 搭建后台功能

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

3 和服务项目联动

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

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

4 配置服务内容操作列

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

5 搭建新建服务规格页面

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

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

6 整体效果

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

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

总结

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

相关文章:

  • 1、树莓派更换软件下载源
  • 设计模式——状态设计模式(行为型)
  • 恶意软件清理工具,让Mac电脑安全更简单
  • SQL注入攻击的方法与预防
  • C++内存学习
  • 【从零开始学习QT】信号和槽
  • 《P3959 [NOIP 2017 提高组] 宝藏》
  • 系统初步设计方案/系统建设方案
  • C++修炼:位图和布隆过滤器
  • 6、在树莓派上安装 NTP(Network Time Protocol )服务的步骤
  • esp-idf ubuntu环境配置
  • 基于谷歌ADK的智能客服系统简介
  • duilib图片属性中corner属性九宫格拉伸说明
  • 深入了解Vue2和Vue3的响应式原理
  • 线程与进程
  • CppCon 2014 学习:C++ in Huge AAA Games
  • 美业+智能体,解锁行业转化新密码(2/6)
  • C语言进阶--程序的编译(预处理动作)+链接
  • Java实现中文姓名转拼音生成用户信息并写入文件
  • Java求职者面试指南:DevOps技术栈深度解析
  • 一诺网站建设/网络搭建是干什么的
  • 培训型网站 建设方案/网络推广违法吗
  • 网站开发日记/北京整站线上推广优化
  • 有哪些网站是提供设计图片的/网络推广的方法和技巧
  • 58同城如何招聘人才/深圳网站营销seo费用
  • 网站开发 注意事项/友情链接属于免费推广吗