编写一个微信小程序将注册信息导入到云数据库中。
开发平台:微信开发者工具
在云开发的数据库添加数据库userinfo:
添加调用数据库的字段:
const db = wx.cloud.database()
const usf=db.collection('userinfo')
-
在rg.js页面进行添加”
-
添加用户信息到”userinfo”数据库
usf.add({
data:{
"user":ac,
"password":ps
}
})
- 控制台显示注册成功,数据库中已经添加了相关记录
数据库权限要设置为第一个
完整代码:
rg.js
const db = wx.cloud.database()
const usf=db.collection('userinfo')
Page({
/**
* 页面的初始数据
*/
data: {
warning:'',
key:false,
account:'',
password:'',
repassword:''
},
getaccount(e){
console.log("输入的用户名",e.detail.value)
this.setData({
account:e.detail.value
})
},
getpsw(e){
console.log("输入的密码",e.detail.value)
this.setData({
password:e.detail.value
})
},
getrepsw(e){
console.log("输入的确认密码",e.detail.value)
this.setData({
repassword:e.detail.value
})
},
submit(e) {
let ac = this.data.account
let ps = this.data.password
let rps = this.data.repassword
if(ac.length<1){
wx.showToast({
title: '用户名不能为空',
mask:true,
icon:'none',
duration:1000
})
}
else if (ps.length < 6 || ps.length > 12) {
wx.showToast({
title: '密码为6位至12位',
mask:true,
icon:'none',
duration:1000
})
console.log("密码为6位至12位")
}
else if(rps!=ps){
wx.showToast({
title: '确认密码输入错误',
mask:true,
icon:'none',
duration:1000
})
}
else{
console.log("信息正确,可以注册")
usf.add({
data:{
"user":ac,
"password":ps
}
})
console.log("用户注册成功")
}
}
})
rg.json
{
"usingComponents": {}
}
rg.wxml
<image class="pic" src="../../images/register.png" mode="widthFix"></image>
<view>
<view class="title">用户名:</view>
<input class="input" name="stuno" placeholder="请输入您的用户名" type="number" bindinput="getaccount" maxlength="11"></input>
<view class="title">密码:</view>
<input class="input" name="password" placeholder="请设置您的密码" bindinput="getpsw" password></input>
<input class="input" name="repassword" placeholder="请重复您的密码" bindinput="getrepsw" password></input>
</view>
<button class="btn" hover-class="anxia" bindtap="submit">注册</button>
rg.wxss
/* pages/rg/rg.wxss */
.pic{
display:flex;
width: 100%;
justify-content: center;
align-items:center;
}
.title{
margin-left: 20rpx;
}
.input{
border-bottom:solid;
border-color: gainsboro;
margin-top:10rpx;
width:90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10rpx;
border-width: 4rpx;
}
.btn{
font-size: 10pt;
height: 55rpx;
background: #ffcc01;
color: black;
text-align: center;
border-radius: 50px;
margin: 30% 20% 30% 20%;
}