uniCloud初体验

本文章主要分为3个部分的内容，从而从3个角度了解uniCloud的简单应用

• 云函数实现hello world
• 云数据库实现联系人demo
• schema2code快速产出进阶联系人demo

1、云函数实现hello world

• 创建云服务-创建服务空间
• uniCloud提供30天免费的云服务专属服务器，在到期之前可在该服务器上创建服务空间列表，只需要注册Dcloud账号并且进行开发者认证即可申领。
• 创建好云服务空间后，下一步就可以创建本地项目，选择默认模板，并且勾选中启用uniCloud，选择对应申请的服务器的运营商，点击创建即可
  
• 创建好项目后，右键uniCloud文件夹，选择"关联云服务空间或项目"，勾选中刚刚创建的云服务空间，点击确定

• 右键cloudfunctions，新建云函数，在新建的云函数中写代码，然后右键helloWorld文件夹上传部署云函数，上传成功后可以在云函数列表中看到已上传的云函数
  
• 在页面上调用云函数，代码如下：
  /pages/index/index.vue

uniCloud.callFunction({
	name: "helloWorld",
	success: (e) => {
		this.title = e.result
	}
})

点击预览，可以看到函数的调用情况

• 为了验证云函数是否生效，可以在本地修改函数中返回的字符串，保存后上传部署，刷新页面为新返回的内容，证明云函数调用成功

2、云数据库实现联系人demo

• 第一步，在云空间中新建一个库表,新建完成后向里面添加一条数据，其中_id是库表自动生成的索引值
  
  点击表结构可以看到该库表的schema代码，我们可以点击编辑按钮，在页面上直接修改库表属性，也可以将库表的schemaCode下载到编辑器中修改后再上传到服务器，这里我们采用第二种方式
  

• 右键目录中的database，下载所有DB schema
  

• 接下来演示通过标签进行查表的方法
  创建list页面，编译以下代码，保存后发现我们没有读表的权限，我们需要将下载的DB Schema中的read属性改为true（其中的permission对应该表的增删改查四种权限后续将不在进行单独说明），上传脚本后刷新页面，可以看到数据已经成功获取到库表中的数据，我们去服务器直接修改库表数据，刷新页面可以发现页面上的数据也相应发生了变化，证明确实是成功获取到库表的数据

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

• 稍微美化一下demo，将uni-ui导入项目，导入后将列表渲染，然后新建详情页，并且在列表页带参跳转到详情页

<template>
	<view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="contact-demo">
			<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 :to="'/pages/add/add?id='+ item._id"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

• 在详情页中，我们将通过jql实现对contact-demo表的增删改查，下面代码为详情页的简单模板
  /page/detail/detail.vue

<template>
	<view>
		<uni-easyinput class="mini_input" v-model="item.name" placeholder="请输入姓名" />
		<uni-easyinput class="mini_input" v-model="item.phone" placeholder="请输入手机号" />
		<view class="btn_box">
			<button @click="rmItem" type="warn" class="mini-btn">删除</button>
			<button @click="addItem" type="primary" class="mini-btn">保存</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				udb: "",
				id: "",
				item: {
					name: "",
					phone: ""
				}
			}
		},
	}
</script>
<style scoped>
	.mini_input {
		margin-top: 30rpx;
	}
	.btn_box {
		display: flex;
		margin-top: 40rpx;
	}
	.mini-btn {
		width: 200rpx;
	}
</style>

查询联系人

上文中我们介绍了通过标签快速查表的方法，接下来我们会用js代码直接对数据库进行操作，下面首先介绍通过指定属性查表的方法

mounted() {
	this.id = this.$route.query.id || ""
	const udb = uniCloud.database()
	if (this.id) {
		this.udb.collection('contact-demo')
		.where({_id: this.id})
		.get()
		.then(res => {
			console.log(res)
			if (res.result.data.length) {
				this.item = res.result.data[0]
			}
		})				
	}
}

新增&修改&删除

新增和修改的时候，因为涉及到具体的某个字段，所以需要手动维护表字段，并且上传服务器

addItem() { 
	const udb = uniCloud.database()
	if (this.item.name && this.item.phone) {
		if (!this.id) { // 新增
			this.udb.collection('contact')
			.add(this.item)
			.then(res => {
				if (res.result.code === 0) {
					uni.navigateTo({
						url: "/pages/list/list"
					})
				}
			})						
		}  else { // 修改
			const { name, phone } = this.item
			this.udb.collection('contact')
			.where({_id: this.id})
			.update({ name, phone })
			.then(res => {
				if (res.result.code === 0) {
					uni.navigateTo({
						url: "/pages/list/list"
					})
				}
			})
		}
	}
},
rmItem() {
	if (this.id) {
		this.udb.collection('contact-demo')
		.where({_id: this.id})
		.remove()
		.then(res => {
			if (res.result.code === 0) {
				uni.navigateTo({
					url: "../list/list"
				})							
			}
		})				
	}
},

记得修改库表对应操作权限为true，并且上传到服务器

3、schema2code快速产出进阶联系人demo

• 使用OpenDB表模板创建联系人表
  

• 打开创建好的表，点击选中，点击schema2code，安装schema2Code插件到HBuilder中,重启HBuilder后将服务器的DB schema下载到编辑器中，打开更新好的代码，右键点击schema2code，点击注册
  
  简单说一下下载到schema的内容，其中properties字段属于字段级配置，用来描述单个字段，其余均为表级配置，用来描述表或者字段与字段之间的关系。

• bsonType
  描述数据的类型，固定值为object

• permission
  权限部分，用来限制操作表的权限

• required
  生成表单后的必填字段

• properties
  具体的字段描述
  其中bsonType定义字段数据类型，该类型会影响生成的表单项的类别（例如int对应radio，array对应checkbox）；
  title为生成表单的标题；
  description备注该字段的含义并且对应表单中的pleaseholder；
  order控制生成的表单项排序，越小越靠前；
  trim控制表单输入时是否清除两端空格；
  defaultValue默认值；
  enum枚举项，对应表单的选项（支持带描述的数组，也支持简单数组）
  。。。
  其他属性可查文档
  https://uniapp.dcloud.io/uniCloud/schema
  

• 页面效果
  
  
  
  

这样我们就完成了进阶的联系人管理项目，包括前端、后端、数据库。