使用API Gateway将数据从DynamoDb表获取到HTML表

使用API Gateway将DynamoDB数据展示到HTML表格

基础概念

1. DynamoDB

Amazon DynamoDB是一个完全托管的NoSQL数据库服务，提供快速、可预测的性能和无缝扩展性。

2. API Gateway

API Gateway是一种完全托管的服务，可以轻松创建、发布、维护、监控和保护任何规模的API。

实现方案

架构流程

前端HTML页面发起请求
API Gateway接收请求
触发Lambda函数
Lambda查询DynamoDB
返回数据给API Gateway
API Gateway将数据返回给前端
前端JavaScript将数据渲染到HTML表格

详细实现步骤

1. 创建DynamoDB表

首先确保你有一个DynamoDB表，例如名为"Products"的表，包含id、name、price等字段。

2. 创建Lambda函数

创建一个Lambda函数来查询DynamoDB数据：

// Node.js Lambda函数代码
const AWS = require('aws-sdk');
const dynamoDb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
    const params = {
        TableName: 'Products',
        Limit: 100 // 限制返回记录数
    };
    
    try {
        const data = await dynamoDb.scan(params).promise();
        return {
            statusCode: 200,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': true,
            },
            body: JSON.stringify(data.Items),
        };
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify({ error: 'Could not fetch items' }),
        };
    }
};

3. 设置API Gateway

创建新的REST API
创建GET方法
将方法集成到上面创建的Lambda函数
部署API到某个阶段（如"prod"）
记下调用URL（如https://your-api-id.execute-api.region.amazonaws.com/prod）

4. 前端HTML代码

创建一个HTML页面来显示数据：

<!DOCTYPE html>
<html>
<head>
    <title>DynamoDB Data Table</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>Product Data from DynamoDB</h1>
    <table id="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- 数据将通过JavaScript动态填充 -->
        </tbody>
    </table>

    <script>
        // 替换为你的API Gateway端点
        const apiUrl = 'https://your-api-id.execute-api.region.amazonaws.com/prod';
        
        // 获取数据并填充表格
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('table-body');
                
                data.forEach(item => {
                    const row = document.createElement('tr');
                    
                    const idCell = document.createElement('td');
                    idCell.textContent = item.id || '';
                    row.appendChild(idCell);
                    
                    const nameCell = document.createElement('td');
                    nameCell.textContent = item.name || '';
                    row.appendChild(nameCell);
                    
                    const priceCell = document.createElement('td');
                    priceCell.textContent = item.price ? '$' + item.price : '';
                    row.appendChild(priceCell);
                    
                    const categoryCell = document.createElement('td');
                    categoryCell.textContent = item.category || '';
                    row.appendChild(categoryCell);
                    
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                document.getElementById('table-body').innerHTML = 
                    '<tr><td colspan="4">Error loading data. Please try again later.</td></tr>';
            });
    </script>
</body>
</html>