[Lambda]Vue.jsとLambdaを使ってWebアプリケーション作成

import json
import boto3

# boto3を使用してDynamoDBにアクセス
dynamodb = boto3.resource('dynamodb')

def lambda_handler(event, context):
    # テーブル名を指定し、テーブル操作オブジェクト取得
    goodsTable = dynamodb.Table('Goods')
    
    # テーブルの全情報を取得する
    response = goodsTable.scan()

    
    if response['ResponseMetadata']['HTTPStatusCode'] != 200:
        print(response)	# エラーレスポンスを表示
    else:
        print('Successed.')
    return response

import json
import boto3

# boto3を使用してDynamoDBにアクセス
dynamodb = boto3.resource('dynamodb')

def lambda_handler(event, context):
    
    # テーブル名を指定し、テーブル操作オブジェクト取得
    goodsTable = dynamodb.Table('Goods')

    # Lamba呼び出し元から渡されたIDを取得
    id = event['ID']

    # IDを指定して、データを取得
    response = goodsTable.get_item(
        Key={'ID': id }
    )
    
    if response['ResponseMetadata']['HTTPStatusCode'] != 200:
        print(response)	# エラーレスポンスを表示
    else:
        print('Successed.')
    return response

{
  "ID": 4
}

import json
import boto3
import decimal


# boto3を使用してDynamoDBにアクセス
dynamodb = boto3.resource('dynamodb')

# シーケンステーブルからIDを取得しカウントアップし更新
def get_next_seq(table, tablename):
    response = table.update_item(
        Key = {
            'TABLE_NAME' : tablename
        },
        UpdateExpression='set SEQ = SEQ + :val',
        ExpressionAttributeValues = {
            ':val' : 1
		},
		ReturnValues='UPDATED_NEW'
    )
    return response['Attributes']['SEQ']


def lambda_handler(event, context):
    # テーブル名を指定し、テーブル操作オブジェクト取得
    goodsTable = dynamodb.Table('Goods')

    # IDを取得する
    id = event['ID']
    
    # IDが0の場合は、IDをシーケンスから取得する
    if id == 0:
        seqtable = dynamodb.Table('Sequence')
        id = get_next_seq(seqtable, 'goods')

    # テーブル更新メソッドを呼ぶ。
    # keyで設定されている値がなかった場合は新規登録、存在する場合は更新になる
    response = goodsTable.update_item(
        # キー項目の値設定
        Key={
            'ID': id
        },
        
        # 更新式を記述、項目名は別名を使用する
        UpdateExpression='SET #CODE = :code, #NAME = :name, #CATEGORY = :category, #PRICE = :price',
        
        # ここで項目の別名を指定しないとエラーになる
        ExpressionAttributeNames={
            "#CODE": "CODE",
            "#NAME": "NAME",
            '#CATEGORY': 'CATEGORY',
            '#PRICE': 'PRICE',
        },

        # 更新式で指定した変数の値を設定
        ExpressionAttributeValues={
            ':code': event['CODE'],
            ':name': event['NAME'],
            ':category': event['CATEGORY'],
            ':price': event['PRICE']
        }
    )
    
    if response['ResponseMetadata']['HTTPStatusCode'] != 200:
        print(response)	//エラーレスポンスを表示
    else:
        print('Successed.')
    return response

{
  "ID": 0,
  "CODE": "GC9989",
  "NAME": "商品G",
  "CATEGORY": "002",
  "PRICE": 1000
}

{
  "ID": 5,
  "CODE": "GC9989",
  "NAME": "商品G",
  "CATEGORY": "002",
  "PRICE": 1000
}

<template>
  <div style="text-align:left;">
		<div class="table" style="width:600px;">
			<table>
				<thead>
					<tr>
						<th>コード</th>
						<th>名前</th>
						<th>カテゴリ</th>
						<th>価格</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr  v-for="(data) in goodsList" :key="data.ID">
						<td>{{ data.CODE }}</td>
						<td class="tdname">{{ data.NAME }}</td>
						<td>{{ categoryDatas.find( c => c.id === data.CATEGORY ).name }} </td>
						<td>{{ data.PRICE }}</td>
						<td><router-link :to="{ name: 'editGoods', params:{id:data.ID}}">編集</router-link></td>
					</tr>
				</tbody>
			</table>
		</div>
		<input type="button" @click="addGoods" value="新規登録">
  </div>
