评论

云开发经验总结（展示两种增删改查的方法）

2019-11-04
6407浏览
0评论

教你快速上手云开发，让你真真正正体会到云开发的便利！

开发工具

mpvue官方文档


云开发初始化


  wx.cloud.init({

    env: 'wedding-10c111'

  })


上面这段代码配置在src目录下的main.js文件中


数据库API（不使用云函数进行增删改查）

以下说明均写在对应代码注释里，不清楚的请查看相关注释


查（获取数据）


  // 获取轮播图列表

  getBannerList () {
    // 获取数据库引用
    const db = wx.cloud.database()
    // 获取名为“banner”的集合引用
    const banner = db.collection('banner')
    // 获取集合（Promise 风格）
    banner.get().then(res => {
      this.list = res.data[0].bannerList
    })

  }


对应实例如下： 


注意：之所以数据库只有一条数据，而把banner列表当成这条数据的一个字段存储，其目的是为了自己后续换图操作的方便


增（添加数据）

 

  // 添加用户

  addUser () {
    // 获取数据库引用
    const db = wx.cloud.database()
    // 获取名为“user”的集合引用
    const user = db.collection('user')
    // 向“user”集合中添加一条数据（Promise 风格）
    user.add({
      data: {
        user: that.userInfo,
        // 构造一个服务端时间的引用，我的项目中都是取自己转化后的时间，
        // 取这个时间更加合理，可用于查询条件、更新字段值或新增记录时的字段值
        time: db.serverDate()
      }
    }).then(res => {
      // 添加成功后重新查询列表
      that.getUserList()
    })

  }


对应实例如下： 


注意： 可以看出_id和_openid是添加完自动生成的属性

改（修改数据）

 

  // 改变某条留言的显示隐藏

  switchMessage (e) {
    // 获取数据库的引用
    const db = wx.cloud.database()
    // 获取名为“message”的集合的引用
    const message = db.collection('message')
    // 这里的id是拿到当前操作项对应的id，
    // 这里的show对应change事件传递过来的值
    message.doc(e.mp.target.dataset.id).update({
      data: {
        show: e.mp.detail.value
      }
    }).then(res => {
      console.log(res)
    })

  }


对应实例如下：


注意：这个界面在你们使用的小程序中是看不到的，只有本人才有权限查看 



  <switch class="switch" :data-id="item._id" :checked="item.show" @change="switchMessage"></switch>


 注意：上面我们之所以能得到e.mp.target.dataset.id是因为在<switch>标签上加了`:data-id="item._id"`，不然取不到对应id


删（删除数据）

正好对应的上图有删除操作

 

  deleteItem (id) {

    // 记录this指向
    const that = this
    // 这里之所以使用wx.showModal是防止误操作
    wx.showModal({
      title: '提示',
      content: '你确定要删除这条留言？',
      success (res) {
        if (res.confirm) {
          // 获取数据库的引用
          const db = wx.cloud.database()
          // 获取名为“message”集合的引用
          const message = db.collection('message')
          // 删除操作（Promise 风格）
          message.doc(id).remove().then(res => {
            // 删除成功后再次请求列表，达到刷新数据的目的
            if (res.errMsg === 'document.remove:ok') {
              that.getList()
            }
          })
        }
      }
    })

  }



使用云函数进行增删改查


