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

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

    技术栈

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

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

    后端

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

    pip install Flask

    • 1

    接下来，创建一个名为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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这个示例中，我们创建了一个简单的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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    外卖订餐系统

    接下来，创建一个名为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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    现在，创建一个名为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 += `
  • ${menuItem.name}: $${menuItem.price}
    • `    ;
                itemList.innerHTML += `">${menuItem.name}`;
            }
        });

    // 下订单
    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 += `
  • ${item.name}: $${item.price}
    • `    ;
            });
        });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    在这个JavaScript文件中，我们使用了fetch来与后端API进行通信，并动态更新前端界面。

    运行应用程序

    现在，你可以在终端中运行你的应用程序：

    python app.py

    • 1

    访问 http://localhost:5000 即可查看你的外卖订餐系统的界面。用户可以浏览菜单、下订单，订单将会显示在购物车中。

    这只是一个简单的示例，你可以根据自己的需求扩展功能，例如用户登录、支付集成、订单管理等等。希望这个示例有助于你入门外卖订餐系统的开发。

  • 相关阅读:
    WebVR — 网络虚拟现实
    计算机组成原理习题课第三章-4（唐朔飞）
    Limit分页遇到百万级数据该何去何从
    socket 踩坑日记
    一文搞懂如何求MOS管的等效阻抗
    CH34X-MPHSI高速Master扩展应用—SPI设备调试
    20221106日常记录-奇安信源代码扫描代码注入、海豚调度2.0.5-condition节点使用
    Android 12.0 进入recovery模式(等待用户选择recovery模式界面)进入自动恢复出厂设置模式
    Mysql:锁
    设计模式学习（十二）：享元模式
  • 原文地址：https://blog.csdn.net/wanyuekeji123/article/details/132900396