xuzhou_travel_guide/public/script.js

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);
        });
});