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


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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
vue 封装面包屑组件教程
Nov 16 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php eval函数用法总结
2012/10/31 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Python快速排序算法实例分析
2017/11/29 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
关于保护环境的建议书
2014/05/13 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
投资合作意向书范本
2015/05/08 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
食品卫生管理制度
2015/08/06 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL