用户投稿线上点餐系统架构
功能说明
1.选择想吃的餐点按下 ”加入购物车”
2.购物车显示餐点和总金额
3.按下“清空购物车”则清空购物车所有餐点
4.按下“确认购买”将购买总金额和日期时间汇入资料库
5.确认有收到订单会显示”购买完成”
6.如果购物车没有餐点就按下“确认购买”，则会显示”请选择商品”
网页流程图
操作流程说明
点餐系统介面
点选"加入购物车"按钮
点选"确认购买"按钮
资料库储存资料
网页程式码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线上点餐系统</title> <style> body, html { height: 100%; margin: 0; } </style></head><body> <h1>点餐系统<br></br></h1> <h2>菜单</h2> <ul> <li>大麦克 -$80 <button onclick="addToCart('大麦克', 80)" >加入购物车</button></li> <li>鸡块 -$49 <button onclick="addToCart('鸡块', 69)" >加入购物车</button></li> <li>麦香鸡 -$49 <button onclick="addToCart('麦香鸡',49)" >加入购物车</button></li> <li>薯条 -$66 <button onclick="addToCart('薯条', 66)" >加入购物车</button></li> <li>可乐 -$38 <button onclick="addToCart('可乐', 38)" >加入购物车</button></li> </ul> <h2>购物车</h2> <ul id="cart"> <!-- 购物车内容将在此显示 --> </ul> <p id="total">购买总金额: $0</p> <button onclick="clearCart()">清空购物车</button> <button onclick="confirmPurchase()">确认购买</button> <script> var totalAmount = 0; var itemsInCart = []; //加入购物车 function addToCart(item, price) { var cart = document.getElementById("cart"); var li = document.createElement("li"); li.textContent = item + " - $" + price; cart.appendChild(li); totalAmount += price; itemsInCart.push({ item: item, price: price }); updateTotal(); } //清除购物车 function clearCart() { var cart = document.getElementById("cart"); cart.innerHTML = ""; totalAmount = 0; itemsInCart = []; updateTotal(); } //计算总金额 function updateTotal() { var totalElement = document.getElementById("total"); totalElement.textContent = "购买总金额: $" + totalAmount; } //确定购买 function confirmPurchase() { if (totalAmount == 0) { alert("请选择商品"); return; } // 获取时间 var currentTime = new Date(); // 时间转字串 var purchaseTime = currentTime.toLocaleString(); var myheaders = new Headers(); myheaders.append("Content-Type", "application/json"); // 构建要发送的资料 var data = { purchaseTime: purchaseTime, totalAmount: totalAmount }; // 发送POST请求至AWS API Gateway fetch('https://zxakw26evh.execute-api.us-east-1.amazonaws.com/aa/', { method: 'POST', body: JSON.stringify(data), headers: myheaders }) .then(response => { if (response.ok) { alert("购买完成"); clearCart(); } else { alert("发生错误"); } }) .catch(error => { console.error('Error:', error); alert("发生错误，请稍后再试"); }); } </script></body></html>后端python程式码
import jsonimport boto3def lambda_handler(event, context): # 解析来自API Gateway的购买资讯 #data = json.loads(event['body']) purchaseTime = event['purchaseTime'] total_amount = event['totalAmount'] #创建DynamoDB客户端 dynamodb = boto3.resource('dynamodb') #指定DynamoDB表名称 table_name = 'order' #获取DynamoDB表对象 table = dynamodb.Table(table_name) #将购买资讯写入DynamoDB response = table.put_item( Item={ 'date': purchaseTime, 'total': total_amount } ) #返回适当的回应 if response['ResponseMetadata']['HTTPStatusCode'] == 200: return { 'statusCode': 200, 'body': json.dumps('购买资讯已成功储存到DynamoDB') } else: return { 'statusCode': 500, 'body': json.dumps('储存购买资讯到DynamoDB时发生错误') }参考资料
https://docs.aws.amazon.com/zh_tw/apigateway/latest/developerguide/getting-started.html
微信扫一扫打赏
支付宝扫一扫打赏
