winform调用webservice增删查改_教你分别用数据库与云函数实现“增删查改”

导语

数据库 API 与云函数“增删查改”的姿势有何不同？对比代码差异往往有助于更好的理解，本文用详细代码帮你寻找答案并巩固基础！

 

▌一、云开发初始化

wx.cloud.init({

env: 'wedding-10c111'

})

上面这段代码配置在src目录下的main.js文件中。

▌二、数据库API(不使用云函数进行“增删查改”)

以下说明均写在对应代码注释里，不清楚的请查看相关注释。

查(获取数据)

// 获取轮播图列表

getBannerList () {

// 获取数据库引用

const db = wx.cloud.database()

// 获取名为“banner”的集合引用

const banner = db.collection('banner')

// 获取集合(Promise 风格)

banner.get().then(res => {

this.list = res.data[0].bannerList

})

}

对应实例如下：

注意：之所以数据库只有一条数据，而把banner列表当成这条数据的一个字段存储，其目的是为了自己后续换图操作的方便。

增(添加数据)

// 添加用户

addUser () {

// 获取数据库引用

const db = wx.cloud.database()

// 获取名为“user”的集合引用

const user = db.collection('user')

// 向“user”集合中添加一条数据(Promise 风格)

user.add({

data: {

user: that.userInfo,

// 构造一个服务端时间的引用，我的项目中都是取自己转化后的时间，

// 取这个时间更加合理，可用于查询条件、更新字段值或新增记录时的字段值

time: db.serverDate()

}

}).then(res => {

// 添加成功后重新查询列表

that.getUserList()

})

}

对应实例如下：

注意：可以看出_id和_openid是添加完自动生成的属性。

改(修改数据)

// 改变某条留言的显示隐藏

switchMessage (e) {

// 获取数据库的引用

const db = wx.cloud.database()

// 获取名为“message”的集合的引用

const message = db.collection('message')

// 这里的id是拿到当前操作项对应的id，

// 这里的show对应change事件传递过来的值

message.doc(e.mp.target.dataset.id).update({

data: {

show: e.mp.detail.value

}

}).then(res => {

console.log(res)

})

}

对应实例如下：

注意：这个界面在你们使用的小程序中是看不到的，只有本人才有权限查看。

class="switch" :data-id="item._id" :checked="item.show" @change="switchMessage">

注意：上面我们之所以能得到e.mp.target.dataset.id是因为在标签上加了:data-id="item._id"，否则取不到对应id。

删(删除数据)

正好对应的上图有删除操作。

deleteItem (id) {

// 记录this指向

const that = this

// 这里之所以使用wx.showModal是防止误操作

wx.showModal({

title: '提示',

content: '你确定要删除这条留言？',

success (res) {

if (res.confirm) {

// 获取数据库的引用

const db = wx.cloud.database()

// 获取名为“message”集合的引用

const message = db.collection('message')

// 删除操作(Promise 风格)

message.doc(id).remove().then(res => {

// 删除成功后再次请求列表，达到刷新数据的目的

if (res.errMsg === 'document.remove:ok') {

that.getList()

}

})

}

}

})

}

▌三、使用云函数进行增删改查

查(获取数据)

// 云函数初始化

const cloud = require('wx-server-sdk')

// 由于文章开始已经讲过初始化步骤，这里init(options)的options可以省略

// options参数定义了云开发的默认配置，该配置会作为之后调用其他所有云 API 的默认配置

cloud.init()

// 获取数据库的引用

const db = cloud.database()

