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


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 相关文章推荐
jQuery中Dom的基本操作小结
Jan 23 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
进修护士自我鉴定
2013/10/14 职场文书
浪费资源的建议书
2014/03/12 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
检讨书范文
2019/04/16 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
nginx日志格式分析和修改
2022/04/28 Servers
js前端图片加载异常兜底方案
2022/06/21 Javascript