零基础开发小程序第五课-修改数据

简介: 零基础开发小程序第五课-修改数据



新手开发往往对修改和删除的功能不是特别理解。我们先按照开发的思路捋一下逻辑,如果想修改数据,首先需要知道修改哪一条数据,然后要把上一次存储的结果填充到页面上。

当我们再次修改了数据的时候,还需要将数据库的记录进行更新。删除的话就需要知道删除哪一条记录。

这就存在一个问题,我们怎么知道是需要修改或者删除哪一条记录呢?在无代码工具中,标识记录的唯一性叫ID,通过这个整数字段就可以知道是哪一条记录被修改

1 创建修改页面

要想实现修改功能,我们先需要创建一个页面,点击页面旁边的+号,进行创建

修改页面和新增页面的功能是类似的,先点击创建组件的+号,拖入图片选择器

然后拖入文字和文字输入组件,修改文字的内容为名称

按照上述方法依次输入价格、描述

字段搭建好之后,我们还需要一个按钮用来更新信息

2 创建远程数据

我们的更新页面需要根据页面传入的ID来进行更新,首先创建一个链接数据来接收从其他页面传入的ID

ID的类型需要修改为整数

接着创建一个远程数据,数据表选择我们的商品表,过滤条件让表的ID字段等于我们的链接数据

3 给组件绑定默认值

远程数据创建好之后,我们就需要给组件绑定默认值,先绑定图片,选择数据绑定,从远程数据里选择对应的字段

然后依次给文字输入组件绑定默认值

设置好默认值之后我们要给按钮绑定行为,选中按钮,切换到交互页签,绑定点击时行为

依次选择请求->修改表数据->更新商品

展开我们的行为,依次将表单上的字段绑定到参数里

一定要记录设置过滤条件,否则就更新所有的数据,过滤条件我们让ID等于我们的链接数据

成功后我们设置一个行为提示一个更新成功的信息

4 从详情页跳转到更新页

回到详情页,添加一个按钮,修改内容为更新商品,配置行为为跳转,跳转到更新页面

展开行为,传入ID

5 刷新页面

我们修改数据成功后,需要跳转回列表页面,并且刷新页面的数据。还是回到修改页面,点击按钮,设置刷新数据,我们要更新一下列表数据

刷新数据之后我们再设置跳转,跳转到列表页面

总结

我们本篇介绍了修改页面的开发方法,修改数据的时候要传入当前数据的ID,需要给组件绑定默认值,修改的时候要将组件的值传入对应的字段,而且不能忘记设置过滤条件。

还需要注意的是当我们的数据更新之后还需要更新列表项的数据,并且跳转到列表页。小程序开发的四个基本功,我们已经讲解了三个了,下一节我们讲解一下删除数据,一个基本功就练成了。如果感兴趣也打开工具照着设置一下吧。

相关文章
|
4月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
4月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
498 1
|
4月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
378 7
|
4月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
307 3
|
4月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
25875 0
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
599 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
325 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
3405 3