位置: IT常识 - 正文

微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中(微信小程序如何删除)

编辑:rootadmin
微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中 一、表单数据发送到数据库1. 利用bindsubmit来写一个函数<form bindsubmit="bindSubmit"> <view class="form_border"> <label>收件人名称:</label> <input name="userName" auto-focus placeholder=" 请填写收件人" /> </view> <view class="form_border"> <label>在哪里取件:</label> <input name="getAdress" placeholder=" 请填写取件地址" /> </view> <view class="form_border"> <label>送到哪里去:</label> <input name="putAdress" placeholder=" 请填写送货地址" /> </view> <view class="form_border"> <label>送达时间:</label> <input name="getTime" placeholder=" 请填写送达时间" /> </view> <view class="form_border"> <label>取件码:</label> <input name="getNumber" placeholder=" 请填写取件码" /> </view> <view class="form_border"> <label>联系电话:</label> <input name="userNumber" placeholder=" 请填写联系电话" /> </view> <view class="form_border"> <label>酬劳费用:</label> <input name="getPrice" placeholder=" 请填写酬劳费用" /> </view> <button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button></form>2. 给每一个变量一个name值,用于传值

推荐整理分享微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中(微信小程序如何删除),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序如何退出登录,微信小程序如何清除数据,微信小程序如何删除,微信小程序如何删除,微信小程序如何申请,微信小程序如何申请,微信小程序如何开店,微信小程序如何批量删除,内容如对您有帮助,希望把文章链接给更多的朋友!

如上图

3. 添加两个按钮用于提交表单和重置表单 <button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button>微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中(微信小程序如何删除)

 form-type的不同属性实现不同的作用。

