实现一个输入框和一个提交按钮。点击提交按钮时,如果云数据库中没有数据,则将当前输入框内容上传。如果云数据库中有数据,则在
界面中显示"不要重复输入“
提示∶在判断能否上传时,你需要先读取数据库内容,再向数据库上传。实际上要做到这样的连续行为,需要在完成第一个行为的sucess回调函数中执行第二个行为。若不这样操作,则不能保证执行的先后顺序,会产生意外的结果。
之前写的一个示例,题主参考下
###demo.wxml
<view style="padding:10px">
<form bindsubmit="saveToCloudDb">
<input name="text" style="border:solid 1px #ccc;padding:5px;margin-bottom:10px" placeholder="请输入输入内容" />
<button type="primary" form-type="submit">提交</button>
</form>
</view>
###demo.js,注意修改云数据库环境id
wx.cloud.init({env: '题主云数据库环境id'});
const db = wx.cloud.database();
Page({
saveToCloudDb(e){
var text=e.detail.value.text.trim();
if(text!=""){
//获取test集合,查找集合中text字段值等于输入值的记录,如果字段名称不是text,改为.where({xxxx:text}),xxx为字段名称
db.collection('test').where({text}).get({
success(res){
if(res.data.length==0){//不存在保存记录,字段名称为text,其他修改data:{xxxx:text}
db.collection('test').add({data:{text}}).then(e=>{
wx.showToast({title: '保存成功'});
}).catch((e)=>{
wx.showToast({title: '保存失败',icon:'none'});
console.log(e)
});
}
else wx.showToast({title: '不要重复输入',icon:'none'});
}
})
}
}
})
获取云端的数据存在是否有内容,没有就上传,否则就给出对应提示。
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
desc: null,
hidden: true,
},
onDescInput(e) {
this.setData({
desc: e.detail.value
})
},
onUpload() {
const db = wx.cloud.database()
db.collection('todo').where({
desc: this.data.desc
})
.get()
.then(res => {
console.log(res)
if (res.data.length > 0) {
this.setData({
hidden: false
})
} else {
db.collection('todo').add({
data: {
desc: this.data.desc
}
}).then(console.log).catch(console.log)
}
})
.catch(console.log)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
<!--pages/test/test.wxml-->
<view>
<input bindinput="onDescInput" value="{{desc}}" placeholder="请输入"/>
<button bindtap="onUpload">上传</button>
<view wx:if="{{!hidden}}">已存在</view>
</view>
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!