first commit

3 months ago · 6dd58ae5e3
4 changed files with 181 additions and 0 deletions
--- a/app.py
+++ 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/heze")
+def api_heze():
+    heze_data = {
+        "message": "欢迎来到山东菏泽",
+        "data": {
+            "about": "菏泽是中国牡丹之都，位于山东省西南部，以其丰富的历史文化和美丽的自然景观而闻名。",
+            "places": [
+                {"name": "曹州牡丹园", "description": "世界上最大的牡丹园，每年春季举办牡丹花会，吸引众多游客。"},
+                {"name": "孙膑旅游城", "description": "以古代军事家孙膑为主题的文化旅游区，展示了丰富的历史遗迹。"},
+                {"name": "水浒好汉城", "description": "以《水浒传》为背景的文化景区，重现了宋朝时期的建筑和民俗。"}
+            ],
+            "food": [
+                {"name": "菏泽酱菜", "description": "菏泽特色酱菜，口感爽脆，风味独特。"},
+                {"name": "曹州烧饼", "description": "菏泽传统小吃，外皮酥脆，内馅丰富。"},
+                {"name": "牡丹饼", "description": "以牡丹花瓣为原料制作的特色糕点，香气扑鼻。"}
+            ],
+            "culture": [
+                {"name": "菏泽戏曲", "description": "菏泽是山东梆子、大平调等多种戏曲的发源地，戏曲文化丰富多彩。"},
+                {"name": "菏泽剪纸", "description": "菏泽剪纸是中国非物质文化遗产之一，技艺精湛，图案精美。"}
+            ]
+        }
+    }
+    return jsonify(heze_data)
+
+if __name__ == "__main__":
+    app.run(debug=True, port=80)
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宣传我的家乡：山东菏泽</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>欢迎来到山东菏泽</h1>
+        <p id="about"></p>
+        <div class="section">
+            <h2>特色景点</h2>
+            <div id="places-container"></div>
+        </div>
+        <div class="section">
+            <h2>菏泽美食</h2>
+            <div id="food-container"></div>
+        </div>
+        <div class="section">
+            <h2>菏泽文化</h2>
+            <div id="culture-container"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/public/script.js
+++ b/public/script.js
@ -0,0 +1,72 @@
+document.addEventListener("DOMContentLoaded", function () {
+    fetch("/api/heze")
+        .then(response => response.json())
+        .then(data => {
+            const about = document.getElementById("about");
+            about.textContent = data.data.about;
+
+            const placesContainer = document.getElementById("places-container");
+            const foodContainer = document.getElementById("food-container");
+            const cultureContainer = document.getElementById("culture-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.culture.forEach(culture => {
+                const cultureItem = document.createElement("div");
+                cultureItem.classList.add("item");
+
+                const cultureName = document.createElement("div");
+                cultureName.classList.add("item-name");
+                cultureName.textContent = culture.name;
+
+                const cultureDescription = document.createElement("div");
+                cultureDescription.classList.add("item-description");
+                cultureDescription.textContent = culture.description;
+
+                cultureItem.appendChild(cultureName);
+                cultureItem.appendChild(cultureDescription);
+
+                cultureContainer.appendChild(cultureItem);
+            });
+        })
+        .catch(error => {
+            console.error("Error fetching data:", error);
+        });
+});
--- a/public/styles.css
+++ b/public/styles.css
@ -0,0 +1,45 @@
+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;
+}
+
+.section {
+    margin-top: 20px;
+}
+
+.item {
+    margin-bottom: 15px;
+    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;
+}