12、云数据库增删查改详细案例

最新推荐文章于 2023-04-18 22:55:18 发布

追星星の人

最新推荐文章于 2023-04-18 22:55:18 发布

阅读量364

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/yuan_21/article/details/115428421

版权

小程序专栏收录该内容

15 篇文章 2 订阅

订阅专栏

12、云数据库增删查改详细案例

1. 案例功能分析
2. 学生列表页携带id数据跳转到对应学生详情页
3. 添加编译模式，提升开发效率
4. 动态增加一条记录
5. 更新学生记录信息
6. 弹窗提示确认是否删除
7、删除商品
附主列表跳详情页及增删查改全代码

1. 案例功能分析

能查看学生信息
能动态增加学生记录
能进入学生详细信息页
能删除某个学生记录
能修改某个学生综合成绩

2. 学生列表页携带id数据跳转到对应学生详情页

在标签内使用data-携带数据

<view wx:for="{{list}}">
  <view bindtap="goDetail" data-name="{{item.name}}">姓名： {{item.name}} ，性别： {{item.sex}}，综合成绩： {{item.score}}</view>
</view>

在js文件中的点击方法里拿到要绑定的数据

 goDetail(e){
    console.log("点击了列表跳详情页",e.currentTarget.dataset.name)
  }

运行截图：
在这里插入图片描述

