uniCloud云开发笔记一

萧寂173

于 2025-02-08 16:13:44 发布

阅读量1.2k

点赞数 25

分类专栏： uniapp 文章标签：笔记

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/145455492

版权

文章目录

云空间配置
- 创建云空间
- 创建数据库
项目连接云空间
云函数创建和使用
云数据库操作
- 云函数通过传统方式操作数据库
云函数的上传和下载
前端项目托管
- 配置域名
文件上传(这里演示图片上传)

云空间配置

创建云空间

左上角新建 - 项目 - 输入项目名 - 下面勾选启用uniCloud - 选择后面的服务商这里建议阿里云(反正都一样) - 创建
创建完成打开项目 - 找到uniCloud目录(后面有提示未关联云服务空间) - 右键 - 关联云服务空间或项目 - 如果提示缺少appid啥的(有提示找到manifest.json点击重新获取即可，没登陆的话会要求登录) - 然后再次右键点击关联云服务空间或项目
第一次创建云开发的话这里是空的(每新建一次代表一个新项目的云空间) - 点击新建 - 这里会跳转到开发者中心后台 - 点击左边侧边栏的uniCloud(没有实名认证的这里会提示需要认证才能使用并且会跳转到实名页面,接下来按提示认证即可)
然后点击到uniCloud那个页面 - 点击右上角新建服务空间(新人要同意一下协议) - 建议使用阿里云作为服务商(对比下就知道了,阿里云有免费额度,可以开发中使用,另外收费的额度也不是特别贵) - 选择阿里云 - 输入服务空间名称(也就是相当于自己的后端项目名称) - 选择免费版本(用户量大了再换收费版) - 点击立即购买 - 点击确认开通 - 这样我们就有了一个免费的服务空间了(时长是一个月,后面需要购买,不够阿里云挺便宜的) - 然后等初始化完毕后进行下面操作(初始化的过程可能比较长,耐心等待)
初始化完毕后点击服务空间右侧的详情进入服务空间后台 - 点击旁边的变配就是购买其他容量的云空间
接下来点击详情进入服务空间后台

创建数据库

进入服务空间后台 - 点击云数据库 - 云数据库 - 点击右侧页面左上角的+新建数据表
输入表名(下面的分类千万不要勾选,不然会出现很多你不认识的字段) - 点击创建
点击新建的表 - 点击添加记录 - 例如我下面的格式

{
   
	"name": "张三",
	"age": 20,
	"sex": "男"
}

输入完成后页面上面就会显示刚刚添加进去的表数据了，可以发现自动生成了一个_id值，这个是云数据库自动生成的，除此之外还有更多配置，如字段描述，唯一值，权限什么的等等各种配置,可以查阅我下面发的文档地址进行查询
点击查看更多字段相关的配置
接下来创建三个记录，加上面这个一共四个

{
   
    "name": "李四",
    "age": 22,
    "sex": "男"
}

{
   
    "name": "王二",
    "age": 18,
    "sex": "女"
}

{
   
    "name": "麻子",
    "age": 16,
    "sex": "女"
}

有了以上记录我们就可以在代码里面做操作了(后面会用到)

项目连接云空间

回到HBuilder里面 - 找到我们的项目 - 展开找到uniCloud - 后面显示未关联云服务空间 - 右键 - 关联云服务空间或项目 - 选择刚刚我们创建的云空间 - 点击关联即可 - 再次查看后面不显示(未关联云服务空间)了

云函数创建和使用

找到项目的uniCloud/cloudfunctions这个文件夹 - 选中后右键 - 新建云函数/云对象 - 输入函数名称(相当于接口名称，要通熟易懂) - 使用默认模版 - 点击创建 - 后续代码都是在这个云函数里面的index.js里面去写,写后端的处理逻辑，默认的模版打印了一下传进来的参数信息，将参数传递给客户端，我们不动这个逻辑，接下来演示怎么发请求以及传递参数
在页面代码里面加入如下代码即可发请求，代码如下(我这里使用的是vue3模板)

<script setup>
import {
    onMounted } from 'vue';

	onMounted(()=>{
   
		uniCloud.callFunction({
   
			name:"demo01", // 这个name就是云函数名称
			data:{
     // 不传参的话可以把data去掉
				name:'哈哈',
				age:20
			}
		}).then((res)=>{
   
			console.log(res); // 这个res返回的就是上传的参数
		})
	})
</script>

然后启动项目,查看打印效果，例如选择浏览器运行，运行后会发现同时打开了原有的控制台和uniCloud控制台可以查看云函数打印的信息，也就是模板默认提供的event也就是参数信息
如果运行同时报错了跨域 - 打开云空间后台 - 在云数据库同级下面有个跨域配置 - 例如我本地地址为192.168.1.92:5173 - 则点开跨域配置 - 新增域名 - 将我本地域名添加进去即可 - 如果项目放到静态网页托管之类的平台也是同样将其他平台域名添加进去即可点击查看web端跨域解决方案

云数据库操作

上面已经讲了怎么创建数据库并且新增了四条数据在里面

云函数通过传统方式操作数据库

查

查询全部数据

新增getData云函数，代码如下

'use strict';
const db = uniCloud.database(); // 个人理解为是获取数据库实例
exports.main = async (event, context) => {
   
	// 获取demo集合的引用，集合就是表,get()方法默认是获取全部数据
	let res = db.collection('demo').get()
	//返回数据给客户端
	return res
};

页面发请求代码如下

<script setup>
import {
    onMounted } from 'vue';

	onMounted(()=>{
   
		uniCloud.callFunction({
   
			name:"getData", // 这个name就是云函数名称
		}).then((res)=>{
   
			console.log(res); // 这个res返回的就是上传的参数
		})
	})
</script>

查看控制台打印可以发现打印到了所有的数据

查询数据总条数

'use strict';
const db = uniCloud.database(); // 个人理解为是获取数据库实例
exports.main = async (event, context) => {
   
	// 获取demo集合的引用，集合就是表,count()方法返回数据总条数
	let res = db.collection('demo').count()
	//返回数据给客户端
	return res
};

页面发请求代码同上

分页查询

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
   
	
	// 查询指定条数(如下只查询两条数据)
	// let res = await db.collection('demo').limit(2).get()
	
	// 查询指定条数并跳过多少条(就是跳过前两条,从第三条开始查询数据)
	// skip公式为: skip((pageNum - 1) * pageSize)  pageNum是当前页码,pageSize是每页数量
	// 例如查询每页10条数据,从第三页开始,则limit(10).skip((3 - 1) * 10)
	let res = await db.collection('demo').limit(2).skip(2).get()
	
	//返回数据给客户端
	return res
};

页面发请求代码同上

正序倒序查询

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
   
	// 如下就是根据id升序排列
	let res = await db.collection('demo').orderBy(