一、前言
本文将介绍如何在微信小程序中使用云开发中数据库，进行数据的查询和新增，并显示在页面。
数据库操作API
二、数据查询（默认20条）
配置 环境 ID
image.png
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: "xxxx-xxxx", // 环境 ID
traceUser: true,
})
}
this.globalData = {}
}
})
点击创建集合 车辆表
image.png
点击添加记录
手动添加数据
留坑：此时记得点击权限设置，选择所有用户可读，仅创建者可读写，否则后续查询结果为空，默认是 仅创建者可读写。
image.png
<view>
<view wx:for="{{vehicle_list}}" wx:key="property">
<view> {{item.vehicle_id}} {{item.vehicle_name}}</view>
<view> {{item.speed}} {{item.model_code}}</view>
<view> {{item.image_url}}</view>
</view>
</view>
const app = getApp()
const db = wx.cloud.database()
Page({
data: {
vehicle_list: []
},
onLoad: function (options) {
db.collection("tm_vehicle_info").get({ // .get() 获取集合 / 记录数据
success: res => {
console.log(JSON.stringify(res.data, null, 2))
this.setData({
vehicle_list: res.data
})
},
fail: err => {
wx.showToast({
icon: "none",
title: '查询记录失败',
})
}
})
}
})
界面展示及控制台打印
三、数据新增
<view bindtap="addItem">添加数据</view>
const app = getApp()
const db = wx.cloud.database()
Page({
data: {
vehicle_list: []
},
onLoad: function (options) {
db.collection("tm_vehicle_info").get({ // .get() 获取集合 / 记录数据
success: res => {
console.log(JSON.stringify(res.data, null, 2))
this.setData({
vehicle_list: res.data
})
},
fail: err => {
wx.showToast({
icon: "none",
title: '查询记录失败',
})
}
})
},
addItem: function () {
db.collection('tm_vehicle_info').add({ // .add() 在集合上新增记录
data: {
vehicle_id: 4,
vehicle_name: 'Jeep',
model_code: 2,
speed: 690,
image_url: '/images/vehicle/Jeep.png',
},
success: res => {
console.log(res)
},
fail: err => {
wx.showToast({
icon: "none",
title: '插入记录失败',
})
console.log(err)
}
})
}
})
新增记录成功
