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


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 居中漂浮广告
Mar 21 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
JQuery教学之性能优化
May 14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
js实现简单页面全屏
Sep 17 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
学校对教师的评语
2014/04/28 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