当前位置: 首页 > 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…...

龙虎榜——20250610

上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...