阿里云七天云开发校园合伙人创造营 Day 5

使用 Midway Serverless OTS 数据库示例模板创建 ToDo List 应用

云开发7天训练营学习计划

完结撒花 🎉 ，点击上面的链接可以回顾这七天的内容哦~

Day 5: 使用 Midway Serverless OTS 数据库示例模板创建 Todo List 应用

关于 Midway Serverless

关于 Midway Serverless 的相关介绍，请参考 Day2 的文章

关于 OTS 数据库

表格存储（Tablestore）是阿里云自研的面向海量结构化数据存储的 Serverless NoSQL 多模型数据库。

每日任务

今日任务为使用 Midway Serverless OTS 数据库示例模板创建 ToDo List 应用，利用自建的 OTS 数据库，添加一条自己名字的 Todo

1. 准备开发环境

登入云开发平台，进入到应用列表，点击 创建新应用，新建一个 WEB 实验室解决方案的 Midway Serverless OTS数据库示例。

创建好后，进入 开发部署。

2. 开发调试

进入 IDE 后，先在终端执行：

1

npm i --registry=https://registry.npm.taobao.org

安装 npm 依赖，因为依赖包很多，这里用了淘宝的镜像源，安装会更快。

在终端执行 npm run dev 运行项目，点击生成的链接，可以访问这个页面。

默认为读取应用的环境变量，环境变量需要到 应用列表-应用配置 中修改。

2.1 使用 OTS 数据库创建数据表

本次任务涉及到 OTS 数据库的使用操作，需要先在 阿里云表格存储 页面开通，开通后在控制台创建实例。其中实例名称用于下面配置中的 MIDWAY_OTS_INSTANCE。

进入实例管理，在下方数据表列表中点击 创建数据表，数据表名称填写 list，表主键填写 id，完成建表。

2.2 实例公网访问地址

在实例管理中，可以获取 表格存储实例公网访问地址，如下图：

2.3 申请 AccessKey

AccessKey ID 与 Secret 的获取可参考下图，或 点击这里直达

AccessKey ID 和 AccessKey Secret 需要保管好，谨防泄露。

填好环境变量后，部署上线即可调用数据库进行 ToDo List 的增删改查。

1
2
3
4
5
6
7

// 接上 ...
exports.tbConfig = {
  accessKeyId: '你的 AccessKey ID',
  secretAccessKey: '你的 AccessKey Secret',
  endpoint: '表格存储实例公网访问地址',  // e.g. https://todo-test-list.cn-hangzhou.ots.aliyuncs.com
  instancename: '表格存储实例名称'      // e.g. todo-test-list
};

1
2
3
4
5
6

exports.tbConfig = {
  accessKeyId: process.env.MIDWAY_OTS_ACCESSKEY,
  secretAccessKey: process.env.MIDWAY_OTS_SECRET,
  endpoint: process.env.MIDWAY_OTS_ENDPOINT,      // e.g. https://todo-test-list.cn-hangzhou.ots.aliyuncs.com
  instancename: process.env.MIDWAY_OTS_INSTANCE   // e.g. todo-test-list
};

任务拓展

任务中使用的是阿里云 OTS 数据库，在云开发平台上也有 Midway Serverless MySQL数据库示例 的解决方案，内容同样是一个 ToDo List，只不过用的是阿里云关系型数据库 RDS MySQL 版，只需要在数据库中建一张这样的表：

1
2
3
4
5
6
7

CREATE TABLE `todo` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `todo` varchar(255) NOT NULL,
  `status` int(11) NOT NULL,
  `gmt_create` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

总结

本次示例项目也是一个 React 与 Midway Serverless 一体化应用，Midway 在 src/apis/index.ts 定义 ToDo List 的功能函数，包括增删改查，以及用于提供静态资源托管能力的已封装的 koa 中间件 StaticFile。在 src/apis/configuration.ts 中配置了与数据库的连接，而 src/apis/config/config.default.ts 定义了环境变量的配置。下面给出项目主要结构图以便理解：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.
├── f.yml                          # 函数定义文件
├── package.json                   # 项目依赖
├── tsconfig.json                  # tsc 配置文件
└── src
    ├── ...                        # React 等相关文件
   	└── apis
        ├── index.ts               # 函数文件
        ├── configuration.ts       # 装饰器、数据库等配置
        └── config
            └── config.default.ts  # 部署环境变量配置

注意，云开发平台暂时只支持连接阿里云的数据库。

对创造营后续内容感兴趣的朋友们记得 关注我 哦~