会员管理系统实战开发教程03-会员管理功能

news2025/1/13 15:50:56

我们上篇介绍了会员管理的列表页,及新增功能开发。本篇我们继续我们的会员管理功能,介绍一下详情、修改、删除功能。

1 创建详情页

打开控制台,点击创建页面的图标,创建详情页
在这里插入图片描述
在这里插入图片描述

2 数据详情组件

详情页我们也是使用数据容器组件搭建,这里我们选择数据详情组件。往编辑区拖入详情组件
在这里插入图片描述
选择我们的数据模型,组件会自动识别我们的数据源的字段,根据字段的类型来匹配需要的组件
在这里插入图片描述
数据源的字段分为两类,一类是我们自定义的,一类是系统自带的。在详情页我们通常只保留我们自定义的字段,多余的这些系统生成的字段都删掉。删除的时候只需要在左侧大纲树把对应的组件删掉即可
在这里插入图片描述

3 URL传参

在数据详情页,我们在筛选数据的时候,需要根据页面传入的参数来做数据过滤。URL参数要怎么设置呢?在大纲数中选中我们的页面组件,在右侧的属性面板里点击新建URL参数
在这里插入图片描述
新建一个ID参数
在这里插入图片描述

4 绑定筛选条件

URL参数建立后,我们要让我们的数据详情组件知道传入的是哪个参数。选中数据详情组件,设置数据筛选,条件是数据标识等于我们的URL参数
在这里插入图片描述
在这里插入图片描述

5 配置页面跳转

详情页配置好之后,我们要能够从列表页跳转到详情页。在左侧的页面列表,切换到会员列表页面
在这里插入图片描述
选中我们列表的普通容器,设置点击事件
在这里插入图片描述
选择打开页面
在这里插入图片描述
在这里插入图片描述
需要选择我们的会员详情页面,要传入具体的参数,点击参数旁边的fx表达式
在这里插入图片描述

传入我们的数据标识即可

6 配置修改、删除按钮

我们的修改和删除功能,需要在详情页里设置。选中网格布局,向下增加一行
在这里插入图片描述
选中行,列数量修改为2
在这里插入图片描述
然后给列里增加按钮,一个按钮的标题设置为修改,一个按钮的标题设置为删除
在这里插入图片描述

7 修改功能开发

修改功能我们先需要创建一个修改页面
在这里插入图片描述
在修改页面添加表单容器,场景选择更新,数据模型选择会员信息
在这里插入图片描述
修改的时候也需要传入参数,新建一个ID
在这里插入图片描述
表单容器的数据标识,设置为我们的URL参数
在这里插入图片描述
回到详情页,给修改按钮设置事件,打开我们的修改页面,并且传入参数
在这里插入图片描述

8 删除功能开发

删除功能不需要设置页面,给删除按钮设置事件,调用数据源的删除方法,删除成功后返回上一页即可
在这里插入图片描述

总结

本篇我们介绍了详情、修改、删除功能开发。主要是借助数据容器的表单容器及数据详情组件,要熟练掌握URL传参的具体使用,才可以按需搭建出管理页面来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/927156.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RTSP/Onvif视频服务器EasyNVR视频平台微信端出现播放失败的问题解决方案

EasyNVR是基于RTSP/Onvif协议接入的视频平台,具备视频直播监控、录像、检索与回看、存储、国标级联等视频能力,可支持将接入的视频流进行全平台、全终端的分发,包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。 有用户反馈,在…

shopee平台好做吗,有什么优势?

shopee平台提供了一个庞大而活跃的用户群体。作为东南亚地区最受欢迎的购物平台之一,shopee平台吸引了数百万用户每天在该平台上进行交易。这意味着商家可以通过shopee平台获得更大范围和更广泛的曝光机会。无论是刚创业还是已经有一定规模和知名度的企业&#xff0…

最简单的Obsidian图床配置

参考文章: Obsidian 将图片批量上传至图床 Obsidian中图床自动上传设置 前言 配置图床的目的:解决 Obsidian 图片存储问题,一般来说 Obsidian 图片是以本地链接的方式存储在文章当中,当图片移动的时候文章中的图片就会出错。 …

翻倍以链表形式表示的数字

题目: 示例: 思路: 有点相似于:链表相加II,这道题我们仍然有进位,但不同的是,链表相加我们选择了开辟新节点,这道题我们选择反转两次链表,开始一次,结束一次…

能够解决问题的客服电话系统方案

客服电话的应用场景通常是以呼入的电话为主,属于服务性质的更重视服务质量,客服电话方案主要解决呼叫中心运营中的一些问题,下面就来详细了解下。 企业的客服电话通常都是统一的一个热线号码,如:400电话、800电话、95号…

若依Cloud集成Flowable6.7.2

项目简介 基于若依Cloud的Jove-Fast微服务项目,集成工作流flowable(接上篇文章) 若依Cloud集成积木报表 项目地址:https://gitee.com/wxjstudy/jove-fast 后端 新建模块 目录结构如下: 引入依赖 前提:引入依赖之前先配置好maven的setting.xml &…

