【NodeJS】使用AWS Lambda＋APIGateway＋DynamoDB创建TODO应用程序

2 年 ago
韵, 科
2 minutes

首先

由于对无服务器技术产生了兴趣，我开始自己学习使用AWS Lambda、APIGateway和DynamoDB来创建一个TODO应用程序。
作为个人备忘录，我将把服务器端和客户端的处理过程总结成一篇文章（目前仍在创建中）。

简要介绍

我們使用Lambda時使用的語言是Node。
DynamoDB只有兩個項目，分別是id和todo。
表格名稱為「todoTable」。
這次我們只實現GET和POST兩種方法。

使用Lambda创建函数。

虽然本来想把它们合并为一个函数，但是我不知道如何在Lambda中传递GET方法，所以暂时将函数分开了。

首先，从GET方法开始。
简单地获取所有列。（虽然原则上不宜频繁使用scan操作）

const AWS = require('aws-sdk')
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) => {
    const httpMethod = event.httpMethod
    const params = {
        'TableName': 'todoTable'
    }
    dynamo.scan(params, function (err, data) {
        const response = {
            statusCode: 200,
            body: JSON.stringify(data.Items)
        }
        callback(null, response)
    })
};

我們將在客戶端從請求的body中提取todoList並顯示它。

接下来是POST方法。

const AWS = require('aws-sdk')
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) => {
    const params = {
        'TableName': 'todoTable',
        'Item': {
            'id': event.id,
            'todo': event.todo
        }
    }
    dynamo.put(params, function(err, data) {
        if (err) {
            console.log('error')
        } else {
            console.log('success')
            const response = {
                statusCode: 200,
                body: JSON.stringify(data)
            }
            context.done(null, response)
        }
    })
};

这次为了简化起见，我们采用了这样的实现方式（之后会全部改成try-catch）。
不知道为什么在这里使用callback会被指责。
希望了解原因的人能告诉我。

请将这些功能分配给每个方法，在API网关上进行部署。具体细节不再赘述。

客户端

这次我们将不使用jQuery，而是使用XMLHttpRequest来实现。

首先，在屏幕加载时，使用GET方法获取表格的项目并进行显示。

window.onload = () => {
    const request = new XMLHttpRequest()

    request.open('GET', 'https://ほにゃらら.amazonaws.com/dev', true)
    request.responseType = 'json'

    request.onload = event => {
        const data = this.response
        const todoList = JSON.parse(data.body)
        for (task of todoList) {
            const item = task.todo
            // HTMLのulにliを突っ込むだけのメソッド
            createTodoList(item)
        }
    }

    request.send()
}

没有特别困难的部分。

接下来，添加在添加TODO时触发的事件。

// addというinputタグにイベントを追加
const addTask = document.querySelector('.add')
addTask.addEventListener('submit', e => {
    e.preventDefault()

    const id = Math.random().toString(36).slice(-8);
    const task = addTask.add.value.trim()
    const item = {
        'id': id,
        'todo': task
    }

    const request = new XMLHttpRequest()
    request.open('POST', 'https://ほにゃらら.amazonaws.com/dev/insert', true)
    request.setRequestHeader('Content-Type', 'application/json' );

    request.send(JSON.stringify(item))

    if (task.length){
        createTodoList(task)
        addTask.reset()
    }
})

这就完成了。无服务器计算能够快速完成各种任务，非常有趣！

跌倒了

CORS问题

Access-Control-Allow-Origin

因为这个原因，我一直被责备着。
↓参考文章
【带解释】如何在chrome中使用XMLHttpRequest在本地文件中进行操作
AWS API Gateway 跨域通信

使用XMLHttpRequest传递参数的方法

眼前的程式碼

request.send(JSON.stringify(item))

過去的程式碼（發生錯誤）

request.send(item)

我没有将它转化为JSON格式，纠结了大约30分钟。。。

结束

我计划以后要实现UPDATE和DELETE功能，并将它们整合到一个函数中。
完成这个之后，也许我会尝试做一个应用程序。

bannerAds