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

会员管理系统实战开发教程02-H5应用创建

低代码平台作为一个应用的快速生成工具,可以方便的进行一页多端的开发,可以在一个应用里生成三端的应用,也可以拆分成三个应用来制作。三端包括H5、小程序和PC管理后台。

上一篇我们介绍了PC管理后台的创建方法,本篇我们介绍一下H5的创建方法。

1 创建自定义应用

H5创建的时候,需要创建自定义应用。自定义应用的特点是像一个画布一样,需要我们自己添砖加瓦。

打开控制台,点击创建应用,点击新建自定义应用
在这里插入图片描述
应用创建好之后,我们要选择H5构建
在这里插入图片描述

2 宫格导航设置

一般的管理软件,在移动端使用的时候我们需要给一个导航菜单的功能,在H5中,我们使用宫格导航组件来实现,在右侧的组件面板中找到宫格导航组件,拖入中间的编辑区
在这里插入图片描述
然后切换到配置页签,我们设置一下宫格导航的导航设置
在这里插入图片描述
宫格导航既可以单独配置每个菜单项,也可以从数据源中读取配置,我们这里使用单独配置即可。

点击某个配置项,可以选择图标,也可以设置跳转的页面
在这里插入图片描述

3 页面创建

我们的应用是由页面组成的,点击左上角创建页面的图标,新建一个会员列表的页面
在这里插入图片描述
在这里插入图片描述
页面创建成功后,我们将宫格导航的第一个菜单项设置为会员管理,并且跳转到会员列表页面
在这里插入图片描述

4 会员列表功能实现

会员列表功能我们可以使用数据列表组件实现,微搭中页面搭建主要是使用数据容器组件实现,数据容器组件包括数据列表、数据详情、表单容器,大部分的管理页面都可以用这三个组件进行搭建。

点击左上角的页面图标,从页面列表里选择我们的会员列表页面,往页面中拖入数据列表组件

在这里插入图片描述
在这里插入图片描述
数据列表需要选择数据源,选择我们的会员信息数据源
在这里插入图片描述
我们在右下角要显示一个创建的图标,先添加一个普通容器,里边放置一个图标组件
在这里插入图片描述
要想让图标出现在右下角,我们需要设置普通容器的定位,设置为固定定位,距右边10px,距下边10px

在这里插入图片描述
然后修改图标的样式
在这里插入图片描述
点击图标的时候,我们需要跳转到新增页面,创建一个新增页面
在这里插入图片描述
设置普通容器的事件,点击时我们打开新增页面
在这里插入图片描述
在这里插入图片描述

5 会员新增

切换到会员新增页面,我们新增页面是使用表单容器来完成的,往页面中拖入表单容器组件,数据源选择会员信息
在这里插入图片描述
提交成功后我们需要返回上一页,先选中表单容器,然后在数据源事件中增加成功时的事件
在这里插入图片描述
选择返回上一页即可
在这里插入图片描述

6 预览发布

功能开发好之后我们先需要测试,点击实时预览
在这里插入图片描述
先进行测试,测试通过之后,可以点击发布,发布成体验版在手机上进行测试
在这里插入图片描述

总结

本篇我们讲解了自定义应用的创建方法,并且介绍了会员列表功能及新增功能的开发。管理端我们通常就是五个基本动作列表、新增、修改、删除、查看,熟练掌握基本功能的开发是低码开发应用的基本功,基本功打扎实了应用开发就是水到渠成的一件事。

相关文章:

会员管理系统实战开发教程02-H5应用创建

低代码平台作为一个应用的快速生成工具,可以方便的进行一页多端的开发,可以在一个应用里生成三端的应用,也可以拆分成三个应用来制作。三端包括H5、小程序和PC管理后台。 上一篇我们介绍了PC管理后台的创建方法,本篇我们介绍一下…...

记一次由于整型参数错误导致的任意文件上传

当时误打误撞发现的,觉得挺奇葩的,记录下 一个正常的图片上传的点,文件类型白名单 但是比较巧的是当时刚对上面的id进行过注入测试,有一些遗留的测试 payload 没删,然后在测试上传的时候就发现.php的后缀可以上传了&a…...

spring之Spring Security - 实现身份验证与授权

Spring Security - 实现身份验证与授权 标题: Spring Security - 实现身份验证与授权摘要:引言:词汇解释:详细介绍:实现基本的身份验证与授权解释概念:代码示例:注意事项: 定制化认证与授权流程解释概念:代码示例:注意事项: 集成OAuth2认证解释概念:代码示例:注意事项: 总结:参…...

【Unity3D赛车游戏】【二】如何制作一个真实模拟的汽车

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:Uni…...

【Linux】线程篇Ⅱ:

线程Ⅱ 🔗接上篇【线程篇Ⅰ】五、线程库 和 线程 id六、同步与互斥 🔗接上篇【线程篇Ⅰ】 👉【Linux】线程篇Ⅰ:线程和task_struct 执行流的理解、相关接口命令、线程异常、线程的私有和共享 五、线程库 和 线程 id 对于 Linux …...

