云开发（微信-小程序）笔记（三）---- 云数据库案例

已于 2022-06-05 07:25:34 修改
阅读量1.7k 收藏 13
点赞数 1
分类专栏： 笔记 云开发（微信-小程序）笔记 文章标签： 小程序
于 2022-04-30 12:32:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51202460/article/details/124511148
版权

云开发（微信-小程序）笔记（二）---- You don‘t talk about martial arts

11.云数据库案例

对于云数据库的案例主要针对数据库的增删查改，排序，

要求如下

能查看商品列表，
商品能按照价格进行排序
能动态添加商品，并立即能显示出来
能进入商品详情页
能修改，删除某个商品

具体步骤如下
（1）在app.json中的pages字段中添加demo1,demo1-1
  "pages": [ 
        "pages/demo1/demo1",
        "pages/demo1-1/demo1-1",
        "pages/index/index"
    ],
（2）编写demo1(商品列表页（主页）)
1.用户添加商品

修改demo1.json，添加页名

{
  "usingComponents": {},
  "navigationBarTitleText": "商品列表页"
}

效果如图
在这里插入图片描述

修改demo1.wxml,添加如下内容

<!--pages/demo1/demo1.wxml-->
输入商品名
<input bindinput="getName"></input>
输入商品价格
<input bindinput="getPrice"></input>
输入商品生产地
<input bindinput="getshengchandi"></input>
<button bindtap="addGood" type="primary">添加商品</button>

效果如图：
在这里插入图片描述
到此你以为这样就完了，还有关键的一步写入数据库啊！
修改demo1.js,接受用户输入的信息，并写入到数据库中

  //获取商品输入的商品名
  getName(e){
    name = e.detail.value
  },
  //获取商品输入的价格
  getPrice(e){
    price = e.detail.value
  },
  //获取商品输入的生产地
  getshengchandi(e){
    shengchandi=e.detail.value
  },
  //添加商品，任何所需要的字段都不能为空
  addGood(){
    if (name == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品名为空啦！',
      })
    } else if (price == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品价格为空啦！',
      })
    } else if (shengchandi == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品生产地为空啦！',
      })
    } else {
    //添加操作，数据写入到数据库
    console.log('可以进行添加操作啦！')
    wx.cloud.database().collection('Goods')
    .add({
      data:{
      //数据库字段:用户输入
      name:name,
      price:parseInt(price), //转换为数字类型,否者输入为字符串类型。
      shengchandi:shengchandi
           }
    })
    .then(res => {
      console.log('添加成功',res)
      this.getList(0)
    })
    .catch(res =>{
      console.log('添加失败',res)
    })
    }
  }

到此用户就能通过小程序进行添加商品的信息啦！

2.查看数据库中的数据及数据排序

因为这里的数据查看，和排序有很多相似之处，就进行了优化。想看常见的写法就观看笔记（二）
修改demo1.wxml,添加如下内容

<view wx:for="{{list}}">
商品名：{{item.name}},价格：{{item.price}},生产地：{{item.shengchandi}}
</view>
<button bindtap="shengxu">按照商品价格升序</button>
<button bindtap="jiangxu">按照商品价格降序</button>

修改demo1.js,将查询与排序相同的代码进行整合写成了方法getList

   //获取数据列表（或排序）
   getList(type){
    let db = wx.cloud.database().collection("Goods")
    //0代表不做任何排序，1代表升序，-1代表降序
    if (type == 1){
      db = db.orderBy('price','asc')
    }else if(type == -1){
      db = db.orderBy('price','desc')
    }
    db.get().then(res => {
      console.log('商品列表请求成功',res)
      this.setData({
        list:res.data
      })
    })
    .catch(res => {
      console.error('商品详情页请求失败',res)
    })
  },

  //商品升序
  shengxu(){
    this.getList(1)

  },
  //商品降序
  jiangxu(){
    this.getList(-1)
  },

效果如图：
在这里插入图片描述

3.数据携带

点击主页的商品，能跳转到相对应的商品详情页写成方法goDetail
修改demo1.wxml,把上面添加的内容修改一下

