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


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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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的面试题集
2006/11/19 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python 字段拆分详解
2019/12/17 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
自我鉴定的范文
2013/10/03 职场文书
师范应届生教师求职信
2013/11/05 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
银行招聘自荐信
2015/03/06 职场文书
python如何在word中存储本地图片
2021/04/07 Python
详解Redis主从复制实践
2021/05/19 Redis
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python