小程序入门16:小程序云开发之数据库新增一条记录

101 阅读2分钟

写在前面

本篇文章是微信小程序开发入门的第十六篇,介绍小程序云开发之数据库新增一条记录

数据库:新增一条记录

我们一开始已经写过新增记录的云函数,在这里我们要将他进行修改一下,因为原来的那个新增的数据是固定写死的,我们现在将数据改成从参数中获取,小程序端调用新增记录云函数的时候只需要将要新增的数据当作参数传过来即可,修改后的代码如下,修改后需要将云函数重新上传并部署,不然小程序端访问到的是没有更新前的代码:

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});

const db = cloud.database();

// 添加数据库记录云函数入口函数
exports.main = async (event, context) => {
  try {
    // 添加记录
    await db.collection('fruit').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        name: event.name,
        oriPrice: event.oriPrice,
        quantity: event.quantity,
        unit: event.unit,
        vipPrice: event.vipPrice,
        curPrice: event.curPrice,
        intro: event.intro,
        isHot: false,
      }
    });
    return {
      success: true,
      msg: '添加成功!'
    };
  } catch (e) {
    return {
      success: false,
      msg: '添加失败!'
    };
  }
};

然后在小程序端调用这个云函数,打开miniprogram\pages\fruit-edit-add\fruit-edit-add.js文件,在点击“确定新增”按钮后,判断this.data.id是否存在,存在则为编辑数据,不存在即为新增数据,在云函数调用成功后同样判断是编辑还是新增,编辑、新增作不同代码处理,最终代码如下:

  onEditSubmit() {
    let type = 'add'
    if (this.data.id) {
      type = 'edit'
    }
    wx.cloud.callFunction({
      name: 'fruit',
      data: {
        type: type,
        ...this.data
      }
    }).then((res) => {
      const {
        success,
        msg
      } = res.result
      if (success) {
        if (this.data.id) {
          let pages = getCurrentPages() // 获取页面堆栈
          let prevPage = pages[pages.length - 2] //代表的就是上一页的实例,相当于上一页的this
          prevPage.getDetail(this.data.id) // 调用上一页获取详情的方法
          wx.navigateBack({ // 跳转到上一页
            delta: 1
          })
        } else {
          wx.redirectTo({
            url: `/pages/index/index`,
          })
        }
      } else {
        wx.showToast({
          title: msg,
          icon: 'error',
          duration: 2000
        })
      }
    }).catch((e) => {});
  }

我们尝试新增一条记录:

image.png

点击“确定新增”按钮后,可以看到Network-Cloud显示调用云函数成功,并且成功跳转回到列表页,且列表页面也能看到刚刚新增的数据

image.png

写在最后

以上就是小程序云开发之数据库新增一条记录的全部内容