p5-uniCloud实战通讯录功能-read

以前开发联网的业务

• 首先要设计好数据库
• 然后在服务端写代码，实现读取数据库中数据，并封装分成api接口
• 前端通过api接口来读取接口，将读取到的数据绑定到变量，最终在模板视图中渲染

如果开发的是uniCloud，直接在视图层写六行代码

实战: 开发通讯录

1. HbuilderX里新建一个项目《通讯录》
2. 创建一个云服务空间contacts并关联到项目
3. 创建数据表:contacts
4. 建字段:name, tel
5. 录入两个人的数据
6. 前端创建udb组件，读区数据表contacts

• 表结构，permission都设置为true

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

• 连接云端数据库，前端写上udb标签,选择unicloud-db,数据就能显示出来了

<template>
	<view class="content">
		<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>
	</view>
</template>

案例1.png