{"id":18248169,"url":"https://github.com/serverless-components/tencent-todo-app","last_synced_at":"2025-07-15T05:38:06.728Z","repository":{"id":97839451,"uuid":"454996136","full_name":"serverless-components/tencent-todo-app","owner":"serverless-components","description":"A todo app built on sereverless and Tencent Cloud","archived":false,"fork":false,"pushed_at":"2022-02-17T08:29:07.000Z","size":737,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T19:52:24.561Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serverless-components.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-03T01:41:52.000Z","updated_at":"2022-02-16T04:32:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ef915fc-1424-43e6-baa1-47d648f27514","html_url":"https://github.com/serverless-components/tencent-todo-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/serverless-components/tencent-todo-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-todo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-todo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-todo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-todo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serverless-components","download_url":"https://codeload.github.com/serverless-components/tencent-todo-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serverless-components%2Ftencent-todo-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265411263,"owners_count":23760585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T09:36:08.147Z","updated_at":"2025-07-15T05:38:06.660Z","avatar_url":"https://github.com/serverless-components.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 基于 Serverless CLI 和腾讯云的 Todo List 应用\n\n-   [x] **0 配置**: 可以直接使用默认配置完成整个项目的部署\n-   [x] **一键部署**: 只需要准备必要的前置条件，即可在根目录一条命令完成所有服务部署\n\n### 前置条件\n\n1. `Node.js` \u003e= 12\n2. [安装](https://cn.serverless.com/framework/docs-getting-started) `serverless` 命令行工具\n3. [注册](https://cloud.tencent.com/register)腾讯云账号并[开通](https://cloud.tencent.com/document/product/1154/43006)权限\n4. 开通[腾讯云 Redis 数据库](https://cloud.tencent.com/document/product/239/30821)\n\n### 项目架构\n\n此 **Todo List** 项目采取前后端分离的架构，前端提供页面 Ui 展示和功能操作， 后端提供 API 和数据库操作. 项目提供了:\n\n1. 新增 Todo\n2. 切换 Todo 状态\n3. 修改 Todo 信息\n4. 删除 Todo\n5. 为 Todo 添加截至日期\n\n根目录`serverless.yml`定义了`app, stage` 字段，因为需要确保模版下的组件使用相同的`app, stage` 字段，用户可自行修改需要的值\n\n#### VPC 配置结构\n\n`vpc` 目录下是帮助用户执行创建 **db** 和 **backend** 所需要的网络环境, 所创建的**vpcId**和**subnetId**提供给**db**和**backend**使用，用户可以自行修改，但是如果继续给**db, backend** 使用的话，**必须保证地域配置的正确性**, 比如**postgresql** 仅支持 `北京三区，广州二区，上海二区`, 那么`vpc/serverless.yml` 就必须选择这三个地域之一。\n\n#### 数据库结构\n\n*db*目录下是使用[tencent-postgresql](https://github.com/serverless-components/tencent-postgresql) 组件来执行对 postgresql 数据库的创建\n\n部署成功之后，可以在腾讯云云数据库中的*PostgreSQL* 中看到对应实例.\n\n**注意事项**:\n\n1. 当前 _PGSQL for Serverless_ 仅支持 `北京三区，广州二区，上海二区` 三个地域的创建和部署:\n    1. 在填写 `backend/serverless.yml` 中的地域可用区时需要注意填写为正确的地域\n    2. `backend/serverless.yml` 中我们所使用的`vpc`配置 是在*vpc*目录下生成的结果: `${output:${stage}:${app}:todos-vpc.vpcId}`，所以需要确保`vpc`目录实例下的地域选择为正确的地域\n2. ⚠️⚠️ PostgreSQL 组件当前暂不支持 CLI 扫描二维码登录，因此您需要配置[全局认证信息](https://cn.serverless.com/framework/docs-commands-credentials)或者在根目录`.env` 文件中填写信息来配置持久的环境变量/秘钥信息, [详情](https://github.com/serverless-components/tencent-postgresql#4-%E8%B4%A6%E5%8F%B7%E9%85%8D%E7%BD%AE)\n\n```bash\n# .env\nTENCENT_SECRET_ID=123\nTENCENT_SECRET_KEY=123\n```\n\n#### 后端结构\n\n`backend` 文件夹中即为后端项目目录:\n\n-   使用上面配置的的**db**实例的输出作为数据库的 url 来实现对应`todo` 数据存储\n-   使用[tencent-http](https://github.com/serverless-components/tencent-http) + [koajs](https://koajs.com/) 作为技术选型\n\n**注意事项**:\n\n1. `backend/serverless.yml`中使用了`db`项目提供的数据库链接: `${output:${stage}:${app}:todos-db.private.connectionString}`, 其中`todos-db`是数据库实例项目的名称，如果`db/serverless.yml` 中的*name* 被修改，请记得把这里的参数也相应修改。\n2. `backend/serverless.yml` 中我们所使用的`vpc`配置 是在*vpc*目录下生成的结果: `${output:${stage}:${app}:todos-vpc.vpcId}`，所以需要确保`vpc`目录实例下的地域选择为正确的地域\n\n后端项目成功部署后，会在腾讯云 scf 中自动部署一个名为`todos-backend`的项目，用户可在其中查看日志或者函数配置\n\n#### 前端结构\n\n`frontend` 文件夹中即为前端项目目录:\n\n-   使用[tencent-website](https://github.com/serverless-components/tencent-website) 作为项目框架\n-   使用 `React` + `Ant.design` + `ky` 作为技术选型\n\n`frontend/serverless.yml` 中使用了`backend` 项目提供的后端 ApiUrl`${output:${stage}:${app}:todos-backend.apigw.url}`, 其中`todos-backend` 是后端项目的名称，如果后端项目的名称被修改，前端`yml`中此处的值需要对应修改。 可以做到无缝部署，不需要分别部署.\n前端项目部署之后会将静态资源存在 COS 的`todos-frontend`bucket 中，可以自行在`serverless.yml`中修改\n\n#### 本地开发\n\n1. `sls deploy` 之后，会在用户的`todos-frontend` bucket 生成一个 `env.js` 文件，需要将其下载到`frontend/public` 文件夹中。 之所以在本地开发的时候需要这个文件是因为这个文件会把后端 API 的地址自动注入`window.env` 中，供前端 API 访问使用， 所以本地开发的时候需要手动下载。 线上项目会自动获取。\n2. 进入`frontend`文件夹下，执行`npm install` 安装依赖\n3. 执行 `npm start` 本地运行项目\n\n### 使用流程\n\n-   根目录执行 `sls deploy`, 命令行会自动分别部署`db, backend, frontend` 项目\n-   打开 `todos-frontend` 输出的 `website` 地址即可看到项目前端，进行操作\n\n### 效果截图\n\n-   项目命令行部署: ![](./assets/deployment.png)\n-   前端 Todo 展示全部数据: ![](./assets/todo-all.png)\n-   展示已完成数据: ![](./assets/todo-completed.png)\n-   展示未完成数据: ![](./assets/todo-incompleted.png)\n-   数据编辑: ![](./assets/todo-edit.png)\n-   **超过**截止日期还**未完成**的 Todo, 显示**红色提醒图标**: ![](./assets/dueDate.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserverless-components%2Ftencent-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserverless-components%2Ftencent-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserverless-components%2Ftencent-todo-app/lists"}