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

会员管理系统实战开发教程04-会员开卡

我们已经用3篇篇幅介绍了会员管理的功能,接着就要开发会员的业务。通常我们开通会员之后需要给会员开通会员卡,一个会员可以有多张会员卡。

在数据源设计的时候,像这种一个会员有多张会员卡的,我们称之为一对多的关系,在微搭中可以通过维护数据源之间的关系来实现。

1 创建会员卡表

打开控制台,找到数据模型,点击新建
在这里插入图片描述
输入数据源名称
在这里插入图片描述
首先添加一个卡号字段,类型选择自动编号
在这里插入图片描述
再添加一个余额字段,类型选择数字
在这里插入图片描述
接着添加开卡日期字段,类型选择日期
在这里插入图片描述
接着添加所属会员字段,类型选择关联关系
在这里插入图片描述

2 修改模型应用

我们新添加数据源之后,要修改我们已经创建的数据模型应用,添加我们刚刚创建的数据源。打开应用,点击添加页面的图标
在这里插入图片描述
选择表格与表单页,选择我们的数据源
在这里插入图片描述
点击新建的时候会报一个错
在这里插入图片描述
我们找到创建的列表页面,重新设置一下新建的事件
在这里插入图片描述
选择会员卡编辑页面,formType输入create
在这里插入图片描述

3 修改操作列

因为我们的业务操作比较多,为了让操作列不那么拥挤,我们需要给一个更多的按钮,点击的时候弹出一个菜单,让用户去选择。

需要修改一下我们的操作列的结构,外层放置一个普通容器,内层再放置一个普通容器,结构如下
在这里插入图片描述
这里要讲一个定位的知识,像我们这种效果,点击的时候弹出一个层,要紧贴着按钮的,我们通常需要用定位来设置。定位有四种选择,静态、相对、绝对、固定。

这里相对和绝对的区别是,相对还保留原来的空间,而绝对不保留原来的空间。具体详细的内容需要查询一下MDN,看一看定位的具体介绍。

我们这里直接讲解设置,外层容器我们设置为相对定位
在这里插入图片描述
内层容器设置绝对定位
在这里插入图片描述
因为页面整体是白色,我们给内层容器设置一点阴影,层级的话点击上级,让弹出的层覆盖住我们的内容
在这里插入图片描述

4 设置弹出层的显示和影藏

样式设置好了之后,就需要考虑如果点击更多的按钮让内层的容器弹出。其实所谓的弹出无非就是让组件显示,再点击一下的时候我们就让组件影藏。

在表格里,我们操作列添加的这些按钮是一份还是多份,多份怎么知道是哪一个被点击呢?

表格因为是循环展示,肯定是多份了,多份会形成一个数组,我们通过组件的下标来区分哪个组件被点击。

思路梳理清楚之后,在代码区+号,创建一个JavaScript方法
在这里插入图片描述
在这里插入图片描述
然后输入如下代码

export default function({event, data}) {console.log(data.target)let index = data.targetlet display = $page.widgets.container2[index].style.displayif(display =="none"){
$page.widgets.container2[index].style = {display:"block"}}else{$page.widgets.container2[index].style = {display:"none"}}}

代码的意思,我们首先从data参数里通过target属性拿到所在行的索引,然后根据索引去组件数组里获取内层容器的显示状态,如果组件是影藏的我们就让他显示,如果是显示的我们就让他影藏

代码写好了之后,给更多图标设置点击事件,并且传入我们的索引
在这里插入图片描述
这里入参使用表达式设置,表达式如下

$w.table1.cell__custom__option.recordIndex

最终的效果

在这里插入图片描述

总结

本篇我们继续完善了我们的系统,创建了会员卡的数据源,并且根据数据源生成了功能。有时候组件的效果不是太全的,我们就需要根据基本组件再扩展一下,会涉及到一定逻辑的编写,但是代码量并不多,主要是思路要梳理正确才可以。

相关文章:

会员管理系统实战开发教程04-会员开卡

我们已经用3篇篇幅介绍了会员管理的功能,接着就要开发会员的业务。通常我们开通会员之后需要给会员开通会员卡,一个会员可以有多张会员卡。 在数据源设计的时候,像这种一个会员有多张会员卡的,我们称之为一对多的关系&#xff0c…...

数据结构(2)