</template>

<script>
import goodsRepository from '../composables/GoodsRepository'
import { useRouter  } from 'vue-router'
import { ref } from 'vue'

export default ({
  name: 'GoodsList',
  setup(){
    //GoodsRepositoryモジュールからの変数、メソッドを宣言
    //カテゴリ用データ、商品リスト、商品取得メソッド
    const { categoryDatas, getGoods } = goodsRepository()

    const goodsList = ref([])
    
    //ルータ使用変数宣言
    const router = useRouter()

    //新規作成ボタン押下時の処理
    const addGoods = () => {
      router.push("/registGoods")
    }

    //データ取得時のコールバック( GoodsRepositoryのgetCodesメソッドに渡す)
    const callback = ( result, data )=>{
      if( result != "success"){
        alert( result );
      }else{
        goodsList.value = data
      }
    }

    //商品情報取得
    getGoods( callback )
    
    //template上で使用する変数を宣言
    return{
      goodsList,
      addGoods,
      getGoods,
      categoryDatas
    }
  }
})

</script>


<style>
	.table{
		height: 380px;
		width:580px;
		overflow: auto; 
		border:solid 1px;
	}

	table thead th {
		border: 1px solid #CCC;
		text-align: center;
		background-color: #EFEFEF;
		border-top : 1px solid #CCC;
		border-left : 1px solid #CCC;
		border-right : 1px solid #CCC;
		border-bottom : 0px solid #CCC;
		cursor:pointer;
	}

	table tbody td{
		min-width:100px;
		max-width:auto;
		height:25px;
	}

	
	.tdname{
		min-width:200px;
	}

</style>

<template>
	<div>
		<div class="inputItemDiv"><div class="inputTitleDiv">コード</div><input class="input" type="text" v-model="goods.CODE"></div>

		<div class="inputItemDiv"><div class="inputTitleDiv">商品名</div><input class="input" type="text" v-model="goods.NAME"></div>
		
		<div class="inputItemDiv"><div class="inputTitleDiv">カテゴリ</div>
			<select class="select" name="category" v-model="goods.CATEGORY">
				<option v-for="categoryData in categoryDatas" :value="categoryData.id" :key="categoryData.id">
					{{ categoryData.name }}
				</option>
			</select>
		</div>
		<div class="inputItemDiv"><div class="inputTitleDiv">価格</div><input class="input" type="text" v-model="goods.PRICE"></div>		
		
		<div class="inputItemDiv" style="text-align:right">
			<button  type="button" class="button" @click='cancel'>ｷｬﾝｾﾙ</button>
			<button :disabled="resAllVal"  type="button" class="button" @click='regist'>登録</button>
		</div>
		

	</div>

</template>

<script>
import goodsRepository from '../composables/GoodsRepository'
import { useRoute, useRouter  } from 'vue-router'
import { ref } from 'vue'

export default ({
  name: 'EditGoods',
  setup(  ){
    
    const goods = ref({ID:0, CODE:'',NAME:'',CATEGORY:'001',PRICE:0})
    
    //GoodsRepositoryモジュールからの変数、メソッドを宣言
    const { categoryDatas, getGoodsById, registGoods } = goodsRepository()

    //ルータ使用変数宣言
    const route = useRoute()
    const router = useRouter()
    
    //データ取得時のコールバック( GoodsRepositoryのgetGoodsByIdメソッドに渡す)
    const getCallback = ( result, data ) =>{
      if( result != "success"){
        alert( result )
      }else{
        goods.value = data
      }
    }
    
    //パラメータでIDが渡された際は、商品情報を取得する
    console.log(route.params.id)
    if( route.params.id != null ){
      console.log("getGoodsById")
      getGoodsById( route.params.id, getCallback  )
    }
    
    //登録ボタン押下時の処理
    const regist = () => {
      registGoods( goods.value, regCallback )
    }
    
    //登録ボタン押下時のコールバック( GoodsRepositoryのregistGoodsメソッドに渡す)
    const regCallback = ( result ) =>{
      if( result == "success"){
        alert("登録完了");
        router.push("/")
      }else{
        alert( result );
      }
    }
    
    //ｷｬﾝｾﾙ処理 商品一覧画面へ戻る
    const cancel = () => {
      router.push("/")
    }
    
    //template上で使用する変数を宣言
    return{
      categoryDatas,
      goods,
      regist,
      cancel   
    }
  }
})

