培训报名小程序报名功能开发

目录

  • 1 创建页面
  • 2 新建URL参数
  • 3 课程详细信息
  • 4 报名数据源创建
  • 5 报名信息功能开发
  • 6 设置页面跳转
  • 7 最终实现的效果
  • 总结

在培训报名小程序中,我们已经开发了首页和列表页。在列表页点击报名时就跳转到报名页面,先看我们的原型
在这里插入图片描述
报名页分为两个部分,上半部分是展示课程的详细信息,下半部分是具体的提交信息。本篇就介绍一下报名页面功能的开发

1 创建页面

开发功能的时候先需要创建页面,打开我们的应用,点击创建页面的图标,创建我们的报名页
在这里插入图片描述
在这里插入图片描述

2 新建URL参数

因为需要展示课程的详细信息,我们需要传入课程的数据标识。选中页面,创建一个参数
在这里插入图片描述
在这里插入图片描述

3 课程详细信息

要展示课程的详细信息,我们用到了数据详情组件,从右侧的组件区域拖入一个数据详情组件
在这里插入图片描述
数据模型需要选择我们的培训内容数据源,设置我们的数据筛选,让数据标识等于我们的URL参数
在这里插入图片描述
然后删掉多余的组件
在这里插入图片描述

4 报名数据源创建

要想存储用户提交的信息,需要创建数据源,切换到数据源创建视图,我们添加一个报名的数据源
在这里插入图片描述
输入数据源的名称报名信息
在这里插入图片描述
点击编辑,进入字段添加视图
在这里插入图片描述
点击添加字段
在这里插入图片描述
先添加姓名,字段类型选择文本
在这里插入图片描述
性别的话我们选择枚举类型,需要创建一个选项集,点击立即创建
在这里插入图片描述
在这里插入图片描述
输入身份证的字段
在这里插入图片描述
输入电话号码的字段
在这里插入图片描述
输入工作单位字段
在这里插入图片描述
因为报名和培训内容是一个一对多的关系,需要创建一个所属培训内容的字段,类型选择关联关系,和培训内容进行关联
在这里插入图片描述
为了区分数据权限,我们还需要增加一个openid的字段
在这里插入图片描述
这样数据源就创建好了
在这里插入图片描述

5 报名信息功能开发

第二部分我们要让用户输入报名需要的具体数据,微搭使用表单容器组件让用户输入数据,拖入一个表单容器组件,数据模型选择报名信息
在这里插入图片描述
这里要注意的是培训内容需要设置默认值,我们绑定为URL参数
在这里插入图片描述
openid要绑定我们的系统变量,从当前用户里选择
在这里插入图片描述

6 设置页面跳转

报名信息页面设置好之后,需要让列表页可以跳转到报名页,我们切换回列表页,给数据绑定点击事件,动作选择打开页面,然后传入我们的数据标识
在这里插入图片描述
在这里插入图片描述

7 最终实现的效果

在这里插入图片描述

总结

我们本篇介绍了报名信息功能的开发,涵盖了数据源的创建、数据详情、表单容器组件的使用,以及页面跳转参数的传递。低代码的开发特点是以组件为基础,设置属性、设置样式、设置事件。只要掌握了基本要领就可以按照自己的需要开发出软件来,如果感兴趣照着教程试一下吧。

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

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

相关文章

ABAQUS启动GPU加速计算

文章目录 系统说明CUDA安装安装cuDNNABAQUS设置Lamb波压电仿真 系统说明 基于笔记本电脑,RTX4060,win11系统。 ABAQUS的有限元求解器是基于CPU的,但是它也支持使用GPU进行加速计算。仅支持隐式求解器standard。显示求解器explicit不能用。 …

Golang之路---04 并发编程——WaitGroup

WaitGroup 为了保证 main goroutine 在所有的 goroutine 都执行完毕后再退出,前面使用了 time.Sleep 这种简单的方式。 由于写的 demo 都是比较简单的, sleep 个 1 秒,我们主观上认为是够用的。 但在实际开发中,开发人员是无法…

【大数据】Flink 详解(二):核心篇 Ⅰ

Flink 详解(二):核心篇 Ⅰ 14、Flink 的四大基石是什么? ​ Flink 的四大基石分别是: Checkpoint(检查点)State(状态)Time(时间)Window&#xff…

《面试1v1》ElasticSearch架构设计

🍅 作者简介:王哥,CSDN2022博客总榜Top100🏆、博客专家💪 🍅 技术交流:定期更新Java硬核干货,不定期送书活动 🍅 王哥多年工作总结:Java学习路线总结&#xf…

AWS多账户单点登录 IAM Identity Center(AWS SSO)

需求场景 多个aws账户,登陆麻烦且不安全,SSO单点功能并且外部身份提供者 — 如果您要管理外部身份提供者(IdP)(例如 Okta 或 Active Directory)中的用户。 官方文档:https://docs.aws.amazon.c…

Linux命令200例:cd用于改变当前工作目录(常用)

