commit
f9892636aa
4 changed files with 111 additions and 0 deletions
@ -0,0 +1,25 @@ |
|||||
|
from flask import Flask, jsonify, send_from_directory |
||||
|
|
||||
|
app = Flask(__name__, static_folder="public", static_url_path="") |
||||
|
|
||||
|
# 根路径返回 index.html |
||||
|
@app.route("/") |
||||
|
def serve_index(): |
||||
|
return send_from_directory(app.static_folder, "index.html") |
||||
|
|
||||
|
# API 子路径，提供每日菜谱数据 |
||||
|
@app.route("/api/menu") |
||||
|
def api_menu(): |
||||
|
# 模拟每日菜谱数据 |
||||
|
menu = { |
||||
|
"message": "Today's Menu", |
||||
|
"data": [ |
||||
|
{"name": "番茄炒蛋", "ingredients": ["番茄", "鸡蛋", "盐", "糖"]}, |
||||
|
{"name": "清炒时蔬", "ingredients": ["西兰花", "胡萝卜", "蒜末"]}, |
||||
|
{"name": "红烧肉", "ingredients": ["五花肉", "酱油", "糖", "料酒"]} |
||||
|
] |
||||
|
} |
||||
|
return jsonify(menu) |
||||
|
|
||||
|
if __name__ == "__main__": |
||||
|
app.run(debug=True, port=80) |
||||
@ -0,0 +1,16 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Daily Menu</title> |
||||
|
<link rel="stylesheet" href="styles.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1>Today's Menu</h1> |
||||
|
<div id="menu-container"></div> |
||||
|
</div> |
||||
|
<script src="script.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,29 @@ |
|||||
|
document.addEventListener("DOMContentLoaded", function () { |
||||
|
fetch("/api/menu") |
||||
|
.then(response => response.json()) |
||||
|
.then(data => { |
||||
|
const menuContainer = document.getElementById("menu-container"); |
||||
|
const menuItems = data.data; |
||||
|
|
||||
|
menuItems.forEach(item => { |
||||
|
const menuItem = document.createElement("div"); |
||||
|
menuItem.classList.add("menu-item"); |
||||
|
|
||||
|
const menuName = document.createElement("div"); |
||||
|
menuName.classList.add("menu-name"); |
||||
|
menuName.textContent = item.name; |
||||
|
|
||||
|
const menuIngredients = document.createElement("div"); |
||||
|
menuIngredients.classList.add("menu-ingredients"); |
||||
|
menuIngredients.textContent = `Ingredients: ${item.ingredients.join(", ")}`; |
||||
|
|
||||
|
menuItem.appendChild(menuName); |
||||
|
menuItem.appendChild(menuIngredients); |
||||
|
|
||||
|
menuContainer.appendChild(menuItem); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error("Error fetching menu data:", error); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,41 @@ |
|||||
|
body { |
||||
|
font-family: Arial, sans-serif; |
||||
|
background-color: #f4f4f9; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
max-width: 800px; |
||||
|
margin: 20px auto; |
||||
|
padding: 20px; |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.menu-item { |
||||
|
margin-bottom: 20px; |
||||
|
padding: 10px; |
||||
|
border-bottom: 1px solid #ddd; |
||||
|
} |
||||
|
|
||||
|
.menu-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.menu-name { |
||||
|
font-size: 1.2em; |
||||
|
font-weight: bold; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
.menu-ingredients { |
||||
|
font-size: 0.9em; |
||||
|
color: #666; |
||||
|
} |
||||
Loading…
Reference in new issue