概览页完成

2025-05-06 18:29:26 +08:00 · 2024-04-09 14:20:26 +08:00 · 2024-04-09 14:20:26 +08:00 · 9b5e5707a3
commit 9b5e5707a3
parent 8d24548e7a
2 changed files with 105 additions and 2 deletions
--- a/main.py
+++ b/main.py
@ -37,7 +37,7 @@ def login():  # 登录页面
 def overview():  # 概览
    if request.cookies.get("islogin") is None:
        return redirect("/")
-    return config.get("server", "port")
+    return render_template("overview.html")


@app.route("/api/info")
@ -65,7 +65,6 @@ def img(bookid, index):  # 图片接口
    response = make_response(data) #读取文件
    response.headers.set('Content-Type', 'image/{}'.format(filename.split('.')[-1]))
    response.headers.set('Content-Disposition', 'inline', filename=filename)
-    
    return response


--- a/templates/overview.html
+++ b/templates/overview.html
@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>展示图片列表和封面</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+
+        #gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-gap: 20px;
+        }
+
+        .image {
+            max-width: 100%;
+            height: auto;
+            cursor: pointer;
+        }
+
+        .loading {
+            display: none;
+        }
+
+        #imageContainer {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 9999;
+            max-height: 90%;
+            max-width: 90%;
+        }
+
+        #imageContainer img {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="gallery"></div>
+    <div id="imageContainer"></div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          fetchImageList(); // 从API获取图片列表
+    
+          // 从API获取图片列表
+          function fetchImageList() {
+            fetch('/api/info?func=bookname&page=1')
+              .then(response => response.json())
+              .then(data => {
+                displayImages(data);
+              })
+              .catch(error => {
+                console.error('Error fetching image list:', error);
+              });
+          }
+    
+          // 显示图片列表
+          function displayImages(imageList) {
+            const gallery = document.getElementById('gallery');
+            gallery.innerHTML = '';
+    
+            imageList.forEach(image => {
+              const imgUrl = `/api/img/${image[1]}/1`; // 构建获取封面的API URL
+              const img = document.createElement('img');
+              const span = document.createElement('span');
+              span.textContent = image[2]; // 书名作为标题
+              img.src = imgUrl;
+              img.classList.add('image');
+              img.dataset.linkId = image[1]; // 存储链接ID以便点击事件处理
+    
+              // 添加点击事件处理程序
+              img.addEventListener('click', function () {
+                window.location.href = "/book/"+image[1];
+              });
+    
+              const container = document.createElement('div');
+              container.classList.add('image-container'); // 添加一个容器类
+              container.appendChild(img); // 将 img 元素添加到容器中
+              container.appendChild(span); // 将 span 元素添加到容器中
+    
+              gallery.appendChild(container); // 将容器添加到 gallery 中
+            });
+          }
+    
+        });
+      </script>
+</body>
+
+</html>