在今天的快节奏生活中，外卖订餐系统已经成为了人们日常生活中不可或缺的一部分。这些系统通过在线点餐和配送服务，为用户提供了便捷的用餐体验。在本文中，我们将创建一个简单的外卖订餐系统，使用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>`;
});
});
});
在这个JavaScript文件中，我们使用了fetch来与后端API进行通信，并动态更新前端界面。
运行应用程序
现在，你可以在终端中运行你的应用程序：
python app.py
访问 http://localhost:5000 即可查看你的外卖订餐系统的界面。用户可以浏览菜单、下订单，订单将会显示在购物车中。
这只是一个简单的示例，你可以根据自己的需求扩展功能，例如用户登录、支付集成、订单管理等等。希望这个示例有助于你入门外卖订餐系统的开发。
