微信小程序云开发 mysql_微信小程序云开发学习笔记(一)云数据库

这篇博客详细介绍了如何使用微信小程序云开发进行数据库的增删改查操作。从初始化云开发环境到创建数据库集合,再到添加固定数据和用户输入的不确定数据,以及查询、删除和更新数据的方法,每一步都提供了清晰的代码示例和测试步骤。
摘要由CSDN通过智能技术生成

云开发配置的环境:cloud-learning

云开发环境初始化准备

需要:

APPID

操作:

在创建项目时,填入APPID并选择不使用云函数

进入到开发者页面,点击左上角的云开发并选择开通

设置云开发环境名称,可以任意填写

在project.config.json中加入字段"cloudfunctionRoot":"cloud"

在打开的云开发控制台中点击设置,新建一个环境ID

app.js中删除所有代码,只保留env即环境ID

App({

onLaunch: function () {

//云开发环境初始化

wx.cloud.init({

env:"cloud-learning-i44qm"

})

}

})

1cfc94429e485d6ae17251e989a74636.png

3ee20d31d85cad56579d43b39ba14ecb.png

在根目录下创建文件夹(目录)cloud

云数据库

新增固定的数据

效果:通过点击一个按键可以向云数据库中新增固定字段的内容

实现:

在index.wxml中,加入如下代码

新增数据

点击云开发-->数据库-->创建集合testlist

在index.js中加入如下代码

const DB = wx.cloud.database().collection("testlist")

Page({

addData(){

console.log('调用添加数据的方法')

DB.add({

data:{

name:'panda bear',

price:9999

},

success(res) {

console.log("成功", res)

},

fail(res) {

console.log("失败", res)

}

})

}

})

测试:点击新增数据按钮,发现控制台上有相应输出,再进入到云开发的数据库页面,发现上述字段已新增

新增用户输入的不确定数据

效果:用户通过输入想新增的数据并点击确定新增按键,即可向云数据库中新增用户想新增的数据

实现:

在index.wxml中加入如下代码

\n

\n

新增数据

在index.js中加入如下代码

const DB = wx.cloud.database().collection("list")

let name = ''

let age = ''

Page({

addName(event){

//console.log(event.detail.value)

name = event.detail.value

},

addAge(event){

//console.log(event.detail.value)

age = event.detail.value

},

addData() {

console.log('调用添加数据的方法')

DB.add({

data: {

name: name,

age: age

},

success(res) {

console.log("添加数据成功", res)

},

fail(res) {

console.log("添加数据失败", res)

}

})

}

})

测试:输入数据后,点击新增数据按钮,发现控制台上有相应输出,再进入到云开发的数据库页面,发现输入的字段已新增

4c8fa3b53745fb855b50ae2230c642fb.png

9b5d65ea7c32747e8759e94d5fb8df5f.png

ab203d85a5d3c8f8cfc4916c3b3a044f.png

查找已有的数据

效果:通过点击一个按键可以查询云数据库中的内容

实现:

在index.wxml中,加入如下代码

查询数据

在index.js中加入如下代码

const DB = wx.cloud.database().collection("testlist")

Page({

getData() {

console.log('调用查询数据的方法')

DB.get({

success(res){

console.log('查询数据成功',res)

}

})

}

})

测试:点击查询数据按钮,发现控制台上有相应输出

e599810af8cf64edf0ccab159cc0bfa4.png

通过ID删除数据

效果:用户通过输入想删除数据的ID并点击确定删除按键,即可删除云数据库中用户想删除的数据

实现:

在index.wxml中加入如下代码

\n

删除数据

在index.js中加入如下代码

const DB = wx.cloud.database().collection("list")

let id = ''

Page({

delDataInput(event){

//console.log(event.detail.value)

id = event.detail.value

},

delData() {

console.log('调用删除数据的方法')

DB.doc(id).remove({

success(res) {

console.log('删除数据成功', res.data)

}

})

}

})

测试:输入想删除数据的ID后(注意不要带有引号""),点击确定删除按键,发现控制台上有相应输出,再进入到云开发的数据库页面,发现输入id对应的该条数据已删除

5f13722b873d51c804ad8f7072a5dbfa.png

428f8b7b7da2bc58ae9f8c6e9884937d.png

通过属性删除数据

效果:用户通过输入想删除数据的name的值并点击确定删除按键,即可删除云数据库中用户想删除的数据

实现:

在index.wxml中加入如下代码

\n

通过属性删除

在index.js中加入如下代码

const DB = wx.cloud.database().collection("list")

let nameDelete = ''

Page({

delDataInputName(event){

//console.log(event.detail.value)

nameDelete = event.detail.value

},

delDataByProperty() {

console.log('调用属性删除数据的方法')

DB.where({

name: nameDelete

}).remove({

success(res) {

console.log('删除数据成功', res.data)

},

fail(res) {

console.log("删除数据失败", res)

}

})

}

})

测试:输入想删除数据的name的值后(注意不要带有引号""),点击确定删除按键,发现控制台上有相应输出,再进入到云开发的数据库页面,发现输入的想删除数据的name的值对应的该条数据已删除

a79dc58b799120c90e0a5b0683a4e476.png

855b87c83417660c0385fae4ffc32f3b.png

另:

如果name为abcd的有多个数据,则全部name为abcd的数据都会被删除,如下图:

8526663d917e6e665a2d1469006288fc.png

修改更新数据

更新有两个,updata和set,分别为:

update:局部更新一个或多个记录

set:替换更新一个记录

此处演示update

效果:用户通过输入数据ID以及修改后的name的值并点击修改更新数据按键,即可修改更新数据云数据库中用户想修改更新数据的数据

实现:

在index.wxml中加入如下代码

修改更新数据

在index.js中加入如下代码

const DB = wx.cloud.database().collection("list")

let updateID = ''

let updateValue = ''

Page({

updateID(event) {

console.log(event.detail.value)

updateID = event.detail.value

},

updateValue(event) {

console.log(event.detail.value)

updateValue = event.detail.value

},

updateData() {

console.log('调用修改更新数据的方法')

DB.doc(updateID).update({

data: {

name: updateValue

},

success(res) {

console.log('修改更新数据成功', res.data)

},

fail(res) {

console.log("修改更新数据失败", res)

}

})

}

})

测试:输入数据ID以及修改后的name的值并点击修改更新数据按键,发现控制台上有相应输出,再进入到云开发的数据库页面,数据已修改更新

fdfe5799defd0db31fff593e6ceb555c.png

7699baba08ccb82ebbc5a9b936b60e61.png

小程序云开发数据库的增删改查已经全部完成!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值