时间:2021-05-18
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下
首先按照微信小程序官方提示创建一个快速云开发小程序
大家可以点击此处下载源代码
实现效果如下:
在miniprogram->index的下修改下面三个文件
index.js如下:
Page({ data: { id: '',//修改用来保存_id iSshow: true, inpVal: '', inp2Val: '', inp3Val: '', list: [] }, onLoad: function () { var that = this that.getUserMsg()//读取信息 }, //获取文本框内容 getName(e) { this.setData({ inpVal: e.detail.value }) }, getAge(e) { this.setData({ inp2Val: e.detail.value }) }, getCreated(e) { this.setData({ inp3Val: e.detail.value }) }, //获取信息 getUserMsg() { var that = this const db = wx.cloud.database() db.collection('datalist').get({ success: function (res) { console.log(res) that.setData({ list: res.data }) } }) }, //添加信息 setUserMsg() { var that = this const db = wx.cloud.database() db.collection('datalist').add({ data: { name: that.data.inpVal, age: that.data.inp2Val, created: that.data.inp3Val }, success: function (res) { console.log(res) that.setData({ inpVal: "", inp2Val: "", inp3Val:"" }) console.log(that.data.inpVal + '--' + that.data.inp2Val + '--' + that.data.inp2Val) that.getUserMsg() } }) }, //删除信息 delUserMsg(e) { var that = this const db = wx.cloud.database() var id = e.currentTarget.dataset.id db.collection('datalist').doc(id).remove({ success: function (res) { console.log(res) that.getUserMsg() } }) }, //修改回显 changeMsg(e) { var that = this var id = e.currentTarget.dataset.id const db = wx.cloud.database() db.collection('datalist').doc(id).get({ success: function (res) { that.setData({ inpVal: res.data.name, inp2Val: res.data.age, inp3Val:res.data.created, show: false, id: res.data._id }) } }) }, //更新提交 updetMsg(e) { var that = this var id = e.currentTarget.dataset.id const db = wx.cloud.database() db.collection('datalist').doc(id).update({ data: { name: that.data.inpVal, age: that.data.inp2Val, created:that.data.inp3Val }, success: function (res) { that.getUserMsg() that.setData({ inpVal: '', inp2Val: '', inp3Val:'', show: true }) } }) },})index.wxml如下:
<view class="container"> <view class='box' style='background:#FFFFFF'> <label>姓名:</label> <input data-value='{{inpVal}}' bindinput='getName' value='{{inpVal}}'></input> </view> <view class='box' style='background:#FFFFFF;margin-top:1rpx;'> <label>年龄:</label> <input data-value='{{inpVal}}' bindinput='getAge' value='{{inp2Val}}'></input> </view> <view class='box' style='background:#FFFFFF;margin-top:10rpx;'> <label>手机号:</label> <input data-value='{{inpVal}}' bindinput='getCreated' value='{{inp3Val}}'></input> </view> <button wx:if='{{show}}' bindtap='setUserMsg'>提交</button> <button wx:if="{{!show}}" data-id="{{id}}" bindtap='updetMsg'>确认修改</button></view> <view class='infoMsg'> <view> <label>姓名</label> <label>年龄</label> <label>手机号</label> <label>操作</label> </view> <view wx:for="{{list}}"> <label>{{item.name}}</label> <label>{{item.age}}</label> <label>{{item.created}}</label> <label> <text data-id='{{item._id}}' bindtap='changeMsg'>修改</text> </label> </view> </view>index.wxss如下:
page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; font-size: 30rpx;}.box{ width: 90%; display: flex; background: grey} button{ width: 90%; height: 40px; line-height: 40px; margin-top: 20rpx; background:#ffffff; }.infoMsg{ width: 90%; margin: auto; margin-top: 20rpx; border: 1rpx solid #e2e2e2; font-size: 28rpx;}.infoMsg view{ display: flex; border-top: 1rpx solid #e2e2e2;}.infoMsg view>label{ flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.infoMsg view>label:not(:first-child){ border-left: 1rpx solid #e2e2e2;}.infoMsg view>label text{ margin-right: 10rpx; border: 1rpx solid #e2e2e2;}数据集合如下图:
大家可以点击此处下载源代码 ,有问题可以评论交流!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用AngularJS实现对表格的增删改查(仅限前端),具体代码:实现表格的增删改查.add{position:relative;top:-40px;left:1
软件开发实际就是数据的增删改查,javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascr
微信小程序数组(增,删,改,查)等操作最近在做一个小程序的demo。由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为
问题描述对于任意给定的单词小助手程序(现有功能可以实现查单词的增删改查、中英、英中测试和分数显示功能),完善其单词查询、错误单词重复记忆和排行功能。问题分析首先
微信小程序增、删、改、查操作实例详解1.以收货地址的增删改查为例2.文件目录js文件是逻辑控制,主要是它发送请求和接收数据,json用于此页面局部配置并且覆盖全