培训报名小程序实战开发

目录

  • 1 需求描述
  • 2 原型绘制
    • 2.1 首页
    • 2.2 报名列表页
    • 2.3 报名页
    • 2.4 支付页面
    • 2.5 支付成功页面
    • 2.6 我的页面
    • 2.7 我的报名页面
    • 2.8 报名详情页面
  • 3 数据源设计
  • 4 数据源开发
  • 5 创建模型应用
  • 6 录入测试数据
  • 7 创建自定义应用
  • 8 创建页面
  • 总结

经常有人问,低代码学习容易么,普通人也可以开发么。低代码作为提效的开发工具,本身是需要一定的开发基础的,通常需要掌握javascript、css。

如果没有开发基础的普通人,也可以先熟悉低代码的通用开发技能,遇到问题的时候再通过检索来寻求解决方案。但如果希望深入的开发,自学javascript还是有必要的。

本篇就以一个实际的需求为例,我们来拆解一下利用低代码开发小程序需要经过哪些步骤。

1 需求描述

在这里插入图片描述
需求主要是要开发一款培训报名的小程序,要有必要的信息填报的界面,而且需要支付功能,支付完毕后付款人可以查看已经报名的信息。

2 原型绘制

我们拿到需求后是不是要直接进入到开发呢?通常不会,因为需要再细化需求。低代码通常将小程序拆分为页面,页面要区分各个功能区域,我们可以使用原型工具来进行绘制。

按照用户的实际操作流程,我们拆分成如下页面

2.1 首页

在这里插入图片描述
首页是一个功能引导页面,可以进入教师报名的页面或者学员报名的页面

2.2 报名列表页

在这里插入图片描述
报名列表页展示该分类下可以报名的信息,点击报名进入报名页面

2.3 报名页

在这里插入图片描述
报名页需要填报个人信息,点击确认进入到支付页面

2.4 支付页面

在这里插入图片描述
显示具体填写的信息,列出所需费用,点击立即支付拉起支付,付款成功后跳转到支付成功页面

2.5 支付成功页面

在这里插入图片描述
提示支付成功,点击首页可以返回到首页

2.6 我的页面

在这里插入图片描述
点击报名情况跳转到已经报名的列表页面

2.7 我的报名页面

在这里插入图片描述
以列表的形式列出已经报名的信息,显示报名的支付状态,如果未支付,点击按钮跳转到支付页面,如果已经支付,点击按钮跳转到查看页面

2.8 报名详情页面

在这里插入图片描述
查看报名的详细信息

3 数据源设计

我们在拆分数据源的时候要考虑后续数据的维护和程序的扩展,首页是一个分类,目前只有两类。日后可能随着业务的扩展会有多个类目,因此将首页提炼一个分类表,设计如下字段

字段名称字段类型
分类名称文本
分类图标图片
背景色文本

通过首页跳转到报名页,我们可以设计一个培训内容表,字段如下

字段名称字段类型
标题文本
课程介绍文本
报名开始时间日期
报名截止时间日期
缴费金额数字
分类关联关系

我们这里为啥要有一个分类字段呢?因为分类和培训内容是一个一对多的关系,分类是一,培训内容是多。怎么理解一对多呢?一个分类下有多个培训内容,某个培训内容只属于一个分类,这就叫一对多

接着就是报名表了,字段如下

字段名称字段类型
姓名文本
性别枚举
身份证文本
电话号码电话号码
工作单位文本
支付状态枚举
支付时间日期时间
缴费金额数字
培训内容关联关系
openid文本

这里添加了一个openid的字段,在小程序中用户的身份是通过openid来标识的,我们在过滤报名信息的时候通过这个字段就可以进行过滤

4 数据源开发

设计好之后,我们需要建建立数据源,首先创建培训分类数据源

进入到控制台,点击数据模型,点击新建数据模型
在这里插入图片描述
输入数据源的名称,自动生成标识
在这里插入图片描述
点击编辑进入到字段添加视图
在这里插入图片描述
点击添加字段依次添加字段
在这里插入图片描述
在这里插入图片描述
按照同样的方法创建好另外两个数据源
在这里插入图片描述
在这里插入图片描述

5 创建模型应用

作为一套软件来说,必然会对应一套管理后台,主要是给运营和管理人员日常使用。微搭里的管理后台对应着模型应用,打开控制台,创建模型应用
在这里插入图片描述
勾选我们已经创建好的数据源
在这里插入图片描述
会自动帮我们创建好增删改查的页面
在这里插入图片描述
然后点击发布,有两个版本可供选择,体验版和正式版。在开发阶段我们发布成体验版,测试通过后可以发布为正式版。体验版和正式版的数据是隔离的,如果正式使用,数据还需要重新录入一遍
在这里插入图片描述
在下方的红色叹号表明还有没有完成的工作,我们的管理后台是在企业工作台里使用,需要先配置导航菜单,点击前往配置
在这里插入图片描述
点击根据页面一键生成配置
在这里插入图片描述
菜单配置好之后,再次点击发布,将数据源都发布了,最终变为绿色的状态,说明已经配置好了
在这里插入图片描述

6 录入测试数据

在开发小程序之前,我们需要将数据准备好,访问我们刚刚已经发布好的模型应用,录入分类及培训内容
在这里插入图片描述
在这里插入图片描述

7 创建自定义应用

