uniapp项目连接到阿里云,使用云数据库

1,624 阅读3分钟

这篇笔记📒主要记录, uniapp使用uniCloud连接到阿里云,并在前端用代码连接到数据库,增删改查表。我们主要步骤如下

  1. uniapp如何使用uniCloud连接到阿里云
  2. 在云数据库控制台新建数据表 (也可以在前端代码创建,我们这里为了简单,可视化操作)
  3. 在前端代码连接数据库,查询表数据
uniapp如何使用uniCloud连接到阿里云

这个主要分为3步

  1. 为项目创建uniCloud云环境
  2. 创建云服务空间
  3. 为项目选择关联云服务空间或项目
在项目名上右键 - 选择创建uniCloud云环境

在项目名上右键 - 选择创建uniCloud云环境 - 选择阿里云, (成功后根目录多了uniCloud文件夹) image.png

新建不会遇到 (因为我先前创建过,被我删了uniCloud文件夹📁,但是uni_modules里面uni-id-common没有删除,所以再次新建提示这个,选择merge)

image.png image.png

创建成功后,项目根目录下多了uniCloud文件夹 image.png

创建云服务空间

去到 unicloud 网站,如果没有账号注册先注册下,选择新建服务空间,可以选你要的云服务商,我这里创建了一个阿里云的免费版(一个月)

image.png

image.png

利用生成的uniCloud文件夹,右键选择关联云服务器空间或项目

image.png

选择我们刚才新建的服务空间 image.png

image.png

连接腾讯云、支付宝云也一样,这里用阿里云是因为人家5块一个月,我这是一个月免费的版本😂

在云数据库控制台新建数据表

新建表 image.png

点击添加记录, 新建了2条数据 image.png

image.png

默认数据我们是没有增删改查的权限,可以看到表结构permission那里都是false字段

image.png

这个表结构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>

发现报错了,权限校验未通过,未能获取当前用户信息 image.png

前面我们说过,新建的collection表是没有增删改查权限的,我们去改下,把增、改、查权限放开

image.png

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": true, // 允许查
    "create": true, // 允许增
    "update": true, // 允许改
    "delete": false
  },
  "properties": {
    "_id": {
      "description": "ID,系统自动生成"
    }
  }
}

如果都改为true, 查询还是提示未能获取当前用户信息,当前用户为匿名用户,看下schema.json里, 是不是有些字段也单独配置了permission, 那里面的权限没改,而我们又查询了这些字段

我这里再点击按钮查询一次,发现可以查到数据了,因为我这里没单独给字段加权限

image.png