查（获取数据）

 

  // 云函数初始化

  const cloud = require('wx-server-sdk')
  // 由于文章开始已经讲过初始化步骤，这里init(options)的options可以省略
  // options参数定义了云开发的默认配置，该配置会作为之后调用其他所有云 API 的默认配置
  cloud.init()
  // 获取数据库的引用
  const db = cloud.database()
  exports.main = async (event, context) => {
    // 将集合名定义成一个变量，方便后续调用
    const dbName = 'message'
    // filter为指定的筛选条件，配合where()使用
    const filter = event.filter ? event.filter : null
    // pageNum如果小程序端未传入则默认为1
    const pageNum = event.pageNum ? event.pageNum : 1
    // pageSize如果小程序端未传入则默认是10
    const pageSize = event.pageSize ? event.pageSize : 10
    // 数据库满足filter条件的数据总条数
    const countResult = await db.collection(dbName).where(filter).count()
    const total = countResult.total
    // 共多少页
    const totalPage = Math.ceil(total / pageSize)
    // 是否有下一页
    let hasMore
    if (pageNum >= totalPage) {
      hasMore = false
    } else {
      hasMore = true
    }
    // 等待所有，orderBy()通过创建时间排序，查询单页数据
    return db.collection(dbName).orderBy('time', 'desc').where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => {
      // 返回结果中顺带注入hasMore和total方便小程序端判断
      res.hasMore = hasMore
      res.total = total
      return res
    })

  }


 

  getList () {

    // 记录this指向
    const that = this
    // 每次调用getList时重新从第一页开始
    that.pageNum = 1
    // 每次调用getList时，先将authorityList置空
    that.authorityList = []
    wx.cloud.callFunction({
      // 云函数名
      name: 'authorityList',
      // 传入云函数的参数
      data: {
        // 查询的默认筛选条件，这里可以参考下面留言审核对应的两张图来看，左上角有个switch开关
        // 当开关开启时，filter:{show:false}生效
        filter: that.checkFlag ? {
          show: false
        } : null,
        // 查询页数
        pageNum: that.pageNum,
        // 每页条数
        pageSize: that.pageSize
      }
    }).then(res => {
      // 配合下拉刷新使用，作用是停止刷新事件
      wx.stopPullDownRefresh()
      // 以下动作为赋值操作
      const temp = res.result
      that.total = temp.total
      that.hasMore = temp.hasMore
      that.authorityList = temp.data
    })

  }


 上面代码对应实例如下：1.查询未通过审核的留言；2.查询全部的留言



增（添加数据）


  // 前面讲解过的注释之后的代码将不重复说明

  const cloud = require('wx-server-sdk')
  cloud.init()
  const db = cloud.database()
  exports.main = async (event, context) => {
    const dbName = 'message'
    // 添加数据
    return db.collection(dbName).doc(event.id).add({
      data: {
        desc: event.desc,
        type: event.type,
        show: event.show,
        time: event.time,
        url: event.url,
        name: event.name
      }
    })

  }


 

  sendMessage () {

    const that = this
    if (that.desc) {
      wx.cloud.callFunction({
        // 云函数名
        name: 'addMessage',
        data: {
          desc: that.desc,
          type: 'message',
          show: false,
          time: utils.getNowFormatDate(),
          url: that.userInfo.avatarUrl,
          name: that.userInfo.nickName
        }
      }).then(res => {
        // 关闭所有页面，打开到应用内的某个页面，跳转到留言列表页
        wx.reLaunch({
          url: '/pages/message/main'
        })
      })
    } else {
      tools.showToast('说点什么吧~')
    }

  }



 对应实例如下：



改（修改数据）

 

  const cloud = require('wx-server-sdk')

  cloud.init()
  const db = cloud.database()
  exports.main = async (event, context) => {
    const dbName = 'message'
    return db.collection(dbName).doc(event.id).update({
      data: {
        show: event.show
      }
    })

  }


 

  switchMessage (e) {

    const that = this
    wx.cloud.callFunction({
      name: 'switchMessage',
      data: {
        id: e.mp.target.dataset.id,
        show: e.mp.detail.value
      }
    }).then(res => {
      if (res.result.errMsg === 'document.update:ok') {
        that.getList()
      }
    })

  }


 对应实例如下：（前面没使用云函数也实现了相同的功能，感兴趣的可以对比查阅）



删（删除数据）


  const cloud = require('wx-server-sdk')

  cloud.init()
  const db = cloud.database()
  exports.main = async (event, context) => {
    const dbName = 'message'
    return db.collection(dbName).doc(event.id).remove()

  }


 

  deleteItem (id) {

    // 记录this指向
    const that = this
    // 这里之所以使用wx.showModal是防止误操作
    wx.showModal({
      title: '提示',
      content: '你确定要删除这条留言？',
      success (res) {
        if (res.confirm) {
          wx.cloud.callFunction({
            name: 'deleteMessage',
            data: {
              id
            }
          }).then(res => {
            if (res.result.errMsg === 'document.remove:ok') {
              that.getList()
            }
          })
        }
      }
    })

  }


对应实例如下：



总结

  • 掌握上面两种对应的增删改查后，相信大家对云开发会有一个更清晰的认识，也希望大家多多使用云开发做出更多好玩的小程序作品；

  • 如果觉得看完这篇文章让你有想尝试使用云开发的冲动，请不要吝啬你的赞，有什么问题欢迎留言，一起交流学习。


对应小程序 

欢迎大家体验：



日记小程序 




小程序订制

加本人微信：huangbin910419

可按给定UI图订制


最后一次编辑于  2019-11-06  
点赞 8
收藏
评论
请 登录 后发表内容
作者介绍

文章标签
云开发无需后台