微信小程序云开发 初学者入门教程二-前端操作数据库模块
如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必有所得。
数据库操作大多数需要用户openid,需要先配置好吧login云函数,如果已经配置好了,获取用户的openid之后,开始步骤:
步骤
1:打开云开发控制台,进入到数据库管理模块
图片.png
2:选择添加集合,集合名称为counters,添加完成之后的界面
图片.png
3:可以看到counters集合出现在左侧集合列表中
注:集合必须在云开发控制台中创建
4:新增一条记录试一试
a. 打开pages/databaseGuide/databaseGuide.js
文件,定位到 onAdd 方法
图片.png
b:选中所有注释过的代码,ctrl /快捷键,解除注释
代码语言:javascript复制 onAdd: function () {
const db = wx.cloud.database()
db.collection('counters').add({
data: {
count: 1
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},
c. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录
代码语言:javascript复制{ "_id": "数据库自动生成记录 ID 字段",
"_openid": "数据库自动插入记录创建者的 openid", "count": 1 }
在桌面新建一个json文件,将这段代码复制黏贴进去,备用
图片.png
导入之后显示的界面
图片.png
d: 点击按钮:新增记录
图片.png
e:在云开发 -> 数据库 -> counters 集合中可以看到新增的记录
图片.png
微信小程序云开发数据库操作一添加记录实例演示
官方文档解读:
代码语言:javascript复制<!-- 新增记录 -->
<view class="guide" wx:if="{{step === 3}}">
<text class="headline">新增记录</text>
<text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onAdd 方法</text>
<text class="p">2. 把注释掉的代码解除注释</text>
<image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
<text class="p">3. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录</text>
<text class="code">
{
"_id": "数据库自动生成记录 ID 字段",
"_openid": "数据库自动插入记录创建者的 openid",
"count": 1
}
</text>
<text class="p">4. 点击按钮</text>
<button size="mini" type="default" bindtap="onAdd">新增记录</button>
<text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
<text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>
<div class="nav">
<button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
<button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
</div>
</view>
做一个小demo
效果如下:点击新增记录的按钮的时候,会出现提示,新增的记录为多少,并且有弹框提示,新增记录成功。
U6QBH3PeXy.gif
打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录
图片.png
wxml代码:
代码语言:javascript复制<button size="mini" type="default" bindtap="onAdd">新增记录</button>
<text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
js代码:
代码语言:javascript复制// pages/databaseGuide/databaseGuide.js
const app = getApp()
Page({
data: {
step: 1,
counterId: '',
openid: '',
count: null,
queryResult: '',
},
onLoad: function (options) {
if (app.globalData.openid) {
this.setData({
openid: app.globalData.openid
})
}
},
onAdd: function () {
const db = wx.cloud.database()
db.collection('counters').add({
data: {
count: 1
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},
})
对于数据库的增删改查 后续会有更加细致的文章: 1:微信小程序云开发数据库操作一添加记录 2:微信小程序云开发数据库操作二查询记录 3:微信小程序云开发数据库操作三删除记录 4:微信小程序云开发数据库操作四更新记录
下班之后带着电脑回家,在地铁上拥挤非常,感觉电脑都要被挤坏了,这几天反思了一下从前,每天上班下班,完成老板给的任务就可以潇洒走人了,总觉得自己不够努力,又或者每天重复着老旧的技术,周而复始,早已落后于前端发展的潮流,不觉开始惶恐。每天晚上开始学习,戒掉游戏和手机,让自己尽快达到一个沉迷于代码不可自拔的境界。
原文作者:祈澈姑娘