wewe

Running

App Files Files Community

mistpe commited on 4 days ago

Commit

b2947f6

•

1 Parent(s): 2fd4cb4

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +311 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,311 @@

+<!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: 600px; 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>