连接到云数据库
const db = wx.cloud.database()
查询数据
//拿数据库的表 doc是指定id来查询 get查询 add添加
db.collection('demolist').doc("cbddf0af6097ed7d076b18b9342679b6").get().then(res => {
console.log(res);
//把数据库中的数据存到data中
this.setData({
dataObj: res.data
})
})
//指定一些参数来查询 用where来查询
db.collection('demolist').where({author:'秦兢泽'}).get().then(res => {
console.log(res);
})
插入数据
//js代码
//可以为加载数据的时候添加加载中函数
wx.showLoading({
title: '数据加载中...',
//mask为true时在没有完成操作之前无法再次进行点击操作
mask:true
})
db.collection('demolist').add({
//必须写data
data:{
title:'外交部辟谣美方所谓解放军SARS内部文件',
content:"华春莹还表示，很多国家对美国在其国内外建立的生物实验室存在着严重关切。。"
}
}).then(res => {
console.log(res);
console.log('添加成功');
//需要把加载中关闭，不然一直转圈
wx.hideLoading()
})
},
//提交表单添加进数据库
btnSub(res) {
console.log(res)
// var title = res.detail.value.title
// var author = res.detail.value.author
// var content = res.detail.value.content
//上面的是最古老的写法，可以用ES6的写法,解构赋值
// var {title,author,content} = res.detail.value
//本身返回的是一个对象，我们可以直接保存对象,在数据库中直接写对象进去也可以添加，最简洁的一种
var resVlu = res.detail.value
db.collection('demolist').add({
data:resVlu
// data: {
// title:title,
// author:author,
// content:content
// }
}).then(res => {
console.log(res);
})
},
//xml代码
<button type="primary" bindtap="getData">点击获取数据</button>
<view>-----------------</view>
<button type="primary" bindtap="addData">插入一条数据</button>
-----------------
<!-- 利用表单添加数据 -->
<form bindsubmit="btnSub">
<input name="title" placeholder="请输入标题"></input>
<input name="author" placeholder="请输入作者"></input>
<textarea name='content' placeholder="请输入内容"></textarea>
<button type="primary" form-type="submit">提交</button>
-------------
<!-- 要重置输入的内容只需要加上一个type叫reset就可以重置输入的内容 -->
<button type="primary" form-type="reset">重置</button>
</form>
在wxml中 利用表单添加数据
<!-- 利用表单添加数据 -->
<form bindsubmit="btnSub">
<input name="title" placeholder="请输入标题"></input>
<input name="author" placeholder="请输入作者"></input>
<textarea name='content' placeholder="请输入内容"></textarea>
<button type="primary" form-type="submit">提交</button>
-------------
<button type="primary" form-type="reset">重置</button>
</form>
更新数据
//更新数据，必须要指定修改什么,可以写doc，或者where来找要改谁，update是局部修改，set是全部更新，直接覆盖
updateData() {
db.collection('demolist').doc('b00064a7609938871656c74406b07168').update({
data:{
author:'哥'
}
}).then(res => {
console.log(res);
})
},
删除数据
delData() {
db.collection('demolist').doc('b00064a7609a8e20169ec8115e59c20e').remove().then(res => {
console.log(res);
})
},
在wxml中可以通过bindinput来获取输入框的内容
<input placeholder="请输入id" bindinput="myIpt"></input>
js代码
//可以记录输入框中的内容，比如保存输入的id，然后进行删除操作等等
myIpt(res) {
var vlu =res.detail.value
},
count
//获取记录格式 用count，可以直接获取数据表中一共有多少条数据
btnNum() {
db.collection('demolist').count().then(res => {
console.log(res);
})
},
watch
onLoad: function (options) {
//watch监听事件，可以监听修改后的数据并回调函数,必须要写onChange，onError
//可以及时更新数据，比如别人点赞啊收藏啊这些用watch去监听就可以及时反馈到页面上
db.collection('demolist').watch({
onChange:res => {
this.setData({
dataArry:res.docs
})
console.log(res);
},
onError:err => {
console.log(err);
}
})
},
command函数的使用
const db =wx.cloud.database()
//command函数，里面有更细致的查询修改删除等操作的方法
const c=db.command
Page({
data: {
dataArry:[]
},
//1.通过limit可以限制查询多少个
//2.orderBy排序,asc是默认顺序排列，desc就是倒序排列
//3.skip跳过，写几个就可以跳过前面的多少个,可以用来翻页,相当于跳过这一页
//4.field可以过滤数据，想要显示什么数据都可以写true，不想要的就不用写
getData() {
db.collection('demolist').limit(3).skip(3).field({
title:true,
time:true
}).orderBy('time','asc').get().then(res => {
console.log(res);
this.setData({
dataArry: res.data
})
})
},
/*
command函数 查询比较运算符
eq等于，neq不等于
lt小于，lte小于等于/gt大于，gte大于等于
这些一般就用在分数段啊年龄数啊这些,主要是对numberl类型操作
in 要求在这个数组内的值 in([60,700]),展示60或者700的
nin 不包含这些的 黑白名单
查询逻辑操作符
and and(c.gt(0),c.lt(1200))表示大于0小于1200
or or(c.eq(39),c.eq(234)) 表示包含39或者234的数据，跟上面的in一样
*/
showData() {
db.collection('demolist')
.where({
hits:c.eq(773)
})
.orderBy('hits','desc').get()
.then(res => {
console.log(res);
this.setData({
dataArry: res.data
})
// and 的多个数据段查询
db.collection('demolist')
.where(
c.and([
{
author:c.eq('哥')
},
{
hits:c.lt(900)
},
])
)
.get()
.then(res => {
console.log(res);
this.setData({
dataArry: res.data
})
})
//查询字段操作符
//exists判断字段是否存在
//查询数组的操作符
//size 数组字段有几个，意思是这个数组的有几个值,数组的长度
//all 数组字段包含这个指定元素
db.collection('demolist')
.where({
time:c.exists(true)
tabs:c.size(2)
tabs:c.all(['母爱'])
})
.get()
.then(res => {
console.log(res);
this.setData({
dataArry: res.data
})
})
//command函数 更新操作
//可以用来更新比如点赞操作啊这些
//inc自增 可以写自增多少,数据类型要数字,inc(-5) 表示每次点击减5
//remove 删除一个字段
//push 往数组里添加字段
updateData() {
db.collection('demolist').doc('28ee4e3e609a8e1f17da05a70033d9d1')
.update({
data:{
title:'哈哈',
hits: c.inc(1) ,
title:c.remove(),
list: c.push(['df','dfia'])
}
})
.then(res => {
//在调用一次展示的数据就会实时变化了
this.showData()
console.log(res);
})
}
wxml代码：
<button type="primary" bindtap="getData">条件查询</button>
-----------
<button type="primary" bindtap="showData">展示数据</button>
<view wx:for="{{dataArry}}" wx:key='index'>{{index +1}}.{{item.title}} 点击数：{{item.hits}}</view>
云函数的使用
- 这个云函数是获取数据的，通过skip来实现分页功能，通过limit来限制每次可以获取多少条数据
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//调用云函数数据库，必须写
const db=cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
var num = event.num
var page=event.page
//必须要有返回值
return await db.collection('demolist').skip(page).limit(num).get()
}
//js的代码
Page({
data: {
dataArry:[],
},
getData(num=5,page=0) {
wx.cloud.callFunction({
name:"getData",
//传递数据到云函数
data:{
num,
page
}
})
.then(res => {
var oldData = this.data.dataArry
//新数组拼接老数组
var newData = oldData.concat(res.result.data)
this.setData({
dataArry:newData
})
console.log(res.result.data);
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面渲染出来马上获取数据
this.getData()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//每次下拉就多获取五条数据
var page=this.data.dataArry.length
this.getData(5,page)
},
})
- 这个云函数是用来获取增加点赞数的
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db=cloud.database()
const c=db.command
// 云函数入口函数
exports.main = async (event, context) => {
var id=event.id
//通过更新数据来实现点赞的增加
return db.collection('demolist').doc(id).update({
data:{
hits:c.inc(7)
}
})
}
//js代码
Page({
//点击将阅读数+7
clickRow(res) {
wx.showLoading({
title: '数据加载中...',
})
//1.获取点击的id和索引值
var {id,idx} = res.currentTarget.dataset;
//2.云函数进行更新操作
//3.前端连后端，将数据传输给后端，后端返回数据
wx.cloud.callFunction({
name:"updateHits",
//传递数据到云函数
data:{
id:id
}
})
.then(res => {
console.log(res);
//4.重新渲染列表数据
var newData = this.data.dataArry
newData[idx].hits+=7
this.setData({
dataArry:newData
})
wx.hideLoading()
})
},
})
//xml代码
<!-- 点击后并不知道拿到的是啥，需要指定想要什么，比如拿id是肯定要的 -->
<view class="news" bindtap="clickRow" data-id="{{item._id}}" data-idx="{{index}}" wx:for="{{dataArry}}" wx:key='index'>
<view class="title">{{index +1}}.标题：{{item.title}}</view>
<view class="author">作者：{{item.author}} </view>
<view class="hits">阅读量：{{item.hits}}</view>
<view class="time">发布日期：{{item.time}}</view>
</view>
- 上传图片功能的实现
//js代码
var urlArr = []
var filePath=[]
Page({
data: {
},
clickBtn() {
wx.chooseImage({
success: res => {
filePath = res.tempFilePaths
//同时上传多张图片
filePath.forEach((item,idx) =>{
this.cloudFile(idx,item)
})
}
})
},
cloudFile(filename,path) {
wx.showLoading({
title: '上传中',
})
wx.cloud.uploadFile({
cloudPath: 'userImage/'+filename+Date.now()+'.jpg',
filePath: path
}).then(res => {
console.log(res);
urlArr.push(res.fileID)
if(filePath.length==urlArr.length) {
this.setData({
urlArr
})
}
wx.hideLoading()
})
},
})
//xml代码
<button type="primary" bindtap="clickBtn">上传文件</button>
<image wx:for="{{urlArr}}" src="{{item}}"></image>
