培训报名小程序报名功能完善

目录

  • 1 修改数据源
  • 2 修改表单
  • 3 支付成功时修改状态
  • 4 创建报名成功页
  • 5 最终的效果
  • 总结

目前我们的报名功能已经搭建了一个基础版,后续需要展示用户已经报名的信息,需要添加一个状态来显示用户是否成功付费。

1 修改数据源

打开我们的报名数据源,添加一个支付状态的字段,类型选择枚举
在这里插入图片描述
点击立即创建,添加枚举项
在这里插入图片描述

2 修改表单

状态添加好了之后,我们在报名页,更新一下我们的表单
在这里插入图片描述
选择我们新添加的字段,选中我们的组件,设置默认值,默认我们是待支付
在这里插入图片描述
状态是系统使用,无需向用户展示,切换到样式页签,影藏我们的组件
在这里插入图片描述

3 支付成功时修改状态

在支付页面,我们点击支付按钮的时候修改一下数据的状态。先选择数据源,方法选择更新单条
在这里插入图片描述
查询条件设置为我们的数据标识等于我们的baomingid
在这里插入图片描述
更新的字段的话,让支付状态修改为2
在这里插入图片描述
测试的时候发现提示了类型不匹配
在这里插入图片描述
这是因为我们的枚举值存储的是字符串,而我们目前给的是数字类型,重新输入一下,用引号括起来
在这里插入图片描述

4 创建报名成功页

我们更新成功后跳转到报名成功页面,先需要创建一个页面,点击页面创建的图标
在这里插入图片描述
在这里插入图片描述
页面的话主要是显示报名成功的提示信息,点击返回主页的时候可以返回首页,事件设置如下
在这里插入图片描述
然后回到我们的支付页面,在更新成功后跳转到我们的支付成功页面
在这里插入图片描述

5 最终的效果

在这里插入图片描述

总结

我们本篇主要介绍了通过状态来控制数据,给数据设置状态还是很常见的一个业务场景,在不同阶段将状态修改为不同的值,便于业务流程的运转。当然了现实中支付没有这么简单,通常需要你是企业主体,开通商户号,而且要调用微信支付。

好在微搭开发支付功能也不复杂,只需要创建微信支付的API,在前端调用即可,有需要的同学可以参照官方文档一步步的开发即可。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Docker 和 Streamlit 构建和部署 LangChain 支持的聊天应用程序

文章目录 前言聊天应用程序组件和技术LangChain Python框架开放人工智能模型前端 Streamlit UI使用 Docker 进行部署Docker 优化以实现轻量级和快速构建Docker-compose.yaml 文件基础设施Streamlit 公共云谷歌应用引擎使用 Google Cloud Run 部署应用1.启动服务2. 创建角色并将…

HDFS中的Trash垃圾桶回收机制

Trash垃圾桶回收机制 文件系统垃圾桶背景功能概述Trash Checkpoint Trash功能开启关闭HDFS集群修改core-site.xml删除文件到trash删除文件跳过从trash中恢复文件清空trash 文件系统垃圾桶背景 回收站(垃圾桶)是windows操作系统里的一个系统文件夹&#…

Java版企业电子招标采购系统源码—企业战略布局下的采购寻源tbms

​ 项目说明 随着公司的快速发展,企业人员和经营规模不断壮大,公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境,最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范,以…

Jupyter Notebook 未授权访问远程命令执行漏洞

漏洞描述 Jupyter是一个开源的交互式计算环境,它支持多种编程语言,包括Python、R、Julia等。Jupyter的名称来源于三种编程语言的缩写:Ju(lia)、Py(thon)和R。 Jupyter的主要特点是它以笔记本(Notebook)的形式组织代码…

Effective Java笔记(29)优先考虑泛型

一般来说 ,将集合声 明参数化,以及使用 JDK 所提供的泛型方法,这些都不太困难 。编写自己的泛型会比较困难一些,但是值得花些时间去学习如何编写 。 以简单的(玩具)堆校实现为例 : // Object -…

Android Studio System.out.println()中文乱码

第一步: 打开studio64.exe.vmoptions加入-Dfile.encodingUTF-8 第二步: File-Settings-Editor-File Encodings 把所有的编码格式改为UTF-8 尝试跑一下代码,如果还不行,重启IDE 再试试。

