微信小程序云开发【数据插入与表单提交】

笔记 2020-07-27

数据插入

1.在前端绑定一个函数 addData，然后在js中写这个函数

前面的步骤都和get相似，都要连接总数据库

具体代码是这样子

 //插入数据函数
addData(){
   db.collection("demolist").add({
     data:{
       title:"测试标题",
       author:"张三",
       content:"测试内容部分测试内容部分测试内容部分"
     }
   })
 },

这里代表插入三个数值
add() 里面是写一个对象，在该对象里面还要写一个

data：{

} 

也是对象类型

这是没有写回调的，在控制台什么都看不到，但是点击按钮之后会在数据库有插入新的数据，并且有多一个openid参数

在add后面增加一个then 回调函数,写法和get是一样的

addData(){
   db.collection("demolist").add({
     data:{
       title:"测试标题2",
       author:"李四",
       content:"aaaaaaaaaaa"
     }
   }).then(res=>{
     console.log(res);
   })
 },

控制台会打印出id

可以加一个showloading函数，让用户无法重复点击
记得在回调成功之后hideloading
设置 mask:true 使用户此时无法点击

addData(){
   wx.showLoading({
     title: '数据加载中',
     mask:true
   })
   db.collection("demolist").add({
     data:{
       title:"测试标题2",
       author:"李四",
       content:"aaaaaaaaaaa"
     }
   }).then(res=>{
     console.log(res);
     wx.hideLoading()
   })
 },

表单提交

wxml页面写一个form表单 绑定事件btnSub
给提交按钮一个属性 form-type=“submit” （代表提交 reset代表重置）
name 唯一属性 传值时根据name传递

<form bindsubmit="btnSub">
    <input name="title" placeholder="请输入标题"></input>
    <input name="author" placeholder="请输入作者"></input>
    <textarea name="content" placeholder="请输入内容"></textarea>
    <button type="primary" form-type="submit">提交</button>
</form>

在js中写事件，直接传递res，打印测试结果在detail—>value里面

btnSub(res){
   console.log(res);
 },

用ES6提供的方法结构value中的所有值赋值给定义的对象

解构的方法

btnSub(res){
    //老方法获取所有值
    // var title=res.detail.value.title;
    // var author=res.detail.value.author;
    // var content=res.detail.value.content;

    //es6结构方法获取所有值（简易）
    var {title,author,content}=res.detail.value;
    console.log(title,author,content);
  },

第三种方法 直接传递对象的方法

//表单提交函数
btnSub(res){
   //老方法获取所有值
   // var title=res.detail.value.title;
   // var author=res.detail.value.author;
   // var content=res.detail.value.content;

   //es6结构方法获取所有值（简易）
   var {title,author,content}=res.detail.value;
   var resVlu=res.detail.value;
   db.collection("demolist").add({
     data:resVlu
     // data:{
     //   title:title,
     //   author:author,
     //   content:content
     // }
   }).then(res=>{
     console.log(res)
   })
 },

总结

第一种，分别赋值
第二种，结构
第三种，传递对象