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

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



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

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

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

1 创建修改页面

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

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

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

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

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

2 创建远程数据

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

ID的类型需要修改为整数

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

3 给组件绑定默认值

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

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

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

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

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

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

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

4 从详情页跳转到更新页

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

展开行为,传入ID

5 刷新页面

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

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

总结

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

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

相关文章
|
15天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
9天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
14天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
20天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
14天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
10天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
15天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
37 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
360 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
60 0
微信小程序更新提醒uniapp