微信小程序笔记 云开发 提交表单，添加数据到数据库

wxml：

<form bindsubmit="addBuyerBasics">
  <input name="buyerID" placeholder="请输入买家id"></input>
  <input name="buyerPhone" placeholder="请输入买家电话"></input>
  <input name="buyerName" placeholder="请输入买家名称"></input>
  <input name="buyerWeixin" placeholder="请输入买家微信号"></input>
  <input name="buyerPassword" placeholder="请输入买家密码"></input>
  <button type="primary" form-type="submit">提交数据</button>
  <button type="primary" form-type="reset">清空</button>
</form>

wxss：

page{
  padding: 10rpx;
  box-sizing: border-box;
}

input{
  border: 1px solid #000;
}

js（写法一）：

// 连接微信云数据库
const db = wx.cloud.database()

Page({
  data: {
    "buyerID": "",
    "buyerPhone": "",
    "buyerName": "",
    "buyerWeixin": "",
    "buyerPassword": "",
    "buyerCreateTime": ""
  },

  // 向buyerBasics添加数据
  addBuyerBasics:function(res){
    console.log(res)

    var submitData = res.detail.value
    submitData.buyerID = Number(submitData.buyerID)
    submitData.buyerCreateTime = Date()

    wx.showLoading({
      title: '数据正在提交中......',
      mask:"true"
    })
    db.collection("buyerBasics").add({
      data:submitData
    }).then(res=>{
      console.log(res)
      wx.hideLoading()
    })
  }
})

js（写法二）：

// 连接微信云数据库
const db = wx.cloud.database()

Page({
  data: {
    "buyerID": "",
    "buyerPhone": "",
    "buyerName": "",
    "buyerWeixin": "",
    "buyerPassword": "",
    "buyerCreateTime": ""
  },

  // 向buyerBasics添加数据
  addBuyerBasics:function(res){
    console.log(res)

    var {buyerID, buyerPhone, buyerName, buyerWeixin, buyerPassword} = res.detail.value

    buyerID = Number(buyerID)
    
    wx.showLoading({
      title: '数据正在提交中......',
      mask:"true"
    })
    db.collection("buyerBasics").add({
      data:{
        "buyerID": buyerID,
        "buyerPhone": buyerPhone,
        "buyerName": buyerName,
        "buyerWeixin": buyerWeixin,
        "buyerPassword": buyerPassword,
        "buyerCreateTime": Date()
      }
    }).then(res=>{
      console.log(res)
      wx.hideLoading()
    })
  }
})

js（写法三）：

// 连接微信云数据库
const db = wx.cloud.database()

Page({
  data: {
    "buyerID": "",
    "buyerPhone": "",
    "buyerName": "",
    "buyerWeixin": "",
    "buyerPassword": "",
    "buyerCreateTime": ""
  },

  // 向buyerBasics添加数据
  addBuyerBasics:function(res){
    console.log(res)

    var buyerID = res.detail.value.buyerID
    var buyerPhone = res.detail.value.buyerPhone
    var buyerName = res.detail.value.buyerName
    var buyerWeixin = res.detail.value.buyerWeixin
    var buyerPassword = res.detail.value.buyerPassword
    var buyerCreateTime = Date()

    buyerID = Number(buyerID)
    
    wx.showLoading({
      title: '数据正在提交中......',
      mask:"true"
    })
    db.collection("buyerBasics").add({
      data:{
        "buyerID": buyerID,
        "buyerPhone": buyerPhone,
        "buyerName": buyerName,
        "buyerWeixin": buyerWeixin,
        "buyerPassword": buyerPassword,
        "buyerCreateTime": Date()
      }
    }).then(res=>{
      console.log(res)
      wx.hideLoading()
    })
  }
})

前端效果图：

提交数据后的云数据库：