微信小程序云开发实现增删改查功能
程序员文章站
2023-08-16 09:22:07
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下
首先按照微信小程序官方提示创建一个快速云开发小程序
大家可以点击此处下载源代码...
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下
首先按照微信小程序官方提示创建一个快速云开发小程序
大家可以点击此处下载源代码
实现效果如下:
在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; }
数据集合如下图:
大家可以点击此处下载源代码 ,有问题可以评论交流!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序云开发实现数据添加、查询和分页
下一篇: 辣椒酱的做法,一起来看看