小程序将form表单数据写入云数据库
2023-09-11 14:22:20 时间
先将form表单写入Page的data,接着再从data里取出来写入数据库?或者直接获取form表单数据时就写进数据库,无须更新page里面的data,不过,如果要在其他页面再写数据库的话,还是先更新页面的data,再在其他页面取出该页面的data进行相关的操作吧。
page_02.wxml
1 <view class='forms'>
2 <form bindsubmit='getForm'>
3 <view class='getform'>
4 <view>用戶名:
5 <input type='text' name='username' placeholder='請輸入用戶名'/>
6 </view>
7 <view>年齡:
8 <input type='text' name='age' placeholder='請輸入年齡'></input>
9 </view>
10 <view>性別:
11 <input type='text' name='gender' placeholder='請輸入性別'></input>
12 </view>
13 </view>
14
15 <view class="btn-area">
16 <button formType="submit">Submit</button>
17 </view>
18 </form>
19
20 <view class="btn-area">
21 <button bindtap='getData'>Get</button>
22 </view>
23 </view>
20~22行是操作数据库的按钮
page_02.wxss
样式没写,保持最原始的
.btn-area{
background-color: #e4e4e4;
width: 30%;
margin: auto; /*居中處理*/
border-radius: 20rpx;
margin-top: 10px;
}
page_02.js
主要有两个函数,getForm是用form表单的数据更新page里面的data
getData用来取出data中的数据写入云数据库,该函数使用了promise风格
1 // pages/page_02/page_02.js
2 Page({
3
4 /**
5 * 页面的初始数据
6 */
7 data: {
8 username:"",
9 age:0,
10 gender:""
11
12 },
13
14 /**
15 * 生命周期函数--监听页面加载
16 */
17 onLoad: function (options) {
18
19 },
20
21 /**
22 * 生命周期函数--监听页面初次渲染完成
23 */
24 onReady: function () {
25
26 },
27
28 getForm:function(e){
29 var formdata = e.detail.value;
30 this.setData({
31 "data.username":formdata.username,
32 "data.age":formdata.age,
33 "data.gender":formdata.gender
34 })
35 console.log("更新data",e)
36 },
37
38 getData:function(e){
39 var getdata = this.data;
40 const db = wx.cloud.database();
41 db.collection("user_info").add({
42 data:{
43 username:getdata.data.username,
44 age:getdata.data.age,
45 gender:getdata.data.gender
46 }
47 }).then(res=>{
48 console.log("添加至數據庫成功",res)
49 }).catch(res=>{
50 console.log("添加失敗",res)
51 })
52 }
53 })
最后的效果如下:
相关文章
- SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型
- c#Winform程序调用app.config文件配置数据库连接字符串 SQL Server文章目录 浅谈SQL Server中统计对于查询的影响 有关索引的DMV SQL Server中的执行引擎入门 【译】表变量和临时表的比较 对于表列数据类型选择的一点思考 SQL Server复制入门(一)----复制简介 操作系统中的进程与线程
- linux源码编译-安装timescaledb数据库(中标麒麟+龙芯CPU) (转载)
- Oracle imp/impdp 导入dmp文件到数据库
- win7 x64 使用VS2003报错 fatal error C1033: 无法打开程序数据库
- Android 判断数据库中是否存在某个表
- rpc - rpc 程序号数据库
- 实战 - 数据库设计
- 七步让Java程序通过JDBC连接数据库
- 关系型数据库可视化操作工具---客户端navicat安装教程
- Java程序中解决数据库超时与死锁
- VS2012不能创建数据库连接出现或者连接数据库时提示:未能载入文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=10.0.0.0, C
- Android程序猿必掌握的sqlite数据库连表查询
- Oracle 数据库,远程访问 ora-12541:TNS:无监听程序
- 备份和还原 Linux 上的 SQL Server 数据库