概要
AWSのDynamoDBにテーブルを作成し、そのテーブルにvue.js、TypeScriptで作成した画面から入力された値を登録する機能を実装した。
今回この機能を実装するにあたり、こちらのサイトを参考にした。
実装した機能
商品コード、個数、価格を入力することができる画面を作成し、その入力された値が事前にDynamoDBに作っておいたテーブル【PRODUCTS】にそれぞれの値が登録される機能。
AWSのコンソールからDynamoDBにテーブルとカラムを作成する
- DynamoDBを開き、「テーブル作成」からテーブル名とプライマリーキーを持つカラムを設定する
- 「テーブル設定」で作成したいテーブルに合わせた設定する
Vue.jsでテキストボックスを持つ画面を作成
add.vue
<template>
<v-layout justify-center>
<div>
<form class="add-item" @submit.prevent="addCode">
商品コード
<input type="text" ref="code" />
商品名
<input type="text" ref="name" />
単価
<input type="text" ref="price" />
<button>登録</button>
</form>
</div>
</v-layout>
</template>
テキストボックスを画面に表示させるだけのものなので、あまりデザインなどは今回気にしていません...
入力された値をTypeScriptでDynamoDBに登録する
add.vue
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
//プロダクトをインポートする
import { Product } from "@/product.ts";
// AWSを使用できるようにインポートする
import * as AWS from "aws-sdk";
// AWSのユーザー設定(※csvファイルを参照)
AWS.config.update({
region: "sample",
accessKeyId: "sample",
secretAccessKey: "sample"
});
@Component
export default class App extends Vue {
private addCode() {
//DynamoDBに商品情報を登録する
var docClient = new AWS.DynamoDB.DocumentClient();
let code = this.$refs.code as HTMLInputElement;
let name = this.$refs.name as HTMLInputElement;
let price = this.$refs.price as HTMLInputElement;
let params: any = {
TableName: "PRODUCT",
Item: {
CODE: code.value,
NAME: name.value,
PRICE: price.value
}
};
docClient.put(params, (err, data) => {
if (err) {
console.log(Unable to add item: ${JSON.stringify(err, undefined, 2)})
} else {
console.log(PutItem succeeded: ${JSON.stringify(data, undefined, 2)})
}
});
}
}
</script>
※あたり前のことだが、テーブルに設定している型と登録する値の型を合わせなければ登録できないため気を付ける。