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

云开发（微信-小程序）笔记（二）---- 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;
}

菜鸡说

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

云开发（微信-小程序）笔记（四）---- 还有吗？再来点

菜鸟提醒：如果有什么不懂的地方，多看看官方文档。

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

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