微信小程序云开发之模拟后台增删改查


Posted in Javascript onMay 16, 2019

小程序云开发出来之后,小程序开发人员也要慢慢的接触后端对数据的增删改查了。下面就给大家提供一个案例吧。

微信小程序云开发之模拟后台增删改查

这里我把新增和修改放在了一个页面

  微信小程序云开发之模拟后台增删改查  微信小程序云开发之模拟后台增删改查

显示页面index.wxml

<view wx:if="{{books}}" class='container'>
    <view class='title'>
     <text>图书列表</text>
    </view>
    <view class='label'>
     <text>书名</text>
     <text>作者</text>
     <text>价格</text>
     <text>操作</text>
    </view>
   <block wx:for="{{books}}" wx:key="">
      <view class='content'>
       <text>{{item.name}}</text>
       <text>{{item.author}}</text>
       <text>{{item.price}}</text>
       <button class='del' data-id='{{item._id}}' bindtap='onDel'>删除</button>
       <button class='update' data-id='{{item._id}}' bindtap='onUpdate'>修改</button>
     </view>
   </block>
</view>
<view wx:else="{{books}}" class='none'>
   <text >暂时没有图书!</text>
</view>
<view class='add'>
  <button bindtap='goSet'>添加图书</button>
</view>

index.js

// pages/index/index.js
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
   books:[] 
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  const db = wx.cloud.database()
  db.collection("books").get({
   success:res=>{
    this.setData({
     books:res.data
    })
   },fail:err=>{
    wx.showToast({
     icon:"none",
     title: '查询记录失败',
    })
   }
  })
 },
  goSet:function(){
  wx.navigateTo({
   url: '../set/set',
  })
 
 }, onDel:function(e){
   let id = e.currentTarget.dataset.id
   const db = wx.cloud.database();
   db.collection("books").doc(id).remove({
    success:res=>{
     wx.showToast({
      title: '删除成功',
     })
     this.onLoad()//删除成功重新加载
    },fail:err=>{
     wx.showToast({
      title: '删除失败',
     })
    }
   })
   console.log(id)
 },onUpdate:function(e){
   let id = e.currentTarget.dataset.id
   wx.navigateTo({
    url: '../set/set?id='+id,
   })
 }
})

添加和修改共用set.wxml

<!--pages/set/set.wxml-->
<view class='container'>
   <form bindsubmit='comfirm' >
    <view class='input-container'>
      <label>书名:</label>
      <input style='display:none' data-value='{{id}}' name="id" value='{{book._id}}'></input>
      <input data-value='{{name}}' name="name" value='{{book.name}}'></input>
    </view>
    <view class='input-container'>
      <label>作者:</label>
      <input data-value='{{author}}' name="author" value='{{book.author}}'></input>
    </view>
    <view class='input-container'>
      <label>价格:</label>
      <input data-value='{{price}}'  name ="price" value='{{book.price}}'></input>
    </view>
    <view class='comfirm'>
      <button  form-type='submit'>保存</button>
   </view>
  </form>
</view>

set.js

// pages/set/set.js
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
   book:[]
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  if(options.id){
   const db = wx.cloud.database();
   db.collection("books").where({
    _id:options.id
   }).get({
    success:res=>{
     this.setData({
      book:res.data[0]//返回的是一个数组,取第一个
     })
    },fail:err=>{
     console.log(err)
    }
   })
  }
 },
 comfirm:function(e){
  const db = wx.cloud.database()//打开数据库连接
  let book = e.detail.value
  if(book.id==""){//id等于空是新增数据
   this.add(db,book) //新增记录
  }else{
   this.update(db,book) //修改记录
  }
 }, add: function (db, book) {
   db.collection("books").add({
    data: {
     name: book.name,
     author: book.author,
     price: parseFloat(book.price)
    }, success: res => {
     wx.showToast({
      title: '新增记录成功',
     })
     wx.navigateTo({
      url: '../index/index',
     })
    }, fail: err => {
     wx.showToast({
      title: '新增失败',
     })
    }
   })
    
 }, update: function (db, book) {
  db.collection("books").doc(book.id).update({
   data: {
    name: book.name,
    author: book.author,
    price: parseFloat(book.price)
   }, success: res => {
    wx.showToast({
     title: '修改记录成功',
    })
    wx.navigateTo({
     url: '../index/index',
    })
   }, fail: err => {
    wx.showToast({
     title: '修改失败',
    })
   }
  })
 } 
 
})

云开发后台数据,需要手动添加books集合:

微信小程序云开发之模拟后台增删改查

wechat

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

Javascript 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
再谈javascript原型继承
Nov 10 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
JavaScript运行原理分析
Feb 09 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
vue项目中使用scss的方法步骤
May 16 #Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
angular多语言配置详解
May 16 #Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
Django模板继承 extend标签实例代码详解
May 16 #Javascript
vue视图不更新情况详解
May 16 #Javascript
You might like
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JSONP基础知识详解
2017/03/19 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Python异常学习笔记
2015/02/03 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
如何卸载python插件
2020/07/08 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
会议室管理制度范本
2015/08/06 职场文书
求职信如何撰写?
2019/05/22 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书