下载前端代码示例
在"官方解决方案"或"我的解决方案"页面中, 按如下方式下载代码示例
单击解决方案卡片底部工具栏中的代码图标按钮（</>）即可下载代码示例。
选择"区域", 点击确定后下载zip包
弹出下载模板api对接代码对话框，其中显示当前模板ID和模板名称。
zip文件解压后包含3个文件
App.js 页面示例代码
openapiv3.js 工具代码
README.md 包含建议的使用说明
启动示例
本示例以create-react-app为例, 安装方式可查看 https://create-react-app.dev/docs/getting-started/
安装后创建项目my-app
npx create-react-app my-app打开创建的项目文件夹, 安装如下两个依赖
cd my-app
npm install antd --save
npm install crypto-js --save复制App.js和openapiv3.js至生成项目的my-app目录下的src目录
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]# ls -a
.. App.css App.js App.test.js index.css index.js logo.svg openapiv3.js reportWebVitals.js setupTests.js
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#在my-app目录下 执行 npm start, 启动示例
npm start启动后可通过默认的3000端口访问
启动后页面显示 CADT 配置基础信息表单，依次填写 AccessKey ID、AccessKey Secret、模板 ID（例如 L8BB1L2IKEBD4IRT），在 区域 下拉框中选择目标区域（例如 北京），然后单击 下一步 进入后续的生成方案、资源校验、资源询价和资源部署步骤。
示例功能介绍
当前示例页面包含了 生成方案->资源校验->资源询价->资源部署->资源释放 流程
此代码示例仅为演示前端接入的基础流程, 并非提供的完整技术解决方案, 用户可根据下载的示例开发或参考, 请勿用于生产环境.
配置基础信息
填写ak,sk
模板id默认为下载示例的模板id, 也可在页面中对应位置复制
区域默认为下载示例时选中的区域, 如果切换请确保模板包含所选区域的配置
在云速搭 CADT控制台的我的解决方案页面，单击目标解决方案卡片工具栏中的剪贴板图标即可复制 TemplateId。
生成方案
填写方案名称和模板变量数据
例如，在方案名称中输入测试部署ecs，在模板变量区域将${instance_type}设置为ecs.c6.2xlarge，将${pay_type}设置为PostPaid，然后单击下一步。
资源校验
点击资源校验后, 方案处于校验成功状态, 可进行资源询价
资源校验结果表格显示：region、security_group、vswitch、vpc 均校验通过；ecs 资源备注提示 NotFound.Property: [key_pair_name] in Node [ecs]。
资源询价
点击资源询价按钮, 询价成功后可进入资源部署
询价完成后，方案状态显示为 Valuating_Success。资源列表中，vpc、vswitch、security_group 为免费资源（价格显示 -1），ECS 实例（规格 ecs.c6.2xlarge，付费类型 PayAsYouGo）价格为 2.144 元。确认后单击下一步进入资源部署。
资源部署
点击资源部署, 可查看部署状态
方案状态显示为Deploying，资源列表中vpc、vswitch、security_group三个资源的状态均为Running。
部署完成后, 资源创建成功
资源释放
通过释放方案, 释放已部署的资源. 或删除方案, 将方案隐藏, 注意, 删除方案并不会释放已部署的资源
单击释放方案后，方案状态显示为释放中...，等待资源释放完成。
释放完成后, 删除方案
删除方案后，方案状态显示为已删除，资源列表中所有关联资源（vpc、vswitch、ecs、security_group）的状态均变为Deleted。