如果我们希望开发小程序,在微搭里对应着自定义应用,打开控制台,点击创建自定义应用
在这里插入图片描述
在这里插入图片描述

8 创建页面

点击页面旁边的图标,创建页面
在这里插入图片描述

在这里插入图片描述
按照我们设计阶段设计的页面依次将页面创建好

在这里插入图片描述

总结

我们本篇以一个报名小程序为案例,带着大家从需求分析到设计逐一演示了每一个环节该干什么。有的人说低代码很简单,拖拽几下就完事了,认为是低技术含量的事情。有的说我懂开发,弄低代码岂不是小儿科。

存在这样认知的,往往是没怎么了解过低代码是什么,大概率也没用工具开发应用。其实你只要实际开发过一款小程序,其实也不是想象的那么简单。在下定义之前还是先做做功课,再做出结论也未尝不可。

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

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

相关文章

HarmonyOS学习路之开发篇—数据管理(融合搜索)

融合搜索概述 HarmonyOS融合搜索为开发者提供搜索引擎级的全文搜索能力,可支持应用内搜索和系统全局搜索,为用户提供更加准确、高效的搜索体验。 基本概念 全文索引 记录字或词的位置和次数等属性,建立的倒排索引。 全文搜索 通过全文索引进…

微服务之服务器缓存

Informal Essay By English In the difficult employment situation, we need to set a good goal and then do our own thing 参考书籍:“凤凰架构” 进程缓存(Cache) 缓存在分布式系统是可选,在使用缓存之前需要确认你的系统…

Redis - 附近商铺、用户签到、UV统计

文章目录 附近商铺、用户签到、UV统计一、附近商铺1.1 GEO数据结构1.2 导入店铺数据到GEO1.3 实现附近商户功能 二、用户签到2.1 BitMap2.2 签到功能2.3 统计连续签到2.3.1 分析2.3.2 代码实现 三、UV统计3.1 HyperLogLog用法3.2 测试百万数据的统计 附近商铺、用户签到、UV统计…

系统架构设计师-软件工程(3)

一、软件系统建模 1、结构化建模方法 结构化建模方法是以过程为中心的技术,可用于分析一个现有系统以及定义新系统的业务需求。结构化建模方法所绘制的模型称为数据流图(DFD)。对于流程较为稳定的系统可考虑结构化建模方法。 2、信息工程建模…

简单详细的MySQL数据库结构及yum和通用二进制安装mysql的方法

目录 mysql体系结构mysql的安装方法一,yum安装1,首先下载一个网络源仓库:2,然后安装 mysql-community-server3,启动mysqld 服务4,然后登录数据库5,初次登录要设置密码,而且不能太简单…

【ROS】TF2坐标转换及实战示例

Halo,这里是Ppeua。平时主要更新C,数据结构算法…感兴趣就关注我吧!你定不会失望。 文章目录 0.ROS中的坐标转换消息包0.1 geometry_msgs/TransformStamped0.2 geometry_msgs/PointStamped1.静态坐标转换1.1导入所需功能包1.2发布方实现1.3 …

【InnoDB 存储引擎】InnoDB 存储引擎的行格式,有 Compact、Redundant、Dynamic 等行格式还有它们配套实验(实验篇)

文章目录 1 InnoDB 行记录格式(实验)1.1 Compact 行格式实验1.1.1 实验步骤1.1.2 分析捞出来的数据1.1.3 疑问 1.2 Redundant 行格式实验1.2.1 实验步骤1.2.2 分析捞出来的数据 1.3 CHAR 列类型的存储1.3.1 实验步骤1.3.2 分析捞出来的数据 2 参考资料 1…

pnpm装包报错Run “pnpm install“ to recreate the modules directory.

一、先看报错 执行 pnpm install 装包报错 报错信息 ERR_PNPM_PUBLIC_HOIST_PATTERN_DIFF  This modules directory was created using a different public-hoist-pattern value. Run "pnpm install" to recreate the modules directory.二、解决方法 在项目根目录中…

【Zabbix 监控设置】

目录 一、添加 zbx-agent01 客户端主机1、服务端和客户端都配置时间同步2、服务端和客户端都设置 hosts 解析3、设置 zabbix 的下载源,安装 zabbix-agent24、修改 agent2 配置文件5、启动 zabbix-agent26、在服务端验证 zabbix-agent2 的连通性1、常用的键值 7、在 …

基于云原生网关的全链路灰度实践

作者: 倪海峰(海迩) 前言 随着企业规模的不断扩大,传统单体应用已很难进一步支持业务的发展,业务的迭代速度已经难以满足业务的增长,此时企业会对应用系统做微服务化的改造,降低业务的耦合度&…

Opencv图片样本预处理

前因 最近想学学,OPENCV识别物体,但是处理图片正样本时过于繁琐, 遂自己开发了工具,来处理样本图片,基于QT,文末附下载链接 程序 功能 一共有两个功能,一个是处理负样本,一个处理…

Spring Boot源码解读与原理分析(一):项目启动流程(上)——@SpringBootApplication

文章目录 〇、准备工作一、SpringBootApplication.java源码解析1.源码2.自定义注解3.组合注解4.注解ComponentScan过滤器 5.注解SpringBootConfigurationConfiguration 6.注解EnableAutoConfiguration 本文章是Spring Boot源码解读与原理分析系列博客的第一篇,将会介…