exports.main = async (event, context) => {

// 将集合名定义成一个变量，方便后续调用

const dbName = 'message'

// filter为指定的筛选条件，配合where()使用

const filter = event.filter ? event.filter : null

// pageNum如果小程序端未传入则默认为1

const pageNum = event.pageNum ? event.pageNum : 1

// pageSize如果小程序端未传入则默认是10

const pageSize = event.pageSize ? event.pageSize : 10

// 数据库满足filter条件的数据总条数

const countResult = await db.collection(dbName).where(filter).count()

const total = countResult.total

// 共多少页

const totalPage = Math.ceil(total / pageSize)

// 是否有下一页

let hasMore

if (pageNum >= totalPage) {

hasMore = false

} else {

hasMore = true

}

// 等待所有，orderBy()通过创建时间排序，查询单页数据

return db.collection(dbName).orderBy('time', 'desc').where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => {

// 返回结果中顺带注入hasMore和total方便小程序端判断

res.hasMore = hasMore

res.total = total

return res

})

}

getList () {

// 记录this指向

const that = this

// 每次调用getList时重新从第一页开始

that.pageNum = 1

// 每次调用getList时，先将authorityList置空

that.authorityList = []

wx.cloud.callFunction({

// 云函数名

name: 'authorityList',

// 传入云函数的参数

data: {

// 查询的默认筛选条件，这里可以参考下面留言审核对应的两张图来看，左上角有个switch开关

// 当开关开启时，filter:{show:false}生效

filter: that.checkFlag ? {

show: false

} : null,

// 查询页数

pageNum: that.pageNum,

// 每页条数

pageSize: that.pageSize

}

}).then(res => {

// 配合下拉刷新使用，作用是停止刷新事件

wx.stopPullDownRefresh()

// 以下动作为赋值操作

const temp = res.result

that.total = temp.total

that.hasMore = temp.hasMore

that.authorityList = temp.data

})

}

上面代码对应实例如下：1.查询未通过审核的留言；2.查询全部的留言。

增(添加数据)

// 前面讲解过的注释之后的代码将不重复说明

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

exports.main = async (event, context) => {

const dbName = 'message'

// 添加数据

return db.collection(dbName).doc(event.id).add({

data: {

desc: event.desc,

type: event.type,

show: event.show,

time: event.time,

url: event.url,

name: event.name

}

})

}

sendMessage () {

const that = this

if (that.desc) {

wx.cloud.callFunction({

// 云函数名

name: 'addMessage',

data: {

desc: that.desc,

type: 'message',

show: false,

time: utils.getNowFormatDate(),

url: that.userInfo.avatarUrl,

name: that.userInfo.nickName

}

}).then(res => {

// 关闭所有页面，打开到应用内的某个页面，跳转到留言列表页

wx.reLaunch({

url: '/pages/message/main'

})

})

} else {

tools.showToast('说点什么吧~')

}

}

对应实例如下：

改(修改数据)

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

exports.main = async (event, context) => {

const dbName = 'message'

return db.collection(dbName).doc(event.id).update({

data: {

show: event.show

}

})

}

switchMessage (e) {

const that = this

wx.cloud.callFunction({

name: 'switchMessage',

data: {

id: e.mp.target.dataset.id,

show: e.mp.detail.value

}

}).then(res => {

if (res.result.errMsg === 'document.update:ok') {

that.getList()

}

})

}

对应实例如下：(前面没使用云函数也实现了相同的功能，感兴趣的可以对比查阅)

删(删除数据)

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

exports.main = async (event, context) => {

const dbName = 'message'

return db.collection(dbName).doc(event.id).remove()

}

deleteItem (id) {

// 记录this指向

const that = this

// 这里之所以使用wx.showModal是防止误操作

wx.showModal({

title: '提示',

content: '你确定要删除这条留言？',

success (res) {

if (res.confirm) {

wx.cloud.callFunction({

name: 'deleteMessage',

data: {

id

}

}).then(res => {

if (res.result.errMsg === 'document.remove:ok') {

that.getList()

}

})

}

}

})

}

对应实例如下：

▌四、总结

掌握上面两种对应的增删改查后，相信大家对云开发会有一个更清晰的认识，也希望大家多多使用云开发做出更多好玩的小程序作品。

▌五、案例小程序

欢迎大家体验：

☁

 更多精彩 

点击下方图片即可阅读

云开发，不止于「快」

云开发

Tencent CloudBase

      点击在看让更多人发现精彩