浅尝OpenResty

文章目录 1. 写在前面2. 下载安装openresty2.1 下载Openresty2.2 设置nginx启动 3. 嵌入lua脚本4. 实践5. 小结 1. 写在前面 当一个域名中衍生出多个服务的时候,如果想要保持对外服务始终是一个域名,则需要通过nginx反向代理来实现。如果在转发的时候需…...

MySQL分页查询慢怎么办

今天看到一个问题。 MySQL分页查询慢怎么办? 第一反应是用limit限制返回的条数。 比如 select * from table order by idlimit 10, 100;实际上我们限制的只是返回的条数是100,并不是查询时就从第10条开始获取数据。 所以实际上MySQL会从第0条开始查询&a…...

mongodb集群

端口192.168.115.3 192.168.115.4 1192.168.115.5 下载MongoDB软件包版本为4.2.14并安装 rpm -ih --force --nodeps *.rpm 2创建文件夹mkdir -p /opt/local/mongo-cluster/conf 3.在目录里创建配置文件cd /opt/local/mongo-cluster/conf …...

回归预测 | MATLAB实现WOA-BP鲸鱼优化算法优化BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现WOA-BP鲸鱼优化算法优化BP神经网络多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现WOA-BP鲸鱼优化算法优化BP神经网络多输入单输出回归预测(多指标,多图)效果一览基本…...

【前端从0开始】JavaSript——循环控制语句

循环控制语句 while语句 While 循环会在指定条件为真时循环执行代码块。 While循环,先进行条件判断,再执行循环体的代码 while (条件表达式){循环体 }注意:当前循环中,如果不满足条件,一次都不会执行 var i 1; whi…...

【Elasticsearch】spring-boot-starter-data-elasticsearch的使用以及Elasticsearch集群的连接

更多有关博主写的往期Elasticsearch文章 标题地址【ElasticSearch 集群】Linux安装ElasticSearch集群(图文解说详细版)https://masiyi.blog.csdn.net/article/details/131109454基于SpringBootElasticSearch 的Java底层框架的实现https://masiyi.blog.c…...

Python学习笔记_进阶篇(四)_django知识(三)

本章内容: Django 发送邮件Django cookieDjango sessionDjango CSRF Django 发送邮件 我们常常会用到一些发送邮件的功能,比如有人提交了应聘的表单,可以向HR的邮箱发邮件,这样,HR不看网站就可以知道有人在网站上提…...

指针(初阶)

1. 指针是什么? 指针是什么? 指针理解的2个要点: 1. 指针是内存中一个最小单元的编号,也就是地址 2. 平时口语中说的指针,通常指的是指针变量,是用来存放内存地址的变量 总结:指针就是地址&…...

Flink内核源码解析--Flink中重要的工作组件和机制

Flink内核源码 1、掌握Flink应用程序抽象2、掌握Flink核心组件整体架构抽象3、掌握Flink Job三种运行模式4、理解Flink RPC网络通信框架Akka详解5、理解TaskManager为例子,分析Flink封装Akka Actor的方法和整个调用流程6、理解Flink高可用服务HighAvailabilityServ…...

Linux 压缩解压(归档管理):tar命令

计算机中的数据经常需要备份,tar是Unix/Linux中最常用的备份工具,此命令可以把一系列文件归档到一个大文件中,也可以把档案文件解开以恢复数据。 tar使用格式 tar [参数] 打包文件名 文件 tar命令很特殊,其参数前面可以使用“-”&…...

spring boot集成mqtt协议发送和订阅数据

maven的pom.xml引入包 <!--mqtt--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId><version>2.3.6.RELEASE</version></dependency><dependency…...

【数据库】详解数据库架构优化思路(两主架构、主从复制、冷热分离)

文章目录 1、为什么对数据库做优化2、双主架构双主架构的工作方式如下&#xff1a;双主架构的优势包括&#xff1a;但是一般不用这种架构&#xff0c;原因是&#xff1a; 3、主从复制主从复制的工作方式如下&#xff1a;主从复制的优势包括&#xff1a;主从复制的缺点 4、冷热分…...

el-table 实现动态表头 静态内容 根据数据显示动态输入框

直接放代码了 <el-table:data"form.tableDataA"borderstripestyle"width: 100%; margin-top: 20px"><el-table-columnv-for"(category, categoryIndex) in form.tableDataA":key"categoryIndex":label"category.name&qu…...

Reids 的整合 Spring Data Redis使用

大家好 , 我是苏麟 , 今天带来强大的Redis . REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。 Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选…...

3D数据转换工具HOOPS Exchange概览

HOOPS Exchange SDK是一组C软件库&#xff0c;使开发团队能够快速为其应用程序添加可靠的2D和3D CAD导入和导出功能。这允许访问广泛的数据&#xff0c;包括边界表示&#xff08;BREP&#xff09;、产品制造信息&#xff08;PMI&#xff09;、模型树、视图、持久ID、样式、构造…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

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

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

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...