</script>

<style>
	
	.inputItemDiv{
		width:360px;
		overflow: hidden;
		margin:2px;
	}
	
	.inputTitleDiv{
		float: left;
		width:100px;
		height:25px;

	}

	.inputDiv{
		float: left;
		width:250px;
		height:25px;
	}
	
	.input{
		width:250px;
		height:20px;
	}
	
	.inputread{
		width:250px;
		height:20px;
		background-color: #ccc;
	}
	
	.select{
		width:257px;
		height:25px;
	}
	
	.button{
		width:100px;
	}
	
	.validateError{
		color:red;
		width:250px;
		font-size:12px;
	}

</style>

import { ref } from 'vue'
import  axios from 'axios'

//商品情報の取得、登録、編集などの機能を提供する
export default function (){

  const apiGatewayUrl = 'https://kgxc1b2bea.execute-api.ap-northeast-1.amazonaws.com/prod'

  //カテゴリのマスタを宣言、refとして宣言
  const categoryDatas = ref([])
  categoryDatas.value.push({id:'001', name:'本'})
  categoryDatas.value.push({id:'002', name:'ゲーム'})


  //商品をIDで指定して取得するメソッド
  const getGoodsById = async( id, callback ) =>{

    try{
      var formData = {"ID": Number( id ) }
      //formData.append("ID", Number( id ) )
      var response = await requestServerPost( "/goodsbyid", formData )
      console.log(response.Item)
      callback("success", response.Item)
    }catch(e){
      callback(e)
    }
  }

  //商品登録、更新メソッド
  //sereraccess.jsのメソッドをコール
  const registGoods = async( regGoods, callback  ) => {
    
    try{
      var response = await requestServerPost( "/registgoods", regGoods )
      console.log( response )
      callback("success")
    }catch(e){
      callback(e)
    }
  }
  
  //商品情報取得
  const getGoods = async( callback ) => {
    try{
      //Spring Bootにaxiosで商品取得依頼
      var response = await requestServerGet( "/goodslist" )
      console.log( response.Items )
      //コールバックに結果を返す
      callback( "success", response.Items )
    }catch(e){
      console.log(e)
      callback(e)
    }
  }

  //axiosのGetメソッドでApiGatewayにアクセス
  const requestServerGet = ( url ) =>{
    return new Promise((resolve, reject) => {
      axios
        .get( apiGatewayUrl + url)
        .then(response => {
           resolve(response.data)
         }).catch(error => {
            reject(error)
         })
    }).catch((e) => {
      throw e
    })
  }
  
  //axiosのGetメソッドでApiGatewayにアクセス
  const requestServerPost = ( url, formDate ) =>{
    return new Promise((resolve, reject) => {
      axios
        .post( apiGatewayUrl + url, formDate)
        .then(response => {
           resolve(response.data)
         }).catch(error => {
            reject(error)
         })
    }).catch((e) => {
      throw e
    })
  }  
  
  //当該ライブラリが提供する変数、メソッドを宣言
  return{
    getGoods,
    getGoodsById,
    registGoods,
    categoryDatas
  }
}

import { createRouter, createWebHistory } from 'vue-router'
import GoodsList from '../views/GoodsList.vue'
import EditGoods from '../views/EditGoods.vue'

const routes = [
  {
    path: '/',
    name: 'goodsList',
    component: GoodsList
  },
  {
    path: '/editGoods/:id',
    name: 'editGoods',
    component: EditGoods,
    props: true
  },
  {
    path: '/registGoods',
    name: 'registGoods',
    component: EditGoods,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

npm run build