基于SpringBoot和Vue的前后端分离项目(高校毕业生信息管理平台)

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 基于SpringBoot和Vue的前后端分离项目(高校…

OceanMind海睿思签约常州市建筑科学研究院,打造检验检测行业数字化转型标杆

近日,中新赛克海睿思 与 中国知名综合性建筑研究和科技创新型高科技企业——常州市建筑科学研究院集团股份有限公司(以下简称“建科股份”)达成深度战略合作,为建科股份提供行业领先的数据工程建设服务,携手推进检验检…

视频云存储/安防监控视频AI智能分析网关V3:抽烟/打电话功能详解

人工智能技术已经越来越多地融入到视频监控领域中,近期我们也发布了基于AI智能视频云存储/安防监控视频AI智能分析平台的众多新功能,该平台内置多种AI算法,可对实时视频中的人脸、人体、物体等进行检测、跟踪与抓拍,支持口罩佩戴检…

助力工业物联网,工业大数据之服务域:可视化工具Grafana介绍【三十八】

文章目录 前言08:可视化工具Grafana介绍09:可视化工具Grafana部署10:Grafana集成Prometheus11:Grafana集成MySQL监控 前言 项目所需工具: 链接:https://pan.baidu.com/s/1sIa8nninf2Fz6YqE3vUpqQ?pwd5wr3 提取码&…

mysql数据库管理及增删改查

目录 1、数据库管理 1.1、数据库表的文件 1.1.1、MYD”文件: 1.1.2、“.MYI”文件 1.2、日志: 1.3、mysql 数据库管理 1.3.1、数据库管理命令 1.3.2、数据库列的类型 2、SQL语句 2.1、DDL:数据定义语言,用于创建数据库对…

盖革核辐射检测仪pcba方案设计

核辐射检测仪又可以称为辐射检测仪,根据它的类型可以分为便携式与固定式,两种类型的仪器所应用的领域是不同的。目前市场上存在的辐射报警仪,是一种不带剂量显示功能的仪器,仅有辐射超标报警功能,不能具体显示出它的数…

【PHP】PHP基本语法

1、PHP标记 当解析一个文件时&#xff0c;PHP 会寻找起始和结束标记&#xff0c;也就是 <?php 和 ?>&#xff0c;告诉 PHP 开始和停止解析二者之间的代码。此种解析方式使得 PHP 可以被嵌入到各种不同的文档中去&#xff0c;而任何起始和结束标记之外的部分都会被 PHP…

【VUE】数字动态变化到目标值-vue-count-to

vue-count-to是一个Vue组件&#xff0c;用于实现数字动画效果。它可以用于显示从一个数字到另一个数字的过渡动画。 插件名&#xff1a;vue-count-to 官方仓库地址&#xff1a;GitHub - PanJiaChen/vue-countTo: Its a vue component that will count to a target number at a…

10.Oracle中decode函数

【函数格式】&#xff1a; decode ( expression, condition_01, result_01, condition_02, result_02, ......, condition_n, result_n, result_default) 【函数说明】&#xff1a; 若表达式expression值与condition_01值匹配&#xff0c;则返回result_01&#xff0c;…

XGBoost,NVIDIA是什么

目录 XGBoost 算法层面 什么是 XGBoost GBDT是什么 GBDT中的GB 为何选择 XGBoost&#xff1f; XGBoost 的优势和属性 XGBoost 和数据科学家 为何 XGBoost 在 GPU 上表现更出色 XGBoost RAPIDS GPU 加速的 XGBoost NVIDIA是什么 使用 Spark XGBoost 的 GPU 加速端…

【图像分割】实现snake模型的活动轮廓模型以进行图像分割研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

交换机的4种网络结构

级联方式 这是最常用的一种组网方式&#xff0c;它通过交换机上的级联口&#xff08;UpLink&#xff09;进行连接。级联可以定义为两台或两台以上的交换机通过一定的方式相互连接。根据需要&#xff0c;多台交换机可以以多种方式进行级联。 在较大的局域网例如园区网 ( 校园…

如何解决全彩LED显示屏像素失控问题

全彩LED显示屏像素失控问题可能由多种原因引起&#xff0c;包括电力问题、驱动器问题、数据连接问题、模块故障等。 要解决这些问题&#xff0c;可以采取以下步骤&#xff1a; 检查电源供应&#xff1a; 确保LED显示屏的电源供应稳定&#xff0c;没有电压波动或电源故障。 检查…

【IEEE会议】2023年第三届IEEE数字化社会与智能系统国际学术会议(DSInS 2023)

2023年第三届IEEE数字化社会与智能系统国际学术会议&#xff08;DSInS 2023) 2023 3rd International Conference on Digital Society and Intelligent Systems 由西南交通大学主办&#xff0c;悉尼科技大学、四川大学、中南大学社会计算研究中心、西南财经大学、武汉理工大学…