地址

https://unicloud.dcloud.net.cn/

创建空间

1.可以用hbuild创建项目的uni-app项目的时候顺带创建

2.可以直接在网页里创建

创建项目

hbuildx创建一个uni-app项目，然后关联一个云空间，没有就自己新建一个

云函数

在cloudfunctions目录下右击新建云函数 我们这里示例取名叫run,然后目录下就会生成一个run目录，然后里面有个index.js文件
image.png

里面的默认代码如下

  1. 'use strict';
  2. exports.main = async (event, context) => {
  3.     //event为客户端上传的参数
  4.     console.log('event : ', event)
  6.     //返回数据给客户端
  7.     return event
  8. };

我们在应用中使用云函数

我们先编写下云函数把它编写成一个数组求和

  1. 'use strict';
  2. exports.main = async (event, context) => {
  3.     //event为客户端上传的参数
  4.     let sum=0
  5.     event.forEach((i)=>{
  6.         sum+=i
  7.     })
  9.     //返回数据给客户端
  10.     return sum
  11. };

写好之后右击目录上传部署

然后我们在index.vue里应用

  1. onLoad() {
  2.             uniCloud.callFunction({
  3.                 name:'run',  //表示函数的名字
  4.                 data:[4,5,7,8],    //表示传入的数据，被云函数event接收
  5.                 success: (e) => {  //e便是success成功后返回的内容，e.result就是return的内容
  6.                         this.title=e.result
  7.                 }
  8.             })
  9.         },

我们在onload里写

uniCloud.callFunction来调用函数

云数据库

在云空间中创建数据表peoples

然后把表结构里的read改成true

  1. {
  2.   "bsonType": "object",
  3.   "required": [],
  4.   "permission": {
  5.     "read": true,
  6.     "create": false,
  7.     "update": false,
  8.     "delete": false
  9.   },
  10.   "properties": {
  11.     "_id": {
  12.       "description": "ID，系统自动生成"
  13.     }
  14.   }
  15. }

然后自己添加几个条目

回到index.vue

清空代码，然后写上udb 按回车代码就出来了collection=”peoples”

然后就可以渲染了，具体代码如下

  1. <template>
  2.     <view>
  3.         <unicloud-db v-slot:default="{data, loading, error, options}" collection="peoples">
  4.             <view v-if="error">{{error.message}}</view>
  5.             <view v-else>
  6.                 <text v-for="i in data">
  7.                     name:{{i.name}}
  8.                     <br>
  9.                     age:{{i.age}}
  10.                     <br>
  11.                     sex:{{i.sex}}
  12.                     <hr>
  13.                 </text>
  14.             </view>
  15.         </unicloud-db>
  16.     </view>
  17. </template>

删除数据

在udb里加一个ref=”udb”

  1. <unicloud-db ref="udb"

然后自己写一个方法，del

  1. del(id){
  2. this.$refs.udb.remove(id)
  3. }

然后用button绑定

  1. <button @click="del(i._id)">del</button>

然后点击就会弹出确认删除嘛，

然后就删除了，当然要把数据库的delete权限改成true。
image.png

添加数据

新建一个页面add.vue

  1. <template>
  2.     <view>
  3.         <label for="">name:</label><input type="text" value="" v-model="item.name" />
  4.         <label for="">age:</label><input type="number" value="" v-model="item.age" />
  5.         <label for="">sex</label><input type="text" value="" v-model="item.sex" />
  6.         <button @click="submit">tijiao</button>
  7.     </view>
  8. </template>
  10. <script>
  11.     export default {
  12.         data() {
  13.             return {
  14.                 item:{
  15.                     name:'',
  16.                     age:Number,
  17.                     sex:''
  18.                 }
  19.             }
  20.         },
  21.         methods: {
  22.             submit(){
  23.                 const db=uniCloud.database()
  24.                 db.collection('peoples').add(this.item).then(e=>{
  25.                     console.log(e)
  26.                 })
  27.             }
  28.         }
  29.     }
  30. </script>
  32. <style>
  34. </style>

对用的就是这段代码

  1. const db=uniCloud.database()
  2.                 db.collection('peoples').add(this.item).then(e=>{
  3.                     console.log(e)
  4.                 })

现在我们输入内容提交发现，没权限，和没有指定字段，我们还要该下peoples的数据结构

我们先简单的写下

  1. {
  2.     "bsonType": "object",
  3.     "required": [],
  4.     "permission": {
  5.         "read": true,
  6.         "create": true,
  7.         "update": true,
  8.         "delete": true
  9.     },
  10.     "properties": {
  11.         "_id": {
  12.             "description": "ID，系统自动生成"
  13.         },
  14.         "name":{},
  15.         "age":{},
  16.         "sex":{},
  18.     }
  19. }

现在再提交就可以了