kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-05-07 02:39:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

概览页完成

Browse Source
This commit is contained in:
Kakune55 2024-04-09 14:20:26 +08:00
parent 8d24548e7a
commit 9b5e5707a3
2 changed files with 105 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
main.py
View File

@ -37,7 +37,7 @@ def login(): # 登录页面
def overview(): # 概览 def overview(): # 概览
if request.cookies.get("islogin") is None: if request.cookies.get("islogin") is None:
return redirect("/") return redirect("/")
return config.get("server", "port") return render_template("overview.html")
@app.route("/api/info") @app.route("/api/info")
@ -65,7 +65,6 @@ def img(bookid, index): # 图片接口
response = make_response(data) #读取文件 response = make_response(data) #读取文件
response.headers.set('Content-Type', 'image/{}'.format(filename.split('.')[-1])) response.headers.set('Content-Type', 'image/{}'.format(filename.split('.')[-1]))
response.headers.set('Content-Disposition', 'inline', filename=filename) response.headers.set('Content-Disposition', 'inline', filename=filename)
return response return response

104
templates/overview.html
View File

@ -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>