<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">
商品名：{{item.name}},价格：{{item.price}},生产地：{{item.shengchandi}}
</view>
</view>
<button bindtap="shengxu">按照商品价格升序</button>
<button bindtap="jiangxu">按照商品价格降序</button>

修改demo1.js,添加如下内容

  //跳转到商品详情页
  goDetail(e){
    console.log('点击了跳转商品详情的id',e.target.dataset.id)
    wx.navigateTo({
      url: '/pages/demo1-1/demo1-1?id='+e.target.dataset.id,
    })
  }
4.开发者编译模式

在这里插入图片描述

5.注意事项

可能在案例中有些其他的小点，不太好单独展示，如全局变量，方法之间的连接，就需要结合具体的代码去看。

（3）编写编写demo1-1(商品详情页)

先在编译模式切换到商品详情页，再进行测试商品详情页。

1.显示商品的详情

修改demo1.wxml,添加如下内容

<!--pages/demo1-1/demo1-1.wxml-->
<view>商品名：{{goods.name}}</view>
<view>价格：{{goods.price}}</view>
<view>生产地：{{goods.shengchandi}}</view>

修改demo1.js,把添加如下内容

// pages/demo1-1/demo1-1.js
//全局变量
let price = ''
var id = ''
Page({
  data: {
    goods: {}
  },
  onLoad(options) {
    console.log('列表携带的值', options)
    id = options.id
    this.getDetail()

  },
  getDetail() {
    //获取商品列表
    wx.cloud.database().collection('Goods')
      .doc(id)
      .get()
      .then(res => {
        console.log('商品详情页请求成功！', res)
        this.setData({
          goods: res.data
        })
      })
      .catch(res => {
        console.log('商品详情页请求失败！', res)
      })
  },
2.更新价格

修改demo1.wxml,添加如下内容

更新商品价格
<input bindinput="getPrice"></input>
<button type="primary"bindtap="update">更新商品价格</button>

修改demo1.js,把添加如下内容

 //获取用户输入的价格
  getPrice(e) {
    price = e.detail.value
  },
  //修改商品价格
  update() {
    console.log('新的商品价格', price)
    if (price == '') {
      wx.showToast({
        icon: 'none',
        title: '价格为空',
      })
    } else {
      wx.cloud.database().collection('Goods')
        .doc(id)
        .update({
          data: {
            price: price
          }
        })
        .then(res => {
          console.log('更新成功', res)
          this.getDetail()
        })
        .catch(res => {
          console.log('更新失败', res)
        })
    }
  }

效果如图
在这里插入图片描述

3.删除商品

修改demo1.wxml,添加如下内容

<button bindtap="remove">删除此商品</button>

修改demo1.js,把添加如下内容

//删除商品
  remove() {
    console.log('点击了删除', id)
    //弹窗提示
    wx.showModal({
      title: "是否确定删除数据",
      content: '小手一敲，删库跑路',
      success(res) {
        if (res.confirm == true) {
          console.log('用户点击确定')
          wx.cloud.database().collection('Goods')
            .doc(id)
            .remove()
            .then(res => {
              console.log('删除成功', res)
              wx.navigateTo({
                url: '/pages/demo1/demo1',
              })
            })
            .catch(res => {
              console.log('删除失败', res)
            })
        } else if (res.cancel == true) {
          console.log('用户点击取消')
        }
      }
    })
  }

效果如图
在这里插入图片描述

（4）完整代码
demo1.js
// pages/demo1/demo1.js
let name = ''
let shengchandi = ''
let price = ''
Page({
  onLoad(){
    this.getList(0)
  }, 
  //跳转到商品详情页
  goDetail(e){
    console.log('点击了跳转商品详情的id',e.target.dataset.id)
    wx.navigateTo({
      url: '/pages/demo1-1/demo1-1?id='+e.target.dataset.id,
    })

  },
  //获取商品输入的商品名
  getName(e){
    name = e.detail.value
    //console.log(name)
  },
  //获取商品输入的价格
  getPrice(e){
    price = e.detail.value
    //console.log(price)
  },
  //获取商品输入的生产地
  getshengchandi(e){
    shengchandi=e.detail.value
  },
  //添加商品
  addGood(){
    if (name == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品名为空啦！',
      })
    } else if (price == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品价格为空啦！',
      })
    } else if (shengchandi == '' ){
      wx.showToast({
        icon: 'none',
        title: '商品生产地为空啦！',
      })
    } else {
    //添加操作
    console.log('可以进行添加操作啦！')
    wx.cloud.database().collection('Goods')
    .add({
      data:{
      //数据库字段:用户输入
      name:name,
      price:parseInt(price), //转换为数字类型
      shengchandi:shengchandi
           }
    })
    .then(res => {
      console.log('添加成功',res)
      this.getList(0)
    })
    .catch(res =>{
      console.log('添加失败',res)
    })
    }
  },
   //获取数据列表（或排序）
   getList(type){
    let db = wx.cloud.database().collection("Goods")
    //0代表不做任何排序，1代表升序，-1代表降序
    if (type == 1){
      db = db.orderBy('price','asc')
    }else if(type == -1){
      db = db.orderBy('price','desc')
    }
    db.get().then(res => {
      console.log('商品列表请求成功',res)
      this.setData({
        list:res.data
      })
    })
    .catch(res => {
      console.error('商品详情页请求失败',res)
    })
  },

  //商品升序
  shengxu(){
    this.getList(1)

  },
  //商品降序
  jiangxu(){
    this.getList(-1)
  },
  //返回规定条数的数据
  limit(){
    wx.cloud.database().collection('Goods')
    .limit(3)
    .get().then(res => {
      console.log('商品列表请求成功',res)
      this.setData({
        list:res.data
      })
    })
    .catch(res => {
      console.error('商品详情页请求失败',res)
    })
  }
})
demo1.json
{
  "usingComponents": {},
  "navigationBarTitleText": "商品列表页"
}
demo1.wxml
输入商品名
<input bindinput="getName"></input>
输入商品价格
<input bindinput="getPrice"></input>
输入商品生产地
<input bindinput="getshengchandi"></input>
<button bindtap="addGood" type="primary">添加商品</button>
<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">
商品名：{{item.name}},价格：{{item.price}},生产地：{{item.shengchandi}}
</view>
</view>
<button bindtap="shengxu">按照商品价格升序</button>
<button bindtap="jiangxu">按照商品价格降序</button>
demo1.wxss

