【小程序】小程序云开发之数据库相关操作

引言：学习资源来自B站UP主（编程小石头）

一、准备

        微信开发者工具，注册小程序。需要小程序id

        打开微信开发者工具，模版选择JS就可以，选择不使用云开发

        项目启动之后，没用的该删删，打开做上角云开发，启动即可。

二、相关配置

// app.js
App({
  //小程序一启动，就会执行
  onLaunch() {
    console.log("小程序开始启动了");
    wx.cloud.init({
      evn: 'xxxxxxxxx' //云开发环境id
    })
  },

})

三、创建数据库

        云开发里点击数据库，进行创建集合相当于创建数据库表-->添加记录即可。

四、调用数据库的基本语法

        1、查询数据库

        相应页面的js里面进行调用。

Page({
  data: {
    list: {}
  },

  onLoad(options) {
    wx.cloud.database().collection('goods')。//固定写法，goods为表明
    .where({    //where查询某一个字段，可以去掉
      name: '苹果'
    })
    .get()
    .then(res=>{
      this.setData({
        list: res.data    //赋值 页面显示
      })
    }).catch(err=>{
      console.log('请求失败',err)
    })
  },

       查询单条数据doc() 

把where换成doc。里面放id值

        2、修改数据

updata: function() {
    wx.cloud.database().collection('表名').doc('id字段')
    .update({
      data: {
        price: 50。//要修改的数据
      }
    }).then(res=>{
      console.log(res);
      this.onLoad()
    }).catch(err=>{
      console.log(err);
    })
  },

        3、添加数据

  add: function() {
    wx.cloud.database().collection('goods').add({
      data: {
        name: '西瓜',
        price: 20
      }
    }).then(res=>{
      console.log('添加成功',res);
      this.onLoad()
    }).catch(err=>{
      console.log('添加失败',err);
    })
  }, 

        4、删除数据

  remove: function() {
    wx.cloud.database().collection('goods').doc('72574d9563eef5590006b1794b65e7ff')
    .remove()
    .then(res=>{
      console.log('删除成功',res);
      this.onLoad()
    }).catch(err=>{
      console.log('删除失败',err);
    })
  },

五、增删改查综合案例

        1、案例需求

        1⃣️能查看商品列表

        2⃣️能动态添加商品

        3⃣️能进入商品详情页

        4⃣️能删除某个商品

        5⃣️能修改某个商品的价格

        2、页面结构

        我这边主要用了 demo1和demo1-1那个目录，一个是列表页，一个详情页。在列表页可以实现添加，点击相应的产品可以跳转到该商品的详情页，然后可以对该商品进行修改和删除的操作。

        

 app.json配置文件

{
  "pages":[
    "pages/demo1/demo1",
    "pages/demo1-1/demo1-1",
    "pages/shujuku/shujuku",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

demo1.js

Page({
  //页面初始数据
  data: {
    list: {},
    name: '',
    price: ''
  },

  //生命周期函数--监听页面加载
  onLoad(options) {
   this.getList()
  },
  //获取列表
  getList() {
    wx.cloud.database().collection('goods').get()
    .then(res=>{
      this.setData({
        list: res.data
      })
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
  },
  //跳转到商品详情
  goDetail: function(e) {
    console.log('点击了跳转商品详情',e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/pages/demo1-1/demo1-1?id=' + e.currentTarget.dataset.id,
    })
  },

  //获取用户输入的商品名
  getName(e) {
    this.data.name = e.detail.value
  },
  
  //获取用户输入的价格 
  getPrice(e){
    this.data.price = e.detail.value
  },

  //添加商品13
  bind_addGood: function() {
    if(this.data.name=='') {
      wx.showToast({
        icon: 'none',
        title: '商品名为空了！',
      })
    }
    else if(this.data.price=='') {
      wx.showToast({
        icon: 'none',
        title: '价格为空了！',
      })
    }
    else {
      wx.cloud.database().collection('goods').add({
        data:{
          name:this.data.name,
          price:this.data.price
        }
      }).then(err=>{
        wx.showToast({
          title: '添加成功！',
        })
        this.setData({
          name: '',
          price: ''
        })
        this.getList()
      })
    }
  },

  //生命周期函数--监听页面初次渲染完成
  onReady() {

  },

  //生命周期函数--监听页面显示
  onShow() {

  },

  //生命周期函数--监听页面隐藏
  onHide() {

  },

  //生命周期函数--监听页面卸载
  onUnload() {

  },

  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {

  },

  //页面上拉触底事件的处理函数
  onReachBottom() {

  },

  //用户点击右上角分享
  onShareAppMessage() {

  }
})

demo1.wxml

输入商品名：<input value= bindinput="getName"></input>
输入商品价格：<input bindinput="getPrice"></input>
<button bindtap="bind_addGood">添加商品</button>
<view wx:for="{{list}}" wx:key="index"> 
  <view bindtap="goDetail" data-id="{{item._id}}">
    序号：{{index+1}}，商品名：{{item.name}}，价格：{{item.price}}
  </view>
</view>

demo1.wxss

input{
  width: 200rpx;
  border: 1px solid #ccc;
  margin: 10rpx 0rpx 10rpx 30rpx;
}

如果遇到 input输入出现警告报错的情况，请切换小程序开发版本即可。

demo1-1

Page({

  //页面初始数据
  data: {
    good: {},
    price: '',
    id: ''
  },

  //生命周期函数--监听页面加载
  onLoad(options) {
    this.data.id = options.id 
    this.getDetail()
  },
  //获取商品数据
  getDetail() {
    wx.cloud.database().collection('goods').doc(this.data.id)
    .get().then(res=>{
      console.log('商品详情页请求成功',res);
      this.setData({
        good: res.data
      })
    }).catch(err=>{
      console.log('商品详情页请求失败',err);
    })
  },
  //获取用户输入的新价格
  bindgetPrice(e) {
    this.data.price = e.detail.value
  },

  //更新价格
  bindupdate() {
    if(this.data.price == '') {
      wx.showToast({
        icon: 'none',
        title: '价格为空！',
      })
    }else{
      wx.cloud.database().collection('goods').doc(this.data.id)
      .update({
        data: {
          price: this.data.price
        }
      }).then(res=>{
        wx.showToast({
          title: '更新成功！',  
        })
        this.getDetail()
      }).catch(err=>{
        console.log('更新失败！');
      })
    }
  },

  //删除商品
  binddelate() {
    let that =this
    wx.showModal({
      title: '是否确定删除',
      success(res) {
        if(res.confirm==true) {
          wx.cloud.database().collection('goods').doc(that.data.id)
          .remove().then(res=>{
            wx.showToast({
              title: '删除成功！',
            })
            wx.navigateTo({
              url: '/pages/demo1/demo1',
            })
          }).catch(err=>{
            console.log('删除失败');
          })
        }else if(res.confirm==false) {
          console.log('用户点击了取消');
        }else{
          console.log('出错了');
        }
      }
    })
    

  },

  //生命周期函数--监听页面初次渲染完成
  onReady() {

  },

  //生命周期函数--监听页面显示
  onShow() {

  },

  //生命周期函数--监听页面隐藏
  onHide() {

  },

  //生命周期函数--监听页面卸载
  onUnload() {

  },

  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {

  },

  //页面上拉触底事件的处理函数
  onReachBottom() {

  },

  //用户点击右上角分享
  onShareAppMessage() {

  }
})

demo1-1.wxml

<view>商品名：{{good.name}}，价格：{{good.price}}。</view>
更新商品价格:<input bindinput="bindgetPrice"/>
<button bindtap="bindupdate">更新</button>
<button bindtap="binddelate">删除</button>

demo1-1.wxss

input{
  width: 200rpx;
  border: 1px solid #ccc;
  margin: 10rpx 0rpx 10rpx 30rpx;
}