通过点击事件的js响应函数实现跳转(跳转时携带id数据）
-详情页接收列表页携带的数据

3. 添加编译模式，提升开发效率

普通编译时会默认进入app.json中设置的主页，假如我们在代码开发想在编译后进入直接进入某个页面而不是主页，可以通过添加编译模式方法。
添加编译模式方法：
在这里插入图片描述

在这里插入图片描述

4. 动态增加一条记录

通过输入框获取数据，然后添加记录。
代码：三个文件wxml、js、wxss

<!--pages/demo03/demo03.wxml-->
<view class="content">
  <view class='text-title'>增加记录</view>
  ID：
  <input bindinput="getID"></input>
  姓名：
  <input bindinput="getName"></input>
  性别：
  <input bindinput="getSex"></input>
  综合成绩：
  <input bindinput="getScore"></input>
  <button bindtap="addStu" type="primary">添加记录</button>
</view>

/* pages/demo03/demo03.wxss */
.content{
  border:1rpx solid gray
}
.text-title{
  text-align:center;
}
input{
  border:1rpx solid rgb(19, 6, 34)
}

// pages/demo03/demo03.js
let id=''
let name=''
let sex=''
let score=0

Page({
  //获取本次记录ID
  getID(e){
    id=e.detail.value
  },
  //获取输入姓名
  getName(e){
    name=e.detail.value
  },
  //获取输入性别
  getSex(e){
    sex=e.detail.value
  },
  //获取输入成绩
  getScore(e){
    score=e.detail.value
  },
  //添加记录
  addStu(){
    if(id == ''){
      wx.showToast({
        icon:'none',
        title: 'ID为空了',
      })
    }else  if(name == ''){
      wx.showToast({
        icon:'none',
        title: '名字为空了',
      })
    }else  if(sex == ''){
      wx.showToast({
        icon:'none',
        title: '性别信息为空了',
      })
    }else  if(score == 0){
      wx.showToast({
        icon:'none',
        title: '成绩信息为0',
      })
    }else{
      console.log('ID',id)
      console.log('姓名',name)
      console.log('性别',sex)
      console.log('成绩',score)
      wx.cloud.database().collection('stu')
      .add({
        data:{
          _id:id,
          name:name,
          sex:sex,
          score:score
        }
      })
      .then(res =>{
        console.log("列表更新成功")
      })
      .catch(err =>{
        console.log("列表更新失败")
      })
    }
  }
})

5. 更新学生记录信息

在知道学生身份信息id的情况下，更新学生成绩。在下面js文件中需手动设置id值。
注意：更新时由于表的权限问题，用户只能更新自己创建的记录，更新其他人创建的记录会更新失败。通过云函数可以解决这个问题。
代码：三个文件wxml、js、wxss

<!--pages/demo03-2/demo03-2.wxml-->
更新学生成绩：
<input bindinput="getNewScore"></input>
<button bindtap="updateStu" type="primary">修改记录</button>

/* pages/demo03-2/demo03-2.wxss */
input{
  border:1rpx solid rgb(19, 6, 34)
}

// pages/demo03-2/demo03-2.js
let score=0
let id=''
Page({
  data: {
    stu:{}
  },
  onLoad: function (options) {
    id = options.id,
    this.getItemDetail()
  },
  getItemDetail(){
    wx.cloud.database().collection('stu').doc(id).get()
    .then( res =>{
      console.log("商品详情页请求成功",res)
      this.setData({
        stu:res.data
      })
    })
    .catch( err =>{
      console.log('商品详情页请求失败',err)
    })
  },
  //获取待更新的成绩信息
  getNewScore(e){
    score=e.detail.value
  },
  updateStu(){
    console.log(score)
    if(score == ''){
      wx.showToast({
        icon:'none',
        title: '更新成绩为空了',
      })
    }else{
      wx.cloud.database().collection('stu').doc(id)
      .update({
        data:{
          score:score
        }
      })
      .then(res =>{
        console.log("记录更新成功"),
        this.getItemDetail()
      })
      .catch(err =>{
        console.log("记录更新失败")
      })
    }
  }
})

6. 弹窗提示确认是否删除

 wx.showModal({
      title:'是否确认删除？',
      content:"您再仔细想一想，删除后就没了！",
      success(res){
        if(res.confirm == true){ //用户点击了确定
          console.log("确认删除")
        }else if(res.cancel ==true){//用户点击了取消
          console.log("取消删除")
        }
      }
    })

7、删除商品

删除给定id的学生信息。

// pages/demo03-2/demo03-2.js
let id=''
Page({
  deleteStu(){
    wx.showModal({
      title:'是否确认删除？',
      content:"您再仔细想一想，删除后就没了！",
      success(res){
        if(res.confirm == true){ //用户点击了确定
          wx.cloud.database().collection('stu').doc(id).remove()
          .then(res =>{
            wx.navigateTo({
              url: '/pages/demo03/demo03',
            })
          })
          .catch(err =>{
            console.log("删除失败",err)
          })
        }else if(res.cancel ==true){//用户点击了取消
          console.log("取消删除")
        }
      }
    })
  }
})

附主列表跳详情页及增删查改全代码

在这里插入图片描述

<!--pages/demo03/demo03.wxml-->
<view class="content">
  <view class='text-title'>查询结果显示</view>
  <view  wx:for="{{list}}" wx:key="_id">
    <view bindtap="goDetail" data-id="{{item._id}}">ID： {{item._id}} ，姓名： {{item.name}} ，性别： {{item.sex}}，成绩： {{item.score}}</view>
  </view>
</view>

<view class="content">
  <view class='text-title'>增加记录</view>
  ID：
  <input bindinput="getID"></input>
  姓名：
  <input bindinput="getName"></input>
  性别：
  <input bindinput="getSex"></input>
  综合成绩：
  <input bindinput="getScore"></input>
  <button bindtap="addStu" type="primary">添加记录</button>
</view>

/* pages/demo03/demo03.wxss */
.content{
  border:1rpx solid gray
}
.text-title{
  text-align:center;
}
input{
  border:1rpx solid rgb(19, 6, 34)
}

// pages/demo03/demo03.js
let id=''
let name=''
let sex=''
let score=0

Page({
  data: {
    list:[]
  },
  onLoad: function (options) {
    this.getList()
  },
  getList(){
    wx.cloud.database().collection('stu').get()
    .then( res =>{
      console.log("success",res)
      this.setData({
        list:res.data
      })
    })
    .catch( err =>{
      console.log('error',err)
    })
  },
  //跳转到商品详情页
  goDetail(e){
    console.log("点击了列表跳详情页id",e.currentTarget.dataset.id)
    wx.navigateTo({
      url: '/pages/demo03-2/demo03-2?id='+e.currentTarget.dataset.id,
    })
  },
  //获取本次记录ID
  getID(e){
    id=e.detail.value
  },
  //获取输入姓名
  getName(e){
    name=e.detail.value
  },
  //获取输入性别
  getSex(e){
    sex=e.detail.value
  },
  //获取输入成绩
  getScore(e){
    score=e.detail.value
  },
  //添加记录
  addStu(){
    if(id == ''){
      wx.showToast({
        icon:'none',
        title: 'ID为空了',
      })
    }else  if(name == ''){
      wx.showToast({
        icon:'none',
        title: '名字为空了',
      })
    }else  if(sex == ''){
      wx.showToast({
        icon:'none',
        title: '性别信息为空了',
      })
    }else  if(score == 0){
      wx.showToast({
        icon:'none',
        title: '成绩信息为0',
      })
    }else{
      console.log('ID',id)
      console.log('姓名',name)
      console.log('性别',sex)
      console.log('成绩',score)
      wx.cloud.database().collection('stu')
      .add({
        data:{
          _id:id,
          name:name,
          sex:sex,
          score:score
        }
      })
      .then(res =>{
        this.getList()
      })
      .catch(err =>{
        console.log("列表更新失败")
      })
    }
  }
})

<!--pages/demo03-2/demo03-2.wxml-->
<view>ID： {{stu._id}} ，姓名： {{stu.name}} ，性别： {{stu.sex}}，成绩： {{stu.score}}</view>
更新学生成绩：
<input bindinput="getNewScore"></input>
<button bindtap="updateStu" type="primary">修改记录</button>
<button bindtap="deleteStu" >删除记录</button>

/* pages/demo03-2/demo03-2.wxss */
input{
  border:1rpx solid rgb(19, 6, 34)
}

// pages/demo03-2/demo03-2.js
let score=0
let id=''
Page({
  data: {
    stu:{}
  },
  onLoad: function (options) {
    id = options.id,
    this.getItemDetail()
  },
  getItemDetail(){
    wx.cloud.database().collection('stu').doc(id).get()
    .then( res =>{
      console.log("商品详情页请求成功",res)
      this.setData({
        stu:res.data
      })
    })
    .catch( err =>{
      console.log('商品详情页请求失败',err)
    })
  },
  //获取待更新的成绩信息
  getNewScore(e){
    score=e.detail.value
  },
  updateStu(){
    console.log(score)
    if(score == ''){
      wx.showToast({
        icon:'none',
        title: '更新成绩为空了',
      })
    }else{
      wx.cloud.database().collection('stu').doc(id)
      .update({
        data:{
          score:score
        }
      })
      .then(res =>{
        console.log("记录更新成功"),
        this.getItemDetail()
      })
      .catch(err =>{
        console.log("记录更新失败")
      })
    }
  },
  deleteStu(){
    wx.showModal({
      title:'是否确认删除？',
      content:"您再仔细想一想，删除后就没了！",
      success(res){
        if(res.confirm == true){ //用户点击了确定
          wx.cloud.database().collection('stu').doc(id).remove()
          .then(res =>{
            wx.navigateTo({
              url: '/pages/demo03/demo03',
            })
          })
          .catch(err =>{
            console.log("删除失败",err)
          })
        }else if(res.cancel ==true){//用户点击了取消
          console.log("取消删除")
        }
      }
    })
  }
})

运行截图：
列表页：
在这里插入图片描述

详情页：
在这里插入图片描述

追星星の人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12、云数据库增删查改详细案例

12、云数据库增删查改详细案例1. 案例功能分析2. 学生列表页携带id数据跳转到对应学生详情页3. 添加编译模式，提升开发效率4. 动态增加一条记录5. 更新学生记录信息6. 弹窗提示确认是否删除7、删除商品附主列表跳详情页及增删查改全代码1. 案例功能分析能查看学生信息能动态增加学生记录能进入学生详细信息页能删除某个学生记录能修改某个学生综合成绩2. 学生列表页携带id数据跳转到对应学生详情页在标签内使用data-携带数据<view wx:for="{{list}}"&g
复制链接

扫一扫