LT8711UXD 是一款高性能双通道 Type-C/DP1.4 至 HDMI2.0 转换器

LT8711UXD 1.描述 LT8711UXD是一款高性能的双车道TypeC/DP1.4到HDMI2.0转换器,设计用于将USB Type-C源或DP1.4源连接到HDMI2.0接收器。LT8711UXD集成了一个DP1.4兼容的接收机,和一个HDMI2.0兼容的发射机。此外,还包括两个CC控制器&#xff0…

在 Linux 上以 All-in-One 模式安装 KubeSphere

官方文档:https://www.kubesphere.io/zh/docs/v3.3/quick-start/all-in-one-on-linux/ 操作系统 最低配置 Ubuntu: 16.04,18.04, 20.04, 22.04 2 核 CPU,4 GB 内存,40 GB 磁盘空间Debian Buste:Stretch 2 核 CPU&am…

前沿分享-无创检测血糖RF波

非侵入性血糖仪,利用射频 (RF) 波连续测量血液中的葡萄糖水平。利用射频波技术连续实时监测血液中的葡萄糖水平,使用的辐射要比手机少得多。 大概原理是血液中的葡萄糖是具有介电特性,一般来说就是介电常数。 电磁波波幅的衰减反映了介质对电…

成功解决Linux下中文乱码问题,CentOS7设置系统字符编码

在linux中,可以使用以下命令查看当前系统的字符编码: echo $LANG 如果不是UTF-8,就会出现中文乱码现象! 解决办法:设置字符编码环境变量为utf-8 1. 打开 ~/.bashrc 或 ~/.bash_profile 文件 vi ~/.bashrc 或 vi ~/.bash_prof…

JAVA Android 正则表达式

正则表达式 正则表达式是对字符串执行模式匹配的技术。 正则表达式匹配流程 private void RegTheory() {// 正则表达式String content "1998年12月8日,第二代Java平台的企业版J2EE发布。1999年6月,Sun公司发布了第二代Java平台(简称为Java2) &qu…

什么是进程、线程、协程

什么是进程? 我们都知道计算机的核心是CPU,它承担了所有的计算任务;而操作系统是计算机的管理者,它负责任务的调度、资源的分配和管理,统领整个计算机硬件;应用程序则是具有某种功能的程序,程序…

IDEA全局设置MyBatis中写SQL语句提示

把这两个设置改成MySQL即可:

IDEA强大的VisualGC插件

前言 开发阶段实时监测,自己的JVM信息,实时可视化 Hotspot JVM 垃圾回收监控工具, 支持查看本地和远程JVM进程, 支持G1 and ZGC算法。 插件安装 在线安装 IntelliJ IDEA 可通过在线安装的方式,安装插件 JDK VisualGC,安装步骤: …

Spring 是如何解决循环依赖问题的?

项目场景: 提示:这里简述项目相关背景: 例如:项目场景:示例:通过蓝牙芯片(HC-05)与手机 APP 通信,每隔 5s 传输一批传感器数据(不是很大) 问题描述 我们都知道,如果在代码中,将两个…

WIN大恒工业相机SDK开发

大恒工业相机SDK开发概览 一、开发环境搭建1、C# 环境配置(VS2019)2、C 环境配置(VS2019)3、python 环境配置(Pycharm) 二、相机二次开发流程三、相机相机属性参数配置四、图像采集单帧采集回调采集 注意事…

65 # 实现 http-server 里的 gzip 压缩

用 zlib 来实现 gzip 压缩 服务端优化都是:压缩 缓存 前端可以通过 webpack 插件进行压缩 gzip 根据替换来实现的,重复率越高,压缩后的结果越小 const zlib require("zlib"); const fs require("fs"); const path …

打开的idea项目maven不生效

方法一:CtrlshiftA(或者help---->find action), 输入maven, 点击add maven projects,选择本项目中的pom.xml配置文件,等待加载........ 方法二:view->tools windows->mave…

条条大路通罗马系列—— 使用 Hiredis-cluster 连接 Amazon ElastiCache for Redis 集群

前言 Amazon ElastiCache for Redis 是速度超快的内存数据存储,能够提供亚毫秒级延迟来支持 实时应用程序。适用于 Redis 的 ElastiCache 基于开源 Redis 构建,可与 Redis API 兼容,能够与 Redis 客户端配合工作,并使用开放的 Re…