冒泡排序: 1.比较相邻的两个元素。如果前一个元素比后一个元素大,则交换两者位置。 2.对每一对相邻元素做相同工作,从第一对元素到最后一对元素,最后的一个元素就是最大的元素。 for(int ia.length-1;i>0;i--){for (int j 0…...

使用ELK(ES+Logstash+Filebeat+Kibana)收集nginx的日志

文章目录 Nginx日志格式修改配置logstash收集nginx日志引入Redis收集日志写入redis从redis中读取日志 引入FilebeatFilebeat简介Filebeat安装和配置 配置nginx转发ES和kibanaELK设置账号和密码 书接上回:《ELK中Logstash的基本配置和用法》 Nginx日志格式修改 默认…...

TDengine server连接遇到的坑

一、TDengine安装 TDengine目前只有linux版本的server端,安装教程参考 https://zhuanlan.zhihu.com/p/302413259 二、TDengine连接 TDengine连接目前支持两种方式,一种是原生连接,该方法的默认端口号为6030;另一种是REST API连…...

什么是NetDevOps

NetDevOps 是一种新兴的方法,它结合了 NetOps 和 DevOps 的流程,即将网络自动化集成到开发过程中。NetDevOps 的目标是将虚拟化、自动化和 API 集成到网络基础架构中,并实现开发和运营团队之间的无缝协作。 开发运营(DevOps&…...

中小金融机构数字化转型最大的挑战是什么?

中国银保监会办公厅印发的《关于银行业保险业数字化转型的指导意见》强调,银行保险机构要加强顶层设计和统筹规划,科学制定数字化转型战略,统筹推进工作,并从战略规划与组织流程建设、业务经营管理数字化、数据能力建设、科技能力…...

Facebook HiPlot “让理解高维数据变得容易”

在这个全球信息化的时代,数据量呈爆炸式增长,数据的复杂性也是如此。如何有效地处理高维数据并找到隐藏在其中的相关性和模式是一个严峻的挑战。近年来,可视化和可视化分析已被应用于该任务,并取得了一些积极成果。Facebook的新Hi…...

【python】:python新设备环境移植(requirements.txt)

环境移植 condapip conda 你可以使用conda命令来创建一个包含所有已安装包的requirements.txt文件,并将其复制到新电脑上。然后,你可以在新电脑上使用pip命令来安装这些包及其依赖项。 以下是一个示例命令: conda list --export > requ…...

分类预测 | MATLAB实现1D-2D-CNN-GRU的多通道输入数据分类预测

分类预测 | MATLAB实现1D-2D-CNN-GRU的多通道输入数据分类预测 目录 分类预测 | MATLAB实现1D-2D-CNN-GRU的多通道输入数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 结合1D时序-2D图像多模态融合的CNN-GRU故障识别算法,基于一维时序信号和二维图…...

【LeetCode】125. 验证回文串 - 双指针

这里写自定义目录标题 2023-8-24 09:31:12 125. 验证回文串 2023-8-24 09:31:12 最关键的是 注意 题目中的 “字母和数字都属于字母数字字符。” 使用ascii码进行判断就行了 class Solution {public boolean isPalindrome(String s) {int p 0, q s.length() - 1;while (…...

centos7设置java后端项目开机自启【脚本、开机自启】

1.切换目录 cd /etc/init.d/2.编辑脚本 vim wbs-service-start.sh编辑内容 #!/bin/bash # chkconfig: 2345 80 90 # description: auto_runnohup java -jar /usr/java/wbs-service.jar > /dev/null 2>&1 & echo $! > /var/run/wbs-service.pid3.添加进入系…...

亿赛通电子文档安全管理系统 RCE漏洞复现(QVD-2023-19262)

0x01 产品简介 亿赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…...

一文读懂 Nuxt.js 服务端组件

服务端组件在 Web 开发生态系统中变得越来越普遍。传统上,在单页面应用中,即使是服务端渲染的应用,服务端仅与第一次加载相关,之后将由客户端接管。这意味着 Web 应用的每个部分都必须能够在客户端和服务端上渲染。 相反&#xf…...

LeetCode--HOT100题(39)

目录 题目描述:101. 对称二叉树(简单)题目接口解题思路代码 PS: 题目描述:101. 对称二叉树(简单) 给你一个二叉树的根节点 root , 检查它是否轴对称。 LeetCode做题链接:LeetCode-…...

“车-路-网”电动汽车充电负荷时空分布预测(matlab)

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考《基于动态交通信息的电动汽车充电负荷时空分布预测》和《基于动态交通信息的电动汽车充电需求预测模型及其对配网的影响分析》文献模型,考虑私家车、出租车和共用车三类交通工具特性和…...

【核磁共振成像】方格化重建

目录 一、缩放比例二、方格化变换的基础三、重建时间四、方格化核 一、缩放比例 对于笛卡尔K空间直线轨迹数据可直接用FFT重建,而如果K空间轨迹的任何部分都是非均匀取样的 可用DFT直接重建,有时称为共轭相位重建,但此法太慢不实用。把数据再…...

JAVA中时间戳和LocalDateTime的互转

时间戳转LocalDateTime: 要将时间戳转换为LocalDateTime并将LocalDateTime转换回时间戳,使用Java的java.time包。以下是示例代码: import java.time.Instant; import java.time.LocalDateTime; import java.time.ZoneId;public class Times…...

无涯教程-进程 - 创建终止

到现在为止,我们知道无论何时执行程序,都会创建一个进程,并且该进程将在执行完成后终止,如果我们需要在程序中创建一个进程,并且可能希望为其安排其他任务,该怎么办。能做到吗?是的,显然是通过…...

LLMs参考资料第一周以及BloombergGPT特定领域的训练 Domain-specific training: BloombergGPT

1. 第1周资源 以下是本周视频中讨论的研究论文的链接。您不需要理解这些论文中讨论的所有技术细节 - 您已经看到了您需要回答讲座视频中的测验的最重要的要点。 然而,如果您想更仔细地查看原始研究,您可以通过以下链接阅读这些论文和文章。 1.1 Trans…...

LeetCode字符串数组最长公共前缀

编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 “”。 示例 1: 输入:strs [“flower”,“flow”,“flight”] 输出:“fl” 示例 2: 输入:strs [“dog”,“raceca…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

LeetCode 0386.字典序排数:细心总结条件

【LetMeFly】386.字典序排数&#xff1a;细心总结条件 力扣题目链接&#xff1a;https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n &#xff0c;按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...