这是在规定边框线的厚度

input{
  border: 1px solid gray;
}
demo1-1.js
// pages/demo1-1/demo1-1.js
//全局变量
let price = ''
var id = ''
Page({
  data: {
    goods: {}
  },
  onLoad(options) {
    console.log('列表携带的值', options)
    id = options.id
    this.getDetail()
  },
  getDetail() {
    //获取商品列表
    wx.cloud.database().collection('Goods')
      .doc(id)
      .get()
      .then(res => {
        console.log('商品详情页请求成功！', res)
        this.setData({
          goods: res.data
        })
      })
      .catch(res => {
        console.log('商品详情页请求失败！', res)
      })
  },
  //获取用户输入的价格
  getPrice(e) {
    price = e.detail.value
  },
  //修改商品价格
  update() {
    console.log('新的商品价格', price)
    if (price == '') {
      wx.showToast({
        icon: 'none',
        title: '价格为空',
      })
    } else {
      wx.cloud.database().collection('Goods')
        .doc(id)
        .update({
          data: {
            price: price
          }
        })
        .then(res => {
          console.log('更新成功', res)
          this.getDetail()
        })
        .catch(res => {
          console.log('更新失败', res)
        })
    }
  },
  //删除商品
  remove() {
    console.log('点击了删除', id)
    //弹窗提示
    wx.showModal({
      title: "是否确定删除数据",
      content: '小手一敲，删库跑路',
      success(res) {
        if (res.confirm == true) {
          console.log('用户点击确定')
          wx.cloud.database().collection('Goods')
            .doc(id)
            .remove()
            .then(res => {
              console.log('删除成功', res)
              wx.navigateTo({
                url: '/pages/demo1/demo1',
              })
            })
            .catch(res => {
              console.log('删除失败', res)
            })
        } else if (res.cancel == true) {
          console.log('用户点击取消')
        }
      }
    })
  }
})
demo1-1.json
{
  "usingComponents": {},
  "navigationBarTitleText": "商品详情页"
}
demo1-1.wxml
<!--pages/demo1-1/demo1-1.wxml-->
<view>商品名：{{goods.name}}</view>
<view>价格：{{goods.price}}</view>
<view>生产地：{{goods.shengchandi}}</view>
更新商品价格
<input bindinput="getPrice"></input>
<button type="primary"bindtap="update">更新商品价格</button>
<button bindtap="remove">删除此商品</button>
demo1-1.wxss
/* pages/demo1-1/demo1-1.wxss */
input{
  border: 1px solid gray;
}
菜鸡说

