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


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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript定时器完整实例
Feb 10 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
js变量提升深入理解
Sep 16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
微信小程序云开发实现云数据库读写权限
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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中str.format()详解
2017/03/12 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
行政撤诉申请书
2015/05/18 职场文书
农村婚庆主持词
2015/06/29 职场文书
Django程序的优化技巧
2021/04/29 Python
JavaScript 定时器详情
2021/11/11 Javascript
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL