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

网站开发人员的水平wordpress听说对百度不友好

网站开发人员的水平,wordpress听说对百度不友好,网站建设预算表制作,青岛网站建设加王道下拉目前首页的功能我们已经搭建好了,当用户点击某个服务内容的时候要跳转到详情页,详情页需要展示服务的各类信息,难点是在规格切换的时候价格也要跟上有变化。 在数据源设计部分我们还没有考虑规格的问题,本篇我们介绍一下服务规格…

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

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

1 调整数据模型

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

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

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

2 搭建后台功能

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

3 和服务项目联动

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

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

4 配置服务内容操作列

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

5 搭建新建服务规格页面

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

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

6 整体效果

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

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

总结

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

http://www.dtcms.com/a/541259.html

相关文章:

  • 中国网站空间西安营销策划推广公司
  • 【AI工具】dify智能体-Kimi-K2+Mermaid ,一键生成系统架构图
  • 如何利用代理 IP 构建分布式爬虫系统架构?
  • 拿别的公司名字做网站凡科网站怎么修改昨天做的网站
  • Gin 框架中路由的底层实现原理
  • 公司网站开发费进什么费用利用小米路由器mini做网站
  • h5游戏免费下载:飞机炸弹?
  • 【c++ qt】QtConcurrent与QFutureWatcher:实现高效异步计算
  • puppeteer生成PDF实践
  • Windows桌面添加我的电脑
  • 响应式网站和非响应式网站的区别wordpress 兼容php7
  • 03.OpenStack界面管理
  • 深度学习与大模型完全指南:从神经网络基础到模型训练实战
  • 神经网络发展【深度学习】
  • 类似红盟的网站怎么做阿里巴巴官网登录
  • 自创字 网站php开源网站管理系统
  • Linux Shell 中静默登录另一台机器并执行SQL文件
  • Python 实战:Web 漏洞 Python POC 代码及原理详解(1)
  • 前端学习之八股和算法
  • dataonline.vn免费Web容器的使用
  • 进制转换器可视化
  • 第六部分:VTK进阶(第176章 高速等值面vtkFlyingEdges3D)
  • VSCode + Copilot
  • 网站后台管理系统权限个人品牌网站设计
  • 推送报错403怎么办?vscode推送项目到github
  • 【Linux专栏】多层变量的重定向赋值
  • 建设一个网站主要受哪些因素的影响因素设计得好的网站推荐
  • 外综服网站开发h5手机网站建设
  • Promise手写实现
  • keep-alive | vue 中的 keep-alive 和 http中 的 Connection: keep-alive 共同点 和 区别