在实验时，遇到问题好多，时刻在质疑自己。主要是大括号，中括号，单词拼错！
坚持！坚持！再坚持！

云开发（微信-小程序）笔记（四）---- 还有吗？再来点
在这里插入图片描述
菜鸟提醒：如果有什么不懂的地方，多看看官方文档。

在这里小菜鸡祝大家五一劳动节快乐！

感谢大家，点赞，收藏，关注，评论！

Cat God 007
关注
专栏目录
微信小程序云开发完整案例
qq_36524484的博客
08-08 9724
微信小程序云开发完整案例 #本项目获高校微信小程序开发大赛华中赛区三等奖 **【注】：**本人对该程序功能、UI等方面比较满意，分析总结了比赛成绩不算太好的原因，下一篇博客具体分享，给想参见该比赛的同学一些参考。 功能介绍视频 微信小程序云开发案例分享 项目导入 1.填入自己的APPID，然后导入 建立数据库，存储和云函数 1.点击云开发，点击设置，新建环境test，环境ID：test
外部系统访问微信小程序云开发数据库样例
weixin_41888563的博客
06-03 3514
外部系统访问微信小程序云开发数据库样例话不多说，直接看代码和注释吧 自从开放了微信小程序的云开发功能，无论是程序员还是用户都能得到更好的体验，目前更是开放了访问微信小程序云开发数据库的api，以后做小程序的项目肯定会遇到外部系统访问小程序云开发数据库的场景，在此做一个样例。 话不多说，直接看代码和注释吧 public static void main(String[] args) { //想要获取小程序云数据库里是数据先要获取access_token,通过下面的api接口发送小程序appid
微信小程序 - - 云开发の数据库学习笔记
是草莓味的啊
11-18 1837
类型 解释 数据库 云开发函数可用当前环境对应的数据库(也可根据需要用不同数据库)(对应MYSQL的数据库)(取值Object.xxx) 集合 数据库中多个记录的集合(对应MYSQL的表)(取值array[0]) 文档 数据库中的一条记录(对应MYSQL的行row)(取值Object.xxx) 字段 数据库中特定记录的值(对应MYSQL的行col)(取值string/int/float) 命令 特定的数据库查询命令，大于、小于、等于 ...
微信小程序云开发项目实例 | 体测助手（已发布）| 含登录，存档，历史等功能
qq_57057576的博客
07-22 1364
点击保存按钮，若是未登录，会自动跳转到登录页面，登录之后，方可开放存档功能。代码数量过大，内容展示有限，如对完整代码有兴趣，可以留下自己的邮箱。首页，用于数据的计算，计算出结果后可以进行保存。历史页，登录后，可以查询保存的历史记录。首先，附上小程序二维码，欢迎大家浏览。由于时间关系，页面做的稍微有些简陋。...
云数据库十大经典案例
12-02
阿里巴巴在线技术峰会,云数据库十大经典案例ApsaraDB专家服务组玄惭注
云数据库使用十大经典案例
12-05
《云数据库使用十大经典案例》视频教程。该教程由阿里云DBA高级专家讲解，凝聚了8年运维最佳实践，包括了如何解决：索引，sql优化，锁，cpu，iops，磁盘等常见问题。填写完毕后即可查看。
微信小程序开发-云笔记案例源码.zip
08-15
在这个“微信小程序开发-云笔记案例源码.zip”压缩包中，我们找到了一个完整的云笔记应用示例，这对于学习微信小程序开发的初学者或者想要了解小程序开发流程的开发者来说，是一个非常有价值的资源。 首先，我们要...
微信小程序开发-HotApp云笔记案例源码.zip
08-15
在本资源中，我们主要探讨的是微信小程序的开发，通过一个名为"HotApp云笔记"的实战案例来学习和理解其开发过程。微信小程序是一种轻量级的应用开发平台，允许开发者构建无需安装即可使用的应用程序，它介于传统APP...
可帮部署的云开发微信小程序源码
11-01
在本文中，我们将深入探讨“可帮部署的云开发微信小程序源码”，这是一个基于微信小程序平台，利用腾讯云开发技术构建的应用。此源码适用于创建记事类应用，旨在提供便捷的云端数据存储和管理功能。 首先，让我们来...
微信小程序开发-写笔记带后端案例源码.zip
12-12
在这个“微信小程序开发-写笔记带后端案例源码.zip”压缩包中，包含了一个完整的微信小程序项目，特别强调了后端部分，这意味着它不仅包括前端用户界面，还涵盖了服务器端的实现。 1. **微信小程序框架**：微信小...
小程序云开发入门——云数据库增删改查综合案例（3）
TaylorZ9826的博客
01-23 893
目录 1.能查看商品列表 2.能动态添加商品 3.能进入商品详情页 4.能删除某个商品 5.能修改某个商品的价格 1.创建两个页面——商品列表页和商品详情页 （1）app.json文件创建demo1和demo1-1的文件夹 "pages":[ "pages/demo1/demo1", "pages/demo1-1/demo1-1", "pages/index/index" ], （2）修改demo1的json文件，添加页面标题"navigationBar.
微信小程序案例——简易前端与云数据库的使用
weixin_47666981的博客
12-18 2240
实现内容——英语一成绩分析小师Version1.0.0 首页显示云数据库的储存数据。 记录页储存数据。 文件夹/文件 功能 images 储存用到的图片 pages 包括首页和记录页的配置文件 app.js 全局js文件，初始化云数据库 app.json 全局json文件，设计界面 app.wxss 全局wxss文件，界面样式 首页和储存页的设计 1. 首页——index index.js代码 //云数据库初始化 con...
12、云数据库增删查改详细案例
yuan_21的博客
04-04 409
12、云数据库增删查改详细案例1. 案例功能分析2. 学生列表页携带id数据跳转到对应学生详情页3. 添加编译模式，提升开发效率4. 动态增加一条记录5. 更新学生记录信息6. 弹窗提示确认是否删除7、删除商品附主列表跳详情页及增删查改全代码 1. 案例功能分析 能查看学生信息 能动态增加学生记录 能进入学生详细信息页 能删除某个学生记录 能修改某个学生综合成绩 2. 学生列表页携带id数据跳转到对应学生详情页 在标签内使用data-携带数据 <view wx:for="{{list}}"&g
基于腾讯云开发微信小程序（新闻发布及共享平台）上
小淼淼的博客
09-14 1967
基于腾讯云开发微信小程序（新闻发布及共享平台）上
云开发中云数据库的增删改查实例
weixin_65299897的博客
04-18 593
以上就是今天的学习内容啦~咱们下期再见老铁~
微信小程序云开发（数据库）
热门推荐
一个减肥的小胖子
09-21 8万+
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。 云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。 目前提供三大基础能力支持： 1、云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自...
微信小程序---使用云数据库实现登录功能
lzh445096的博客
05-25 2571
依托云平台实现登录功能
微信小程序连接云数据库基本使用
最新发布
m0_46745664的博客
10-22 4512
微信小程序云数据库常用函数介绍及演示
微信小程序 - 云开发
Qianmoer的博客
01-12 1万+
微信小程序 - 云开发
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cat God 007

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值