大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

这篇文章将为大家详细讲解有关微信小程序云开发之如何模拟后台增删改查,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站-专业网站定制、快速模板网站建设、高性价比西安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式西安网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖西安地区。费用合理售后完善,10余年实体公司更值得信赖。

小程序云开发出来之后,小程序开发人员也要慢慢的接触后端对数据的增删改查了。

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

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

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

显示页面index.wxml


    
     图书列表
    
    
     书名
     作者
     价格
     操作
    
   
      
       {{item.name}}
       {{item.author}}
       {{item.price}}
       删除
       修改
     
   


   暂时没有图书!


  添加图书

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



   
    
      
      
      
    
    
      
      
    
    
      
      
    
    
      保存
   
  

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

关于“微信小程序云开发之如何模拟后台增删改查”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前标题:微信小程序云开发之如何模拟后台增删改查
本文来源:http://dzwzjz.com/article/ihpdhs.html
在线咨询
服务热线
服务热线:028-86922220
TOP