clientDB

unicloud-db组件

https://uniapp.dcloud.net.cn/uniCloud/unicloud-db.html

<unicloud-db> 组件是一个数据库查询组件，它是对clientDB的js库的再封装

前端通过组件方式直接获取uniCloud的云端数据库中的数据，并绑定在界面上进行渲染

如何使用

HBuilderX中敲下udb代码块，通过collection属性指定要查询表名，通过field属性指定要查询的字段，并且在where属性中指定查询的数据。查询结果data就可以直接渲染在界面上

查询数据

列表页面，使用unicloud-db组件，collection属性指定表名，data就是表的数据

vue

<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        {{data}}
      </view>
    </unicloud-db>

<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        {{data}}
      </view>
    </unicloud-db>

删除数据

列表页面，调用unicloud-db组件实例的remove方法

<template>
  <view class="content">
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link
            @longpress.native="rmItem(item._id)">
          </uni-list-item>
        </uni-list>
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    methods: {
      rmItem(id) {
        this.$refs.udb.remove(id)
      }
    }
  }
</script>

<template>
  <view class="content">
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link
            @longpress.native="rmItem(item._id)">
          </uni-list-item>
        </uni-list>
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    methods: {
      rmItem(id) {
        this.$refs.udb.remove(id)
      }
    }
  }
</script>

新增数据

新增页面

<template>
  <view>
    <uni-easyinput v-model="item.name" placeholder="name" />
    <uni-easyinput v-model="item.phone" placeholder="phone" />
    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        phone: '',
        name: ''
      }
    }
  },
  methods: {
    submit() {
      const db = uniCloud.database()
      db.collection('contacts')
        .add(this.item)
        .then(e => {
          console.log(e)
        })
    }
  }
}
</script>

<template>
  <view>
    <uni-easyinput v-model="item.name" placeholder="name" />
    <uni-easyinput v-model="item.phone" placeholder="phone" />
    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        phone: '',
        name: ''
      }
    }
  },
  methods: {
    submit() {
      const db = uniCloud.database()
      db.collection('contacts')
        .add(this.item)
        .then(e => {
          console.log(e)
        })
    }
  }
}
</script>

修改database/contacts.schema.json中properties属性，增加提交的字段，不然会报错：数据库验证失败：提交的字段在本地数据表的schema文件中不存在

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": true,
    "create": true,
    "update": true,
    "delete": true
  },
  "properties": {
    "_id": {
      "description": "ID，系统自动生成"
    },
    "name": {},
    "phone": {}
  }
}

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": true,
    "create": true,
    "update": true,
    "delete": true
  },
  "properties": {
    "_id": {
      "description": "ID，系统自动生成"
    },
    "name": {},
    "phone": {}
  }
}

修改数据

列表页面

vue

<template>
  <view class="content">
    <unicloud-db ref="udb" v-slot:default="{ data, loading, error, options }" collection="contacts">
      <view v-if="error">{{ error.message }}</view>
      <view v-else>
        <uni-list><uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link @click.native="uuu(item)"></uni-list-item></uni-list>
      </view>
    </unicloud-db>
  </view>
</template>

<script>
export default {
  methods: {
    uuu(item) {
      uni.navigateTo({
        url: '../update/update?item' + JSON.stringify(item),
        success: res => {},
        fail: () => {},
        complete: () => {}
      })
    }
  }
}
</script>

<template>
  <view class="content">
    <unicloud-db ref="udb" v-slot:default="{ data, loading, error, options }" collection="contacts">
      <view v-if="error">{{ error.message }}</view>
      <view v-else>
        <uni-list><uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link @click.native="uuu(item)"></uni-list-item></uni-list>
      </view>
    </unicloud-db>
  </view>
</template>

<script>
export default {
  methods: {
    uuu(item) {
      uni.navigateTo({
        url: '../update/update?item' + JSON.stringify(item),
        success: res => {},
        fail: () => {},
        complete: () => {}
      })
    }
  }
}
</script>

更新页面

vue

<template>
  <view>
    <uni-easyinput v-model="item.name" placeholder="name" />
    <uni-easyinput v-model="item.phone" placeholder="phone" />
    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        _id: '',
        phone: '',
        name: ''
      }
    }
  },
  methods: {
    onLoad({ item }) {
      this.item = JSON.parse(item)
    },
    submit() {
      const db = uniCloud.database()
      let item = { ...this.item } // 浅拷贝
      console.log(item, this.item)
      delete item._id
      db.collection('contacts')
        .doc(this.item._id)
        .update(item)
        .then(e => {
          console.log(e)
        })
    }
  }
}
</script>

<template>
  <view>
    <uni-easyinput v-model="item.name" placeholder="name" />
    <uni-easyinput v-model="item.phone" placeholder="phone" />
    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        _id: '',
        phone: '',
        name: ''
      }
    }
  },
  methods: {
    onLoad({ item }) {
      this.item = JSON.parse(item)
    },
    submit() {
      const db = uniCloud.database()
      let item = { ...this.item } // 浅拷贝
      console.log(item, this.item)
      delete item._id
      db.collection('contacts')
        .doc(this.item._id)
        .update(item)
        .then(e => {
          console.log(e)
        })
    }
  }
}
</script>

clientDB #

unicloud-db组件 #

如何使用 #

查询数据 #

删除数据 #

新增数据 #

修改数据 #