wewe

Running

File size: 13,543 Bytes

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影信息管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold mb-8 text-center text-blue-600">电影信息管理系统</h1>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 text-blue-500">评分最高的电影</h2>
                <div id="highest-rated-movie" class="text-gray-700"></div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 text-blue-500">票房最高的电影</h2>
                <div id="highest-grossing-movie" class="text-gray-700"></div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
                <h2 class="text-xl font-semibold mb-4 text-blue-500">电影年份分布</h2>
                <canvas id="movies-by-year-chart"></canvas>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 mb-8 hover:shadow-lg transition-shadow duration-300">
    <h2 class="text-2xl font-semibold mb-4 text-blue-500">电影数据分析</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="flex flex-col items-center">
            <h3 class="text-lg font-semibold mb-2 text-gray-700">类型分布</h3>
            <div style="width: 300px; height: 300px;">
                <canvas id="genre-distribution-chart"></canvas>
            </div>
        </div>
        <div class="flex flex-col items-center">
            <h3 class="text-lg font-semibold mb-2 text-gray-700">评分与票房关系</h3>
            <div style="width: 100%; height: 300px;">
                <canvas id="rating-boxoffice-chart"></canvas>
            </div>
        </div>
    </div>
</div>

        <div class="bg-white rounded-lg shadow-md p-6 mb-8 hover:shadow-lg transition-shadow duration-300">
            <h2 class="text-2xl font-semibold mb-4 text-blue-500">电影搜索和筛选</h2>
            <div class="flex flex-wrap gap-4 mb-4">
                <input id="search-input" type="text" placeholder="搜索电影..." class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                <select id="genre-filter" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="">所有类型</option>
                </select>
                <select id="year-filter" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="">所有年份</option>
                </select>
                <select id="language-filter" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="">所有语言</option>
                </select>
                <select id="sort-by" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="year">年份</option>
                    <option value="rating">评分</option>
                    <option value="box_office">票房</option>
                </select>
                <select id="sort-order" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>
                <button id="apply-filters" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition-colors duration-300">应用筛选</button>
            </div>
        </div>

        <div class="mt-8">
            <h2 class="text-2xl font-semibold mb-4 text-blue-500">电影列表</h2>
            <div id="movie-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
        </div>
    </div>

    <script>
        let allMovies = [];

        async function fetchData() {
            try {
                const [movies, highestRated, highestGrossing, genres, languages] = await Promise.all([
                    axios.get('/api/movies'),
                    axios.get('/api/highest-rated'),
                    axios.get('/api/highest-grossing'),
                    axios.get('/api/genres'),
                    axios.get('/api/languages')
                ]);

                allMovies = movies.data;
                displayHighestRated(highestRated.data);
                displayHighestGrossing(highestGrossing.data);
                displayMoviesByYearChart(allMovies);
                displayGenreDistributionChart(allMovies);
                displayRatingBoxOfficeChart(allMovies);
                populateFilters(genres.data, languages.data);
                displayAllMovies(allMovies);
            } catch (error) {
                console.error('Error fetching data:', error);
                alert('加载数据时出错，请刷新页面重试。');
            }
        }

        function displayHighestRated(movie) {
            document.getElementById('highest-rated-movie').innerHTML = `
                <p class="font-semibold">${movie.title} (${movie.year}年)</p>
                <p>评分: ${movie.rating}</p>
                <p>导演: ${movie.director}</p>
            `;
        }

        function displayHighestGrossing(movie) {
            document.getElementById('highest-grossing-movie').innerHTML = `
                <p class="font-semibold">${movie.title} (${movie.year}年)</p>
                <p>票房: ${movie.box_office}百万美元</p>
                <p>导演: ${movie.director}</p>
            `;
        }

        function displayMoviesByYearChart(movies) {
            const years = movies.map(movie => movie.year);
            const counts = {};
            years.forEach(year => counts[year] = (counts[year] || 0) + 1);

            const ctx = document.getElementById('movies-by-year-chart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(counts).sort(),
                    datasets: [{
                        label: '电影数量',
                        data: Object.keys(counts).sort().map(year => counts[year]),
                        backgroundColor: 'rgba(59, 130, 246, 0.6)'
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }

        function displayGenreDistributionChart(movies) {
            const genres = movies.map(movie => movie.genre);
            const counts = {};
            genres.forEach(genre => counts[genre] = (counts[genre] || 0) + 1);

            const ctx = document.getElementById('genre-distribution-chart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: Object.keys(counts),
                    datasets: [{
                        data: Object.values(counts),
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                            '#FF9F40', '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12
                            }
                        }
                    }
                }
            });
        }

        function displayRatingBoxOfficeChart(movies) {
    const ctx = document.getElementById('rating-boxoffice-chart').getContext('2d');
    new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: '评分 vs 票房',
                data: movies.map(movie => ({
                    x: movie.rating,
                    y: movie.box_office
                })),
                backgroundColor: 'rgba(59, 130, 246, 0.6)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: '评分'
                    },
                    min: 5,
                    max: 10
                },
                y: {
                    title: {
                        display: true,
                        text: '票房 (百万美元)'
                    },
                    min: 0
                }
            }
        }
    });
}

        function populateFilters(genres, languages) {
            const yearFilter = document.getElementById('year-filter');
            const genreFilter = document.getElementById('genre-filter');
            const languageFilter = document.getElementById('language-filter');

            const years = [...new Set(allMovies.map(movie => movie.year))].sort((a, b) => b - a);
            years.forEach(year => {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                yearFilter.appendChild(option);
            });
        genres.forEach(genre => {
                const option = document.createElement('option');
                option.value = genre;
                option.textContent = genre;
                genreFilter.appendChild(option);
            });

            languages.forEach(language => {
                const option = document.createElement('option');
                option.value = language;
                option.textContent = language;
                languageFilter.appendChild(option);
            });
        }

        function displayAllMovies(movies) {
            const movieList = document.getElementById('movie-list');
            movieList.innerHTML = movies.map(movie => `
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
                    <h3 class="text-lg font-semibold mb-2 text-blue-500">${movie.title} (${movie.year}年)</h3>
                    <p><span class="font-semibold">导演:</span> ${movie.director}</p>
                    <p><span class="font-semibold">类型:</span> ${movie.genre}</p>
                    <p><span class="font-semibold">评分:</span> ${movie.rating}</p>
                    <p><span class="font-semibold">时长:</span> ${movie.duration}分钟</p>
                    <p><span class="font-semibold">票房:</span> ${movie.box_office}百万美元</p>
                    <p><span class="font-semibold">语言:</span> ${movie.language}</p>
                </div>
            `).join('');
        }

        async function applyFilters() {
            const searchQuery = document.getElementById('search-input').value;
            const genre = document.getElementById('genre-filter').value;
            const year = document.getElementById('year-filter').value;
            const language = document.getElementById('language-filter').value;
            const sortBy = document.getElementById('sort-by').value;
            const sortOrder = document.getElementById('sort-order').value;

            try {
                const response = await axios.get('/api/movies/filter', {
                    params: { genre, year, language }
                });

                let filteredMovies = response.data;

                if (searchQuery) {
                    filteredMovies = filteredMovies.filter(movie =>
                        movie.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                        movie.director.toLowerCase().includes(searchQuery.toLowerCase())
                    );
                }

                filteredMovies.sort((a, b) => {
                    const valueA = a[sortBy];
                    const valueB = b[sortBy];
                    if (sortOrder === 'asc') {
                        return valueA > valueB ? 1 : -1;
                    } else {
                        return valueA < valueB ? 1 : -1;
                    }
                });

                displayAllMovies(filteredMovies);
            } catch (error) {
                console.error('Error applying filters:', error);
                alert('应用筛选时出错，请重试。');
            }
        }

        document.getElementById('apply-filters').addEventListener('click', applyFilters);

        fetchData();
    </script>
</body>
</html>