小程序将form表单数据写入云数据库-小程序表单源码-小程序表单制作-即速应用

小程序将form表单数据写入云数据库-小程序表单源码-小程序表单制作

浏览量：1703 时间：2020-04-01 来源：weixin_30733003

1.先将form表单写入Page的data，接着再从data里取出来写入数据库？或者直接获取form表单数据时就写进数据库，无须更新page里面的data，不过，如果要在其他页面再写数据库的话，还是先更新页面的data，再在其他页面取出该页面的data进行相关的操作吧。
2.page_02.wxml
1viewclass='forms'2formbindsubmit='getForm'3viewclass='getform'4view用戶名:5inputtype='text'name='username'placeholder='請輸入用戶名'/6/view7view年齡:8inputtype='text'name='age'placeholder='請輸入年齡'/input9/view10view性別:11inputtype='text'name='gender'placeholder='請輸入性別'/input12/view13/view1415viewclass="btn-area"16buttonformType="submit"Submit/button17/view18/form1920viewclass="btn-area"21buttonbindtap='getData'Get/button22/view23/view
3.20~22行是操作数据库的按钮
4.page_02.wxss
5.样式没写，保持最原始的
.btn-area{background-color:#e4e4e4;width:30%;margin:auto;/*居中處理*/border-radius:20rpx;margin-top:10px;}
6.page_02.js
7.主要有两个函数，getForm是用form表单的数据更新page里面的data
8.getData用来取出data中的数据写入云数据库，该函数使用了promise风格
1//pages/page_02/page_02.js2Page({34/**5*页面的初始数据6*/7data:{8username:"",9age:0,10gender:""1112},1314/**15*生命周期函数--监听页面加载16*/17onLoad:function(options){1819},2021/**22*生命周期函数--监听页面初次渲染完成23*/24onReady:function(){2526},2728getForm:function(e){29varformdata=e.detail.value;30this.setData({31"data.username":formdata.username,32"data.age":formdata.age,33"data.gender":formdata.gender34})35console.log("更新data",e)36},3738getData:function(e){39vargetdata=this.data;40constdb=wx.cloud.database();41db.collection("user_info").add({42data:{43username:getdata.data.username,44age:getdata.data.age,45gender:getdata.data.gender46}47}).then(res={48console.log("添加至數據庫成功",res)49}).catch(res={50console.log("添加失敗",res)51})52}53})
9.最后的效果如下：