创建一个简单的外卖订餐系统

news2024/11/16 13:40:34

在今天的快节奏生活中，外卖订餐系统已经成为了人们日常生活中不可或缺的一部分。这些系统通过在线点餐和配送服务，为用户提供了便捷的用餐体验。在本文中，我们将创建一个简单的外卖订餐系统，使用Python和Flask框架构建后端，以及HTML、CSS和JavaScript构建前端。

技术栈

我们将使用以下技术栈来构建这个外卖订餐系统：

后端：Python和Flask框架
前端：HTML、CSS和JavaScript
数据库：SQLite（轻量级数据库）

后端

首先，我们将创建后端部分，负责处理用户的订单和餐厅的菜单。我们将使用Flask框架来构建后端API。确保你已经安装了Python和Flask：

pip install Flask

接下来，创建一个名为app.py的Python文件，这将是我们的Flask应用程序的入口点：

from flask import Flask, request, jsonify

app = Flask(__name__)

# 用于存储菜单数据的示例字典
menu = {
    1: {"name": "汉堡", "price": 5.99},
    2: {"name": "披萨", "price": 7.99},
    3: {"name": "三明治", "price": 4.99},
}

# 用于存储用户订单的示例列表
orders = []

# 获取菜单
@app.route("/menu", methods=["GET"])
def get_menu():
    return jsonify(menu)

# 下订单
@app.route("/order", methods=["POST"])
def place_order():
    data = request.get_json()
    item_id = data.get("item_id")
    if item_id in menu:
        orders.append(menu[item_id])
        return jsonify({"message": "订单已成功添加到购物车"})
    else:
        return jsonify({"message": "无效的菜单项"})

# 查看购物车
@app.route("/cart", methods=["GET"])
def view_cart():
    return jsonify({"cart": orders})

if __name__ == "__main__":
    app.run(debug=True)

在这个示例中，我们创建了一个简单的Flask应用程序，有一个用于获取菜单的路由/menu，一个用于下订单的路由/order，以及一个用于查看购物车的路由/cart。

前端

现在，让我们创建一个简单的前端界面，以便用户可以浏览菜单、下订单和查看购物车。我们将使用HTML、CSS和JavaScript来构建前端。

首先，创建一个名为index.html的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外卖订餐系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>外卖订餐系统</h1>

    <div id="menu">
        <h2>菜单</h2>
        <ul id="menu-list"></ul>
    </div>

    <div id="order">
        <h2>下订单</h2>
        <select id="item-list"></select>
        <button id="order-button">下订单</button>
    </div>

    <div id="cart">
        <h2>购物车</h2>
        <ul id="cart-list"></ul>
    </div>

    <script src="app.js"></script>
</body>
</html>

外卖订餐系统

接下来，创建一个名为styles.css的CSS文件，来美化我们的界面：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #333;
}

div {
    border: 1px solid #333;
    padding: 10px;
    margin: 10px;
}

select, button {
    margin: 5px;
}

现在，创建一个名为app.js的JavaScript文件，来处理前端逻辑：

document.addEventListener("DOMContentLoaded", () => {
    const menuList = document.getElementById("menu-list");
    const itemList = document.getElementById("item-list");
    const cartList = document.getElementById("cart-list");
    const orderButton = document.getElementById("order-button");

    // 获取菜单
    fetch("/menu")
        .then(response => response.json())
        .then(data => {
            for (const id in data) {
                const menuItem = data[id];
                menuList.innerHTML += `<li>${menuItem.name}: $${menuItem.price}</li>`;
                itemList.innerHTML += `<option value="${id}">${menuItem.name}</option>`;
            }
        });

    // 下订单
    orderButton.addEventListener("click", () => {
        const itemId = itemList.value;
        fetch("/order", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ item_id: parseInt(itemId) })
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
        });
    });

    // 查看购物车
    fetch("/cart")
        .then(response => response.json())
        .then(data => {
            data.cart.forEach(item => {
                cartList.innerHTML += `<li>${item.name}: $${item.price}</li>`;
            });
        });
});