🏆作者简介,黑夜开发者,全栈领域新星创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 &…

神策数据桑文锋:三引擎赋能保险行业数字化客户经营

伴随着市场环境的变化,神策数据围绕数字化客户经营的思考也在不断迭代。 移动互联网时代是流量红利的时代,企业常用低成本的方式进行获客,“增长黑客”的概念大范围传播;数字化转型时代是触点红利的时代,要求“全渠道&…

【沁恒蓝牙mesh】CH58x USB功能开发记录(一)

本文主要介绍基于【沁恒蓝牙mesh】CH58x USB功能,结合SDK提供的代码包分析USB的基本常识 【沁恒蓝牙mesh】CH58x USB功能开发记录(一) 1. USB基本常识1.1 **USB 设备类别:**1.2 **USB设备实现方法:**1.3 **CDC设备&…

Vue2:组件高级(下)

Vue2:组件高级(下) Date: May 25, 2023 Sum: 自定义指令、插槽、商品列表、动态组件 目标: 自定义指令 基础概念: 概念: 内置指令:vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。…

Unity之获取用户地理位置

1.直接利用三方API获取: 1.1 利用bilibili的api 【未知稳定性】 public void Awake() {StartCoroutine(GetLocationInfoNew());}/// <summary>/// 利用bilibili的接口通过ip直接获取城市信息/// </summary>IEnumerator GetLocationInfoNew() {//UnityWebRequest …

Java【抽象类和接口】(2)【浅拷贝、深拷贝、object类】

一、Clonable 接口和深拷贝 1.clone接口的使用 注意以下几个点&#xff1a; import javax.jws.soap.SOAPBinding;class Person implements Cloneable{public String name;public int age;public Person(String name, int age) {this.name name;this.age age;}Overridepublic…

Redis探索之旅

目录 今日良言&#xff1a;有志者自有千计万计&#xff0c;无志者只感千难万难 一、简介 二、Redis的安装 三、Redis的简单使用 四、Redis相关知识点 1.缓存分类 2.五大基本数据类型使用 3.持久化 4.常见面试题 今日良言&#xff1a;有志者自有千计万计&#xff0c;无…

正运动亮相2023半导体设备材料与核心部件展示会,助力半导体产业高速高精应用

■展会名称&#xff1a; 第11届&#xff08;2023&#xff09;半导体设备材料与核心部件展示会 ■展会日期 2023年8月9日-11日 ■展馆地点 无锡太湖国际博览中心A6馆 ■展位号 A6-A361 正运动技术&#xff0c;作为国内领先的运动控制企业&#xff0c;将于2023年8月9日参加…

Visual Studio 2022安装教程(英文版)

文章目录 1.下载安装 1.下载 官网地址&#xff1a;https://visualstudio.microsoft.com/zh-hans/vs/ 选择第一个社区版本&#xff1a;Community 2022 安装 1.将下载好的文件保存到桌面&#xff0c;双击点开 2.等待visual studio installer配置好 3.点击安装后会来到配件选…

搭建本地开发服务器

搭建本地开发服务器 :::warning 注意 在上一个案例的基础上添加本地开发服务器&#xff0c;请保留上个案例的代码。如需要请查看 Webpack 使用。 ::: 搭建本地开发服务器这一个环节是非常有必要的&#xff0c;我们不可能每次修改源代码就重新打包一次。这样的操作是不是太繁琐…

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑 现在想对一个接口做性能测试&#xff0c;需要测试它多个线程并发下的调用 1.新建测试计划和线程组 略 2.新建http接口 一个完整的http接口包含请求头和请求&#xff0c;这里就需要两个组件&#xff1a;HTTP request、HT…

【iOS】RunLoop

前言-什么是RunLoop&#xff1f; 什么是RunLoop? 跑圈&#xff1f;字面上理解确实是这样的。 Apple官方文档这样解释RunLoop RunLoop是与线程息息相关的基本结构的一部分。RunLoop是一个调度任务和处理任务的事件循环。RunLoop的目的是为了在有工作的时候让线程忙起来&#…

ChatGPT实战:创业咨询,少走弯路,少踩坑

用九死一生形容创业再适合不过&#xff0c;不过一旦成功回报也很诱人&#xff0c;这也是为什么那么多人下场创业。纸上得来终觉浅&#xff0c;绝知此事要躬行&#xff0c;创过业的人都知道其中的心酸&#xff0c;而他们也建议你去创业&#xff0c;因为那真不是一般人能干的事。…

力扣17(电话号码中的字符组合)

题目表述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例1 输入&#xff1a;digits "23" 输出&#xff1…

SpringBoot集成百度人脸识别实现登陆注册功能Demo(二)

前言 上一篇SpringBoot集成百度人脸demo中我使用的是调用本机摄像头完成人脸注册&#xff0c;本次demo根据业务需求的不同我采用文件上传的方式实现人脸注册。 效果演示 首页 注册 后端响应数据&#xff1a; 登录 后端响应数据&#xff1a; 项目结构 后端代码实现 1、Bai…