之前一節(jié)然我們認識了云開發(fā)的配置，申請获三，這一節(jié)則進行云開發(fā)中數(shù)據(jù)庫的操作旁蔼，打開云控制臺，進行數(shù)據(jù)庫的創(chuàng)建疙教，這里我們創(chuàng)建了名稱為todos的集合棺聊，具體數(shù)據(jù)庫的介紹我們可以去查看官方介紹傳送門
2-1.png
數(shù)據(jù)庫創(chuàng)建完成，則我們就可以進行接下來數(shù)據(jù)庫的則刪改查的編寫了贞谓，我們在項目中相關頁面的創(chuàng)建和注冊
2-2.png
app.json頁面的注冊：
{
"pages": [
"pages/databaseControl/databaseControl",
"pages/query/query",
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
"pages/addData/addData"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云開發(fā) QuickStart",
"navigationBarTextStyle": "black"
}
}
頁面注冊完成進行控制頁面的編寫躺屁，頁面會包含增加數(shù)據(jù)，查看數(shù)據(jù)经宏，修改數(shù)據(jù)犀暑，刪除數(shù)據(jù)四個功能分類：
databaseControl.wxml
<view class='container'>
<text>數(shù)據(jù)庫數(shù)據(jù)操作</text>
<button class='btn_add' bindtap='onAddData'>添加數(shù)據(jù)</button>
<button class='btn_add' bindtap='onQuery'>查詢數(shù)據(jù)</button>
<button class='btn_add' bindtap='onDelete'>刪除數(shù)據(jù)</button>
<button class='btn_add' bindtap='onUpdate'>修改數(shù)據(jù)</button>
</view>
databaseControl.wxss
/* pages/databaseControl/databaseControl.wxss */
.item_style {
margin-top: 20rpx;
width: 95%;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #eee;
border-radius: 5rpx;
padding: 10rpx;
}
item_style_clo {
margin-top: 20rpx;
width: 95%;
display: flex;
flex-direction: column;
border: 1px solid #eee;
border-radius: 5rpx;
padding: 10rpx;
}
.input{
margin-left: 5rpx;
}
.btn_add{
width: 95%;
margin-top: 20rpx;
}
databaseControl.js
// pages/databaseControl/databaseControl.js
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {},
// 新增數(shù)據(jù)
onAddData() {
wx.navigateTo({
url: '/pages/addData/addData',
})
},
// 查詢操作
onQuery() {
wx.navigateTo({
url: '/pages/query/query',
})
},
// 刪除操作
onDelete() {
wx.navigateTo({
url: '/pages/query/query?flag_delete=' + false+"&flag_update=" + true,
})
},
//修改操作
onUpdate() {
wx.navigateTo({
url: '/pages/query/query?flag_update=' + false +"&flag_delete=" + true,
})
}
})
編譯項目我們可以看到現(xiàn)在頁面
2-3.png
數(shù)據(jù)的新增
操作數(shù)據(jù)的新增，我們可以在addData里邊進行烁兰，我們就以添加用戶信息為例：
addData.wxml
<!--pages/databaseControl/databaseControl.wxml-->
<view class='container'>
<text class='title'>個人信息</text>
<view class='item_style'>
姓名：
<input class='input' type='text' bindinput='inputChangedName' placeholder='輸入姓名'> </input>
</view>
<view class='item_style'>
年齡：
<input class='input' type='number' bindinput='inputChangedAge' placeholder='輸入年齡' maxlength='3'> </input>
</view>
<view class='item_style'>
性別：
<input class='input' type='text' bindinput='inputChangedSex' placeholder='輸入性別' maxlength='1'> </input>
</view>
<view class='item_style'>
地址：
<input class='input' type='text' bindinput='inputChangedAddress' placeholder='輸入地址' maxlength='25'> </input>
</view>
<view class='item_style_clo'>
愛好：
<checkbox-group bindchange="checkboxChanged">
<label wx:for='{{hobbys}}'>
<checkbox value='{{item.value}}' /> {{item.name}}
</label>
</checkbox-group>
</view>
<button class='btn_add' bindtap='addData'>添加數(shù)據(jù)</button>
</view>
addData.wxss
/* pages/databaseControl/databaseControl.wxss */
.item_style {
margin-top: 20rpx;
width: 95%;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #eee;
border-radius: 5rpx;
padding: 10rpx;
}
item_style_clo {
margin-top: 20rpx;
width: 95%;
display: flex;
flex-direction: column;
border: 1px solid #eee;
border-radius: 5rpx;
padding: 10rpx;
}
.input{
margin-left: 5rpx;
}
.btn_add{
width: 95%;
margin-top: 20rpx;
}
addData.js
// pages/addData/addData.js
const app=getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
openid: '',
counterId: '',
count: 0,
username: '',
age: 0,
sex: '',
address: "",
hobbys: [{
name: '籃球',
value: 'basktball',
checked: true,
}, {
name: '足球',
value: 'football'
}, {
name: '乒乓球',
value: 'pingpang'
}, {
name: '羽毛球',
value: 'yumao'
}, ],
checkHb: []
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
if (app.globalData.openid) {
this.setData({
openid: app.globalData.openid
})
}
},
inputChangedName(e) {
this.setData({
username: e.detail.value
})
},
inputChangedAge(e) {
this.setData({
age: e.detail.value
})
},
inputChangedSex(e) {
this.setData({
sex: e.detail.value
})
},
inputChangedAddress(e) {
this.setData({
address: e.detail.value
})
},
checkboxChanged(e) {
console.log(e.detail.value)
this.setData({
checkHb: e.detail.value
})
},
addData: function(e) {
if (!(this.data.username != '' && this.data.address != '' && this.data.sex != '' && this.data.age != 0)) {
wx.showToast({
title: '輸入內(nèi)容不能為空',
icon: 'none',
})
return
}
const db = wx.cloud.database()
db.collection('todos').add({
data: {
username: this.data.username,
age: this.data.age,
sex: this.data.sex,
address: this.data.address,
checkHb: this.data.checkHb
},
success: res => {
// 在返回結果中會包含新創(chuàng)建的記錄的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增記錄成功',
})
console.log('[數(shù)據(jù)庫] [新增記錄] 成功耐亏，記錄 _id: ', res._id)
wx.redirectTo({
url: '/pages/query/query',
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增記錄失敗'
})
console.error('[數(shù)據(jù)庫] [新增記錄] 失敗：', err)
}
})
}
})
對于數(shù)據(jù)的上傳這里寫的有點兒啰嗦沪斟，可以使用另一種方法進行广辰，那就是表單格式去提交信息暇矫，之后會在信息的修改上使用，編譯項目運行結果：
2-4.png
我們可以進行信息的填寫和添加择吊，添加完成猴我們可以在云開發(fā)控制臺數(shù)據(jù)庫查看我們新增的數(shù)據(jù)李根；
在這里我們著重的注意的是操作數(shù)據(jù)添加的方法
const db = wx.cloud.database()
db.collection('todos').add({
data: {
username: this.data.username,
age: this.data.age,
sex: this.data.sex,
address: this.data.address,
checkHb: this.data.checkHb
},
success: res => {
// 在返回結果中會包含新創(chuàng)建的記錄的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增記錄成功',
})
console.log('[數(shù)據(jù)庫] [新增記錄] 成功，記錄 _id: ', res._id)
wx.redirectTo({
url: '/pages/query/query',
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增記錄失敗'
})
console.error('[數(shù)據(jù)庫] [新增記錄] 失敿妇Α：', err)
}
})
數(shù)據(jù)的查詢房轿，修改，刪除
query.wxml
<!--pages/query/query.wxml-->
<view class='container'>
<block wx:for='{{queryResult}}'>
<form class='item' bindsubmit='updataData' id='{{item._id}}'>
<view class='item_child'>
姓名：
<input class='input_style' type='text' value='{{item.username}}' maxlength='5' name="username"></input>
</view>
<view class='item_child'>
年齡：
<input class='input_style' type='number' value='{{item.age}}' maxlength='3' name='age'></input>
</view>
<view class='item_child'>
性別：
<input class='input_style' type='text' value='{{item.sex}}' maxlength='4' name='sex'></input>
</view>
<view class='item_child'>
地址：
<input class='input_style' type='text' value='{{item.address}}' maxlength='20' name='address'></input>
</view>
<view class='item_child'>
<button class='btn' id='{{item._id}}' bindtap='deleteData' hidden='{{flag_delete}}'>刪除數(shù)據(jù)</button>
<button class='btn' form-type='submit' hidden='{{flag_update}}'>修改數(shù)據(jù)</button>
</view>
</form>
</block>
</view>
query.js
// pages/query/query.js
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
queryResult: "",
openid: '',
username: '',
age: 0,
sex: "",
address: '',
_id: '',
flag_update: true,
flag_delete: true,
title: ''
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
var that = this
if (options.flag_update == 'false') {
that.setData({
flag_update: false
})
}
if (options.flag_delete == 'false') {
that.setData({
flag_delete: false
})
}
if (app.globalData.openid) {
that.setData({
openid: app.globalData.openid,
})
}
// console.log(options.flag_delete)
// console.log(options.flag_update)
that.onQuery()
},
// 查詢數(shù)據(jù)
onQuery: function() {
console.log(this.data.flag_update)
console.log(this.data.flag_delete)
const db = wx.cloud.database()
// 查詢當前用戶所有的 todos
db.collection('todos').where({
_openid: this.data.openid
}).get({
success: res => {
this.setData({
queryResult: res.data
})
console.log('[數(shù)據(jù)庫] [查詢記錄] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查詢記錄失敗'
})
console.error('[數(shù)據(jù)庫] [查詢記錄] 失斔：', err)
}
})
},
// 刪除數(shù)據(jù)
deleteData(e) {
var that = this
console.log(e)
const db = wx.cloud.database()
db.collection('todos').doc(e.target.id).remove({
success: res => {
wx.showToast({
title: '刪除成功',
})
that.setData({
_id: '',
})
that.onQuery()
},
fail: err => {
wx.showToast({
icon: 'none',
title: '刪除失敗',
})
console.error('[數(shù)據(jù)庫] [刪除記錄] 失敶殉帧：', err)
}
})
},
// 更新數(shù)據(jù)
updataData(e) {
console.log(e)
var that = this
//獲取表單信息
that.setData({
username: e.detail.value.username,
age: e.detail.value.age,
sex: e.detail.value.sex,
address: e.detail.value.address,
_id: e.target.id
})
//更新數(shù)據(jù)
that.updata()
},
//更新數(shù)據(jù)的方法
updata() {
const db = wx.cloud.database()
var that = this
db.collection('todos').doc(this.data._id).update({
data: {
username: that.data.username,
age: that.data.age,
sex: that.data.sex,
address: that.data.address
},
success: res => {
wx.showToast({
title: '新增記錄成功',
})
console.log('[數(shù)據(jù)庫] [新增記錄] 成功，記錄 _id: ', res._id)
},
fail: err => {
icon: 'none',
console.error('[數(shù)據(jù)庫] [更新記錄] 失敾兰谩：', err)
}
})
},
})
query.wxss
/* pages/query/query.wxss */
.item{
width: 95%;
margin: 10rpx;
padding: 10rpx;
display: flex;
flex-direction: column;
border: 1px solid #eee;
border-radius: 10px;
}
.item_child{
display: flex;
flex-direction: row;
margin-top: 5rpx;
margin-bottom: 5rpx;
}
.input_style{
background: #eee;
width: 80%;
padding: 5rpx;
}
.btn{
width: 95%;
margin: 10rpx;
}
在當前頁面我們整合查詢纷妆，修改，刪除于一個頁面晴弃，針對在控制頁不同功能進行不同的展示掩幢；
2-5.png
2-6.png
2-7.png
至此我們需要注意的是如何進行數(shù)據(jù)的修改，查詢上鞠，刪除粒蜈，在代碼中都已詳細寫出！
