微信小程序【往云开发控制台数据库中插入数据、获取数据】（更新）

文章目录

17、往数据库中插入数据的几种方式

1、图形化方式插入数据

在这里插入图片描述

打开云开发控制台的【

数据库

】模块
新建一个【

集合

】
点击【

添加记录

】
然后再依次【

添加字段

】

2、手动操作插入数据

在这里插入图片描述

首先在云开发控制台里创建好【

集合名

】

在wxml文件中创建一个按钮，用来添加

<button type="primary" size="mini" bindtap="add">增加数据</button>

在相对应的js文件里，相对应wxml的点击事件编写内容

async add(){
    // 获取对云端数据库得到引用
    const db = wx.cloud.database()
    // 获取要操作的云端数据库的集合
    const todos = db.collection('todos')
    let res = await todos.add({
      data:{
        description:'这是新插入的数据',
        done:false,
        due:new Date(),
        tags:['hello','world'],
        style:{color:'blue'}
      }
    })
    console.log(res);
  },

我指明了对应添加的环境位置

在这里插入图片描述

在app.js文件中进行了全局配置

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        env: 'test-8gdkp615de5fd9d9',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

也可以进行单独的配置

在这里插入图片描述

    wx.cloud.init({
      env:'test-8gdkp615de5fd9d9',
      traceUser:true
    })

3、云端插入数据

在wxml文件里创建button按钮

在js文件夹中进行编写button按钮的事件

  // 云端增加数据
  async cloud_add() {
    let res=await wx.cloud.callFunction({
      name: 'add_todo'
    })
    console.log(res);
  },

在【cloudfunctions】文件夹下新建【Node.js】文件

在这里插入图片描述

进行编写内容

在这里插入图片描述

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'test-8gdkp615de5fd9d9',
  traceUser: true,
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  let res = await db.collection('todos').add({
    data: {
      description: '今天中午吃什么',
      done: false,
      due: new Date(),
      tags: ['HHH', '哈哈哈'],
      style: {color: 'orange'}
    }
  })
  return res
}

18、获取数据

1、获取单条数据

在wxml文件里创建按钮绑定事件

<button type="primary" size="mini" bindtap="get_single">获取单条数据</button>

在【cloudfunctions】文件夹下新建【Node.js】文件

在新创建的【index.js】文件中填写内容

在这里插入图片描述

// 云函数入口文件
const cloud = require('wx-server-sdk')

// 对应云开发控制环境名称
cloud.init({
  env: 'test-8gdkp615de5fd9d9',
  traceUser: true,
})
// 建立数据库
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  let res = await db.collection('todos').doc('17453ede60863491044f25110e22df8d').get() // 查询的id名
  return res
}

注意：编写完成后，记着右键【上传并部署】

编写单击事件

在这里插入图片描述

  // 获取单条数据
  async get_single(){
    let res = await wx.cloud.callFunction({
      name:'get_single'
    })
    console.log(res); 
  },

2、获取多条数据

在wxml文件里创建按钮绑定事件

<button type="primary" size="mini" bindtap="get_query">获 取多条数据</button>

在【cloudfunctions】文件夹下新建【Node.js】文件

在新创建的【index.js】文件中填写内容

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'test-8gdkp615de5fd9d9',
  traceUser: true,
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  let res = await db.collection('todos').where({
    description:'这是新插入的数据'   // 对应的是数据库里的字段
  }).get()
  return res
}

注意：编写完成后，记着右键【上传并部署】

编写单击事件

在这里插入图片描述

  // 获取多条数据
  async get_query(){
    let res = await wx.cloud.callFunction({
      name:'get_query'
    })
    console.log(res);
  },

19、实现分页

配置云函数

在这里插入图片描述

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: 'test-8gdkp615de5fd9d9',
  traceUser: true,
})

// 云函数入口函数
exports.main = async (event, context) => {
  let res = await cloud
  .database()
  .collection('playlist')
  .skip(event.start)
  .limit(event.count)
  .orderBy('createTime','desc')
  .get()
  return res
}

编写展示页，下拉事件，页面加载事件

页面加载进行

在这里插入图片描述

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    wx.showLoading({
      title: '加载中',
    })
    let res = await wx.cloud.callFunction({
      name:'music',
      data:{
        start:0,
        count:15
      }
    })
    this.setData({
      playlist:res.result.data
    })
    wx.hideLoading()
  },

上拉触底事件

在这里插入图片描述

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: async function () {
    wx.showLoading({
      title: '加载中',
    })
    let res = await wx.cloud.callFunction({
      name:'music',
      data:{
        start:this.data.playlist.length,
        count:15
      }
    })
    this.setData({
      playlist:[...this.data.playlist,...res.result.data]
    })
    wx.hideLoading()
  },

20、下拉刷新效果

只想单页面使用的话，就放在单独对应的.json文件夹里

在这里插入图片描述

{
  "usingComponents": {
    "my-playlist":"../../components/playList/playList"
  },
  "enablePullDownRefresh":true,
  "backgroundColor":"#ccc",
  "backgroundTextStyle":"light"
}

刷新完后让它自动关闭，在对应的js文件夹里添加下拉刷新效果

在这里插入图片描述

    // 隐藏下拉刷新效果
    wx.stopPullDownRefresh()

21、代码封装（封装页面加载的数据，触底刷新后的数据请求）

在这里插入图片描述

  // 加载音乐数据
  async loadMusic(isPullDown){
    wx.showLoading({
      title: '加载中',
    })
    let res = await wx.cloud.callFunction({
      name:'music',
      data:{
        start:this.data.playlist.length,
        count:15
      }
    })
    this.setData({
      playlist:isPullDown?res.result.data:[...this.data.playlist,...res.result.data]
    })
    wx.hideLoading()
  },

页面加载进行调用

在这里插入图片描述

页面下拉刷新进行调用

在这里插入图片描述

页面上拉触底进行调用

在这里插入图片描述

22、云函数路由

laravel 等框架中都内置了路由组件，云函数中没有，我们需要单独安装对应的基于 node 的路由组件。

安装

注意是云函数端安装

npm install --save tcb-router

云函数中引入

const TcbRouter=require('tcb-router')

修改云函数代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
cloud.init({
env: 'test-5gngkp7l028ba32b',
traceUser: true,
})
// 云函数入口函数
exports.main = async (event, context) => {
const app = new TcbRouter({ event });
app.router('playlist', async (ctx, next) => {
let res = await cloud.database().collection('playlist')
.skip(event.start)
.limit(event.count)
.orderBy('createTime', 'desc')
.get()
ctx.body = res
// await next(); // 执行下一中间件
})
return app.serve();
}

原文链接：https://blog.csdn.net/December_shi/article/details/116158254

文章目录

17、往数据库中插入数据的几种方式

1、图形化方式插入数据

2、手动操作插入数据

3、云端插入数据

18、获取数据

1、获取单条数据

2、获取多条数据

19、实现分页

20、下拉刷新效果

21、代码封装（封装页面加载的数据，触底刷新后的数据请求）

22、云函数路由

你可能也喜欢