微信小程序云开发实现增删改查功能


Posted in Javascript onMay 17, 2019

本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下

首先按照微信小程序官方提示创建一个快速云开发小程序

大家可以点击此处下载源代码

实现效果如下:

微信小程序云开发实现增删改查功能

在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;
}

数据集合如下图:

微信小程序云开发实现增删改查功能

大家可以点击此处下载源代码 ,有问题可以评论交流!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JQuery工具函数汇总
Jun 15 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
10分钟学会js处理json的常用方法
Dec 06 Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 #Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 #Javascript
js常用正则表达式集锦
May 17 #Javascript
Angular请求防抖处理第一次请求失效问题
May 17 #Javascript
vue cli 3.0 搭建项目的图文教程
May 17 #Javascript
小程序云开发如何实现图片上传及发表文字
May 17 #Javascript
You might like
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
大学活动策划书范文
2014/01/10 职场文书
高中语文教学反思
2014/01/16 职场文书
法学院方阵解说词
2014/01/29 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
秋天的雨教学反思
2014/04/27 职场文书
数学系毕业生求职信
2014/05/29 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
css弧边选项卡的项目实践
2023/05/07 HTML / CSS