4. 下面是wxss的样式,不做解释view{ height: 100rpx; margin-top: 20rpx;}input{ width: 750rpx; height: 60rpx; display: block; box-sizing: border-box}label{ display: inline-flex; width: 300rpx; height: 50rpx; margin-bottom: 20rpx;}.form_border{ margin: 20rpx,20rpx,20rpx,20rpx; padding-bottom: 20rpx; border-bottom: solid #b3aeae; display:inline-flexbox;}input{ font-size: 35rpx; font-family: Verdana, Geneva, Tahoma, sans-serif; padding-bottom: 20rpx;}.button{ align-items: center; text-align: center; color: #FFFFFF; border-radius: 25rpx; padding: 10rpx; margin-top: 80rpx; margin-bottom: 0rpx; width:50%; height: 100rpx; /* z-index:666; */ bottom:15rpx; display: -webkit-flex; justify-content:center; background-color: #259dff;}.hover-button{ position: relative; top: 3rpx; left: 3rpx; box-shadow:0px 0px 8px rgba(0, 0, 0, 0.1) inset; background: rgb(195, 219, 182);} 5. js部分的函数实现 data: { "userName":"", "getAdress":"", "putAdress":"", "getTime":"", "getNumber":"", "userNumber":"", "getPrice":"" }, bindSubmit:function(res){ console.log(res) var userName = res.detail.value.userName var getAdress = res.detail.value.getAdress var putAdress = res.detail.value.putAdress var getTime = res.detail.value.getTime var getNumber = res.detail.value.getNumber var userNumber = res.detail.value.userNumber var getPrice = res.detail.value.getPrice userNumber = Number(userNumber) getNumber = Number(getNumber) getPrice = Number(getPrice) wx.showLoading({ title: '订单发布中...', mask: "true" }) db.collection("put_list").add({ data: { "userName":userName, "getAdress":getAdress, "putAdress":putAdress, "getTime":getTime, "getNumber":getNumber, "userNumber":userNumber, "getPrice":getPrice }, success: function(res){ console.log(res) wx.hideLoading() } }) },6. 效果展示

二、表单数据库发送到数据库之后,将数据渲染到页面上 1. 用小程序中的接口函数来实现const db = wx.cloud.database()//全局变量放在page外面onLoad:function(options) { db.collection('put_list').get({ success: res=>{ console.log('请求成功',res)//res.data包含该记录的数据 this.setData({ List: res.data }) }, fail(err){ console.log('请求失败',err) } }) },

db.collection(这里面是数据库中集合的名字).

我最大的疑问是:我在这一步:success:function(res){}这样写错了,页面一直不显示,明明显示请求成功,唉!改成:success:res=>就成功了

2. 要有一个空数组来存数据data: { List: [] },3. 最后在wxml中渲染,调用数组,来显示数据

因为把数据库中的数据存在了空数组中,然后调用数组就可以显示出数据库中的数据

<block wx:for="{{List}}"><!-- 上面 --><view class="container0"><view class="left">*用户名: {{item.userName}}</view><view class="right">取件码: {{item.getNumber}}</view></view><!-- 中间 --><view class="container2"> <view>取件地址:{{item.getAdress}}</view> <view>送货地址:{{item.putAdress}}</view> <view>送达时间:{{item.getTime}}</view></view><!-- 下面 --><view class="container1"> <view class="left">联系电话:{{item.userNumber}}</view> <view class="right">酬劳:{{item.getPrice}}元</view></view></block>4. 效果展示

本文链接地址:https://www.jiuchutong.com/zhishi/297761.html 转载请保留说明!

上一篇:(附源码)Springboot宠物领养系统毕业设计241104(读懂spring源码)

下一篇:2023MathorcupC题电商物流网络包裹应急调运与结构优化问题建模详解+模型代码(一)(2021mathorcupc题答案)

  • 小规模纳税人代收水电费税率
  • 安全生产费用怎么入账
  • 个人所得税核定征收税率是多少
  • 没有上市的公司怎么看财务报表
  • 民营医院的财务管理制度
  • 小企业出租设备分录
  • 未开具发票负数的原因
  • 微信公众号认证费用
  • 子公司固定资产移到母公司
  • 应收利息对应什么科目
  • 土地增值税可扣除的税金有哪些
  • 建筑施工企业的法定代表人对本企业的安全生产负责
  • 建筑工程勘察费占设计费的比例
  • 诉讼费走哪个会计科目
  • 互联网企业资产负债表特征
  • 地产佣金收入属什么收入
  • 营改增后书据转移印花税是含税的吗?
  • 碎石需要技术吗
  • 电子发票详见清单怎么开
  • 企业购买救生棒合法吗
  • 公司员工租金取得专用发票能否抵扣?
  • 孵化器 怎么赚钱
  • 汽车中介赚钱吗
  • 交强险是不是只要有发票就可以报销
  • 事业单位事业收入和经营收入要上缴财政
  • 以前年度损益在借方
  • 股东私人垫支公司支付零星材料的会计分录
  • 非上市公司股权转让
  • 资本公积可以退还给投资者吗
  • 返聘人员如何缴纳个人所得税
  • xp系统怎么取消用户登录
  • 如何更改自己
  • hif文件怎么打开
  • 对公转账需要填写开户行吗
  • 其他应付款不用付了怎么处理
  • 录制权限怎么打开
  • 工程结算需要哪些施工方案
  • php 上传
  • 融资租赁综合利息计算
  • 固定资产清理如何结转
  • 好奇地看着我
  • ✝️ 强制 Vue 重新渲染组件的正确方法
  • 私营独资企业的税收规定
  • 小规模纳税人进项票可以抵扣吗
  • 公司网站维护费用计哪个科目
  • php graph
  • ajaxuploadfile
  • bert模型能做什么
  • 残障金什么时候开始交
  • 报废的固定资产清理的净损失计入营业外支出
  • 收到增值进项发票
  • 补缴去年的附加税怎么算
  • 会计分录税金及附加有哪些
  • 企业财务费用为负好不好
  • 无形资产界定
  • 预缴增值税怎么计提
  • 代收收入
  • 可以自行开具增值税专用发票的行业有哪些
  • 货物破损怎么写会计分录
  • 合并报表怎么合并
  • 核定征收小规模做汇算清缴吗
  • 无偿租借
  • 管理费用的明细科目如何设置
  • win7系统如何关闭系统自检
  • window windows10
  • linux所谓的free
  • 清华同方bios通用密码(thtfpc)
  • 如何隐藏windows激活水印
  • ubuntu做lvm
  • 使用移动硬盘快速启动
  • windows xp隐藏文件夹
  • ahci模式下安装win7蓝屏
  • 如何解决win10系统开机一直转圈圈的问题
  • window10的小娜不支持中文版
  • dota2 服务器ip地址
  • 用python做
  • python的params
  • js选中文字
  • android退出程序代码
  • 土地增值税有哪些征收方式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设