From e01b0ecc39b4ea20db884717d429c8594ee96dc0 Mon Sep 17 00:00:00 2001 From: jc <419690370@qq.com> Date: Wed, 12 Mar 2025 22:12:48 +0800 Subject: [PATCH] first commit --- app.py | 36 +++++++++++++++++++++++++ public/index.html | 24 +++++++++++++++++ public/script.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++ public/styles.css | 41 ++++++++++++++++++++++++++++ 4 files changed, 170 insertions(+) create mode 100644 app.py create mode 100644 public/index.html create mode 100644 public/script.js create mode 100644 public/styles.css diff --git a/app.py b/app.py new file mode 100644 index 0000000..2fa4a40 --- /dev/null +++ b/app.py @@ -0,0 +1,36 @@ +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/travel-guide") +def api_travel_guide(): + # 模拟徐州游玩攻略数据 + travel_guide = { + "message": "徐州游玩攻略", + "data": { + "places": [ + {"name": "云龙湖", "description": "徐州的标志性景点，湖光山色，风景优美。"}, + {"name": "徐州博物馆", "description": "展示徐州的历史文化遗产，适合了解徐州的历史。"}, + {"name": "彭祖园", "description": "以彭祖文化为主题的公园，适合休闲散步。"} + ], + "food": [ + {"name": "徐州烙馍卷", "description": "徐州特色小吃，薄饼卷上各种馅料，非常美味。"}, + {"name": "地锅鸡", "description": "徐州传统美食，鸡肉鲜嫩，锅贴香脆。"}, + {"name": "糖醋黄河鲤鱼", "description": "徐州特色菜肴，鱼肉鲜嫩，酸甜适口。"} + ], + "itinerary": [ + {"day": "第一天", "activities": ["上午：游览云龙湖", "下午：参观徐州博物馆", "晚上：品尝徐州烙馍卷"]}, + {"day": "第二天", "activities": ["上午：彭祖园散步", "下午：自由活动", "晚上：品尝地锅鸡"]} + ] + } + } + return jsonify(travel_guide) + +if __name__ == "__main__": + app.run(debug=True, port=80) \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..a25f4ef --- /dev/null +++ b/public/index.html @@ -0,0 +1,24 @@ + + + + + + 徐州游玩攻略 + + + +
+

徐州游玩攻略

+
+

景点推荐

+
+
+

美食推荐

+
+
+

行程安排

+
+
+ + + \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..ae9e966 --- /dev/null +++ b/public/script.js @@ -0,0 +1,69 @@ +document.addEventListener("DOMContentLoaded", function () { + fetch("/api/travel-guide") + .then(response => response.json()) + .then(data => { + const placesContainer = document.getElementById("places-container"); + const foodContainer = document.getElementById("food-container"); + const itineraryContainer = document.getElementById("itinerary-container"); + + // 渲染景点推荐 + data.data.places.forEach(place => { + const placeItem = document.createElement("div"); + placeItem.classList.add("item"); + + const placeName = document.createElement("div"); + placeName.classList.add("item-name"); + placeName.textContent = place.name; + + const placeDescription = document.createElement("div"); + placeDescription.classList.add("item-description"); + placeDescription.textContent = place.description; + + placeItem.appendChild(placeName); + placeItem.appendChild(placeDescription); + + placesContainer.appendChild(placeItem); + }); + + // 渲染美食推荐 + data.data.food.forEach(food => { + const foodItem = document.createElement("div"); + foodItem.classList.add("item"); + + const foodName = document.createElement("div"); + foodName.classList.add("item-name"); + foodName.textContent = food.name; + + const foodDescription = document.createElement("div"); + foodDescription.classList.add("item-description"); + foodDescription.textContent = food.description; + + foodItem.appendChild(foodName); + foodItem.appendChild(foodDescription); + + foodContainer.appendChild(foodItem); + }); + + // 渲染行程安排 + data.data.itinerary.forEach(itinerary => { + const itineraryItem = document.createElement("div"); + itineraryItem.classList.add("item"); + + const day = document.createElement("div"); + day.classList.add("item-name"); + day.textContent = itinerary.day; + + const activities = document.createElement("div"); + activities.classList.add("item-description"); + activities.textContent = itinerary.activities.join(", "); + + itineraryItem.appendChild(day); + itineraryItem.appendChild(activities); + + itineraryContainer.appendChild(itineraryItem); + }); + }) + .catch(error => { + console.error("Error fetching travel guide data:", error); + }); +}); \ No newline at end of file diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..6bc9587 --- /dev/null +++ b/public/styles.css @@ -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, h2 { + text-align: center; + color: #333; +} + +.item { + margin-bottom: 20px; + padding: 10px; + border-bottom: 1px solid #ddd; +} + +.item:last-child { + border-bottom: none; +} + +.item-name { + font-size: 1.2em; + font-weight: bold; + color: #444; +} + +.item-description { + font-size: 0.9em; + color: #666; +} \ No newline at end of file