devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【小程序】小程序云开发之数据库相关操作_微信小程序云开发数据库怎么使用

作者：小丑西瓜9 | 2024-04-22 03:51:57

赞

踩

微信小程序云开发数据库怎么使用

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

一、准备

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

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

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

二、相关配置

  1. // app.js
  2. App({
  3.   //小程序一启动，就会执行
  4.   onLaunch() {
  5.     console.log("小程序开始启动了");
  6.     wx.cloud.init({
  7.       evn: 'xxxxxxxxx' //云开发环境id
  8.     })
  9.   },
  10.  
  11. })

三、创建数据库

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

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

        1、查询数据库

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

  1. Page({
  2.   data: {
  3.     list: {}
  4.   },
  5.  
  6.   onLoad(options) {
  7.     wx.cloud.database().collection('goods')。//固定写法，goods为表明
  8.     .where({    //where查询某一个字段，可以去掉
  9.       name: '苹果'
  10.     })
  11.     .get()
  12.     .then(res=>{
  13.       this.setData({
  14.         list: res.data    //赋值 页面显示
  15.       })
  16.     }).catch(err=>{
  17.       console.log('请求失败',err)
  18.     })
  19.   },

       查询单条数据doc() 

把where换成doc。里面放id值

        2、修改数据

  1. updata: function() {
  2.     wx.cloud.database().collection('表名').doc('id字段')
  3.     .update({
  4.       data: {
  5.         price: 50。//要修改的数据
  6.       }
  7.     }).then(res=>{
  8.       console.log(res);
  9.       this.onLoad()
  10.     }).catch(err=>{
  11.       console.log(err);
  12.     })
  13.   },

        3、添加数据

  1.   add: function() {
  2.     wx.cloud.database().collection('goods').add({
  3.       data: {
  4.         name: '西瓜',
  5.         price: 20
  6.       }
  7.     }).then(res=>{
  8.       console.log('添加成功',res);
  9.       this.onLoad()
  10.     }).catch(err=>{
  11.       console.log('添加失败',err);
  12.     })
  13.   },

        4、删除数据

  1.   remove: function() {
  2.     wx.cloud.database().collection('goods').doc('72574d9563eef5590006b1794b65e7ff')
  3.     .remove()
  4.     .then(res=>{
  5.       console.log('删除成功',res);
  6.       this.onLoad()
  7.     }).catch(err=>{
  8.       console.log('删除失败',err);
  9.     })
  10.   },

五、增删改查综合案例

        1、案例需求

        1⃣️能查看商品列表

        2⃣️能动态添加商品

        3⃣️能进入商品详情页

        4⃣️能删除某个商品

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

        2、页面结构

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

        

 app.json配置文件

  1. {
  2.   "pages":[
  3.     "pages/demo1/demo1",
  4.     "pages/demo1-1/demo1-1",
  5.     "pages/shujuku/shujuku",
  6.     "pages/index/index"
  7.   ],
  8.   "window":{
  9.     "backgroundTextStyle":"light",
  10.     "navigationBarBackgroundColor": "#fff",
  11.     "navigationBarTitleText": "Weixin",
  12.     "navigationBarTextStyle":"black"
  13.   },
  14.   "style": "v2",
  15.   "sitemapLocation": "sitemap.json"
  16. }

demo1.js

  1.  
  2. Page({
  3.   //页面初始数据
  4.   data: {
  5.     list: {},
  6.     name: '',
  7.     price: ''
  8.   },
  9.  
  10.   //生命周期函数--监听页面加载
  11.   onLoad(options) {
  12.    this.getList()
  13.   },
  14.   //获取列表
  15.   getList() {
  16.     wx.cloud.database().collection('goods').get()
  17.     .then(res=>{
  18.       this.setData({
  19.         list: res.data
  20.       })
  21.       console.log(res);
  22.     }).catch(err=>{
  23.       console.log(err);
  24.     })
  25.   },
  26.   //跳转到商品详情
  27.   goDetail: function(e) {
  28.     console.log('点击了跳转商品详情',e.currentTarget.dataset.id);
  29.     wx.navigateTo({
  30.       url: '/pages/demo1-1/demo1-1?id=' + e.currentTarget.dataset.id,
  31.     })
  32.   },
  33.  
  34.   //获取用户输入的商品名
  35.   getName(e) {
  36.     this.data.name = e.detail.value
  37.   },
  38.   
  39.   //获取用户输入的价格 
  40.   getPrice(e){
  41.     this.data.price = e.detail.value
  42.   },
  43.  
  44.   //添加商品13
  45.   bind_addGood: function() {
  46.     if(this.data.name=='') {
  47.       wx.showToast({
  48.         icon: 'none',
  49.         title: '商品名为空了！',
  50.       })
  51.     }
  52.     else if(this.data.price=='') {
  53.       wx.showToast({
  54.         icon: 'none',
  55.         title: '价格为空了！',
  56.       })
  57.     }
  58.     else {
  59.       wx.cloud.database().collection('goods').add({
  60.         data:{
  61.           name:this.data.name,
  62.           price:this.data.price
  63.         }
  64.       }).then(err=>{
  65.         wx.showToast({
  66.           title: '添加成功！',
  67.         })
  68.         this.setData({
  69.           name: '',
  70.           price: ''
  71.         })
  72.         this.getList()
  73.       })
  74.     }
  75.   },
  76.  
  77.   //生命周期函数--监听页面初次渲染完成
  78.   onReady() {
  79.  
  80.   },
  81.  
  82.   //生命周期函数--监听页面显示
  83.   onShow() {
  84.  
  85.   },
  86.  
  87.   //生命周期函数--监听页面隐藏
  88.   onHide() {
  89.  
  90.   },
  91.  
  92.   //生命周期函数--监听页面卸载
  93.   onUnload() {
  94.  
  95.   },
  96.  
  97.   //页面相关事件处理函数--监听用户下拉动作
  98.   onPullDownRefresh() {
  99.  
  100.   },
  101.  
  102.   //页面上拉触底事件的处理函数
  103.   onReachBottom() {
  104.  
  105.   },
  106.  
  107.   //用户点击右上角分享
  108.   onShareAppMessage() {
  109.  
  110.   }
  111. })

demo1.wxml

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

demo1.wxss

  1. input{
  2.   width: 200rpx;
  3.   border: 1px solid #ccc;
  4.   margin: 10rpx 0rpx 10rpx 30rpx;
  5. }

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

demo1-1

  1. Page({
  2.  
  3.   //页面初始数据
  4.   data: {
  5.     good: {},
  6.     price: '',
  7.     id: ''
  8.   },
  9.  
  10.   //生命周期函数--监听页面加载
  11.   onLoad(options) {
  12.     this.data.id = options.id 
  13.     this.getDetail()
  14.   },
  15.   //获取商品数据
  16.   getDetail() {
  17.     wx.cloud.database().collection('goods').doc(this.data.id)
  18.     .get().then(res=>{
  19.       console.log('商品详情页请求成功',res);
  20.       this.setData({
  21.         good: res.data
  22.       })
  23.     }).catch(err=>{
  24.       console.log('商品详情页请求失败',err);
  25.     })
  26.   },
  27.   //获取用户输入的新价格
  28.   bindgetPrice(e) {
  29.     this.data.price = e.detail.value
  30.   },
  31.  
  32.   //更新价格
  33.   bindupdate() {
  34.     if(this.data.price == '') {
  35.       wx.showToast({
  36.         icon: 'none',
  37.         title: '价格为空！',
  38.       })
  39.     }else{
  40.       wx.cloud.database().collection('goods').doc(this.data.id)
  41.       .update({
  42.         data: {
  43.           price: this.data.price
  44.         }
  45.       }).then(res=>{
  46.         wx.showToast({
  47.           title: '更新成功！',  
  48.         })
  49.         this.getDetail()
  50.       }).catch(err=>{
  51.         console.log('更新失败！');
  52.       })
  53.     }
  54.   },
  55.  
  56.   //删除商品
  57.   binddelate() {
  58.     let that =this
  59.     wx.showModal({
  60.       title: '是否确定删除',
  61.       success(res) {
  62.         if(res.confirm==true) {
  63.           wx.cloud.database().collection('goods').doc(that.data.id)
  64.           .remove().then(res=>{
  65.             wx.showToast({
  66.               title: '删除成功！',
  67.             })
  68.             wx.navigateTo({
  69.               url: '/pages/demo1/demo1',
  70.             })
  71.           }).catch(err=>{
  72.             console.log('删除失败');
  73.           })
  74.         }else if(res.confirm==false) {
  75.           console.log('用户点击了取消');
  76.         }else{
  77.           console.log('出错了');
  78.         }
  79.       }
  80.     })
  81.     
  82.  
  83.   },
  84.  
  85.   //生命周期函数--监听页面初次渲染完成
  86.   onReady() {
  87.  
  88.   },
  89.  
  90.   //生命周期函数--监听页面显示
  91.   onShow() {
  92.  
  93.   },
  94.  
  95.   //生命周期函数--监听页面隐藏
  96.   onHide() {
  97.  
  98.   },
  99.  
  100.   //生命周期函数--监听页面卸载
  101.   onUnload() {
  102.  
  103.   },
  104.  
  105.   //页面相关事件处理函数--监听用户下拉动作
  106.   onPullDownRefresh() {
  107.  
  108.   },
  109.  
  110.   //页面上拉触底事件的处理函数
  111.   onReachBottom() {
  112.  
  113.   },
  114.  
  115.   //用户点击右上角分享
  116.   onShareAppMessage() {
  117.  
  118.   }
  119. })

demo1-1.wxml

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

demo1-1.wxss

  1. input{
  2.   width: 200rpx;
  3.   border: 1px solid #ccc;
  4.   margin: 10rpx 0rpx 10rpx 30rpx;
  5. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/466660
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号