这篇笔记📒主要记录, uniapp使用uniCloud连接到阿里云,并在前端用代码连接到数据库,增删改查表。我们主要步骤如下
- uniapp如何使用uniCloud连接到阿里云
- 在云数据库控制台新建数据表 (也可以在前端代码创建,我们这里为了简单,可视化操作)
- 在前端代码连接数据库,查询表数据
uniapp如何使用uniCloud连接到阿里云
这个主要分为3步
- 为项目创建uniCloud云环境
- 创建云服务空间
- 为项目选择关联云服务空间或项目
在项目名上右键 - 选择创建uniCloud云环境
在项目名上右键 - 选择创建uniCloud云环境 - 选择阿里云, (成功后根目录多了uniCloud文件夹)
新建不会遇到 (因为我先前创建过,被我删了uniCloud文件夹📁,但是uni_modules
里面uni-id-common没有删除,所以再次新建提示这个,选择merge)
创建成功后,项目根目录下多了uniCloud文件夹
创建云服务空间
去到 unicloud 网站,如果没有账号注册先注册下,选择新建服务空间,可以选你要的云服务商,我这里创建了一个阿里云的免费版(一个月)
利用生成的uniCloud文件夹,右键选择关联云服务器空间或项目
选择我们刚才新建的服务空间
连接腾讯云、支付宝云也一样,这里用阿里云是因为人家5块一个月,我这是一个月免费的版本😂
在云数据库控制台新建数据表
新建表
点击添加记录, 新建了2条数据
默认数据我们是没有增删改查的权限,可以看到表结构permission那里都是false字段
这个表结构json是新建表自动生成的
{
"bsonType": "object",
"required": [],
"permission": {
"read": false,
"create": false,
"update": false,
"delete": false
},
"properties": {
"_id": {
"description": "ID,系统自动生成"
}
}
}
在前端代码连接数据库,查询表数据
写下查询代码,加一个按钮,点击按钮,就查询表格collection里chore数据,
<template>
<button @click="queryDatabase()">按钮</button>
</template>
<script setup>
const queryDatabase = async () => {
const db = uniCloud.database();
try {
// 查询集合 'chore' 中的数据
const res = await db.collection("chore").get();
if (res.result) {
console.log("服务器返回的数据", res, res.result.data);
} else {
console.error("查询失败:", res);
}
} catch (error) {
console.error("查询数据库错误:", error);
}
};
</script>
发现报错了,权限校验未通过,未能获取当前用户信息
前面我们说过,新建的collection表是没有增删改查权限的,我们去改下,把增、改、查权限放开
{
"bsonType": "object",
"required": [],
"permission": {
"read": true, // 允许查
"create": true, // 允许增
"update": true, // 允许改
"delete": false
},
"properties": {
"_id": {
"description": "ID,系统自动生成"
}
}
}
如果都改为true, 查询还是提示
未能获取当前用户信息,当前用户为匿名用户
,看下schema.json里, 是不是有些字段也单独配置了permission, 那里面的权限没改,而我们又查询了这些字段
我这里再点击按钮查询一次,发现可以查到数据了,因为我这里没单独给字段加权限