小程序云开发之上传数据到数据库

您所在的位置：网站首页 › 小程序怎么上传商品 › 小程序云开发之上传数据到数据库

小程序云开发之上传数据到数据库

2024-07-13 05:32| 来源: 网络整理| 查看: 265

首先我们要在云开发控制台中新建一个名为 Room 的表在这里插入图片描述然后我们要在上传页面的js文件中进行初始化`

const db = wx.cloud.database().collection('Room')//初始化数据库宏定义一个db指代Room表

在这里我们做一个宏定义，就是将这行代码放在JS文件中的 Page({ … }）之外，这样我们后续的一些操作写起来也比较方便。

我们以input组件为例

房间名：

wxss代码为：

.b2{ position: relative; display: flex; padding: 15px; align-items: center; background-color: rgb(255, 255, 255); padding-top: 20px; }

效果图（红色框内）红色框内的上面我们给这个名为input1的input组件添加了一个bindinput出发事件，就是当input1中的数据变化时就会触发该事件。下面我们给出他的JS文件

addRname(event) { console.log("房间名：", event.detail.value) //这里可以让我们在开发的时候在console控制台上看到我们的结果 Rname1 = event.detail.value //这里的Rname1 也是需要在前面进行宏定义的格式为（ let Rname1 = "" ），然后给它赋值 },

这样我们就能够先获取到在input内输入的数据

最后我们再定义一个button按钮来让其上传到数据库中，

提交

Js：

submit: function (e) { let that = this; db.add({ //db之前宏定义的在这里指数据库中的Room表； add指插入 data: { // data 字段表示需新增的 JSON 数据 Rname: Rname1, //将我们获取到的Rname1的value值给Room表中的Rname }, success: function (res) { // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id console.log("上传成功", res) } }) },

以上我们就成功的将用户输入的数据上传到了数据库中，此外我这里还有一些其他的知识点。在这里插入图片描述在这里我们可以看到通过控制switch选择按钮我们还可以将input组件显示或者是隐藏起来这里我也是在网上学习到的，在这里跟大家分享出来： wxml:

//这里的b2 与上面的b2相同是否给房间上锁

【本文地址】

小程序云开发之上传数据到数据库

小程序云开发之上传数据到数据库

今日新闻

推荐新闻