1
0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-01 22:53:29 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

书籍页添加下载部分;获取URL参数考虑带#锚点情况;解决页面重复获取压缩字体问题

This commit is contained in:
2022-04-16 20:34:25 +08:00
parent af5e0a50d7
commit 30c557d046
10 changed files with 317 additions and 14 deletions

View File

@@ -1,6 +1,6 @@
function getParams() {
var params = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
var parts = window.location.href.split('#')[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
params[key] = decodeURIComponent(value);
});
return params;

View File

@@ -8,14 +8,15 @@ function getPageTitle(title) {
router.get('/', function (req, res) {
res.render('index', {
title: site.title,
headText: "书栖网"
headText: "书栖网",
});
});
router.get('/search', function (req, res) {
res.render('search', {
title: getPageTitle("搜一下"),
headText: "搜一下"
headText: "搜一下",
minfontOnLoad: false,
});
});
@@ -24,13 +25,15 @@ router.get('/category', function (req, res) {
// 分类详情页
res.render('category-details', {
title: getPageTitle("书籍分类"),
headText: "书籍分类"
headText: "书籍分类",
minfontOnLoad: false,
});
} else {
// 分类首页
res.render('category', {
title: getPageTitle("书籍分类"),
headText: "书籍分类"
headText: "书籍分类",
minfontOnLoad: false,
});
}
});
@@ -38,7 +41,15 @@ router.get('/category', function (req, res) {
router.get('/book', function (req, res) {
res.render('book', {
title: getPageTitle("书籍详情"),
headText: "书籍详情"
headText: "书籍详情",
minfontOnLoad: false,
});
});
router.get('/download', function (req, res) {
res.render('download', {
title: getPageTitle("下载书籍"),
headText: "下载书籍"
});
});

View File

@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%- include("./component/header.html"); %>
<!-- 书籍信息部分 -->
<style>
.main {
width: 80vw !important;
@@ -57,6 +58,88 @@
margin: 0;
}
</style>
<!-- 文件下载部分 -->
<style>
.download-container {
padding-top: 5px;
padding-bottom: 5px;
}
#file-container {
width: min(80vw, 650px);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
padding: 10px;
}
.file-item {
text-align: left;
background-color: #e6e6e6;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.3s;
}
.file-item:hover {
text-align: left;
background-color: #dfdfdf;
border-radius: 12px;
}
.file-detail {
margin-top: 10px;
margin-bottom: 10px;
}
.file-object {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
place-items: center;
gap: 10px;
}
.file-object>.file-object-item {
font-size: 14px;
display: inline-block;
transition: all 0.2s;
}
.file-object>.file-object-item:hover {
transform: scale(1.03);
font-weight: bold;
}
/* 统一 */
.bold {
font-weight: bold;
}
.size12 {
font-size: 12px;
}
.size14 {
font-size: 14px;
}
.size16 {
font-size: 16px;
}
.size20 {
font-size: 20px;
}
.overflow-hide {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
</style>
</head>
<body>
<%- include("./component/navbar.html"); %>
@@ -65,6 +148,37 @@
<div id="container">
</div>
<hr>
<div class="download-container">
<h3 id="scrollTarget">下载这本书</h3>
<div id="file-container">
<!-- <div class="file-item">
<div class="file-title">
<span class="file-name size20">bookshelf</span><span class="file-ext size16">.json</span>
<span class="file-size size14" style="padding-left: 30px;">10.02MB</span>
</div>
<div class="file-detail">
<span class="size14 overflow-hide">SHA1<span class="file-sha1 size12">07b12eb2a5915282bf086a7913b0fd9720fc012c</span></span>
<span class="file-copyright size14 overflow-hide">来源信息:中国地质大学(武汉)</span>
<span class="file-copyright size14" style="margin-top: 12px; display: block;">下载地址:</span>
</div>
<div class="file-object">
<div class="file-object-item">
<a href="" target="_blank">百度网盘</a>
</div>
<div class="file-object-item">
<a href="" target="_blank">阿里云盘</a>
</div>
<div class="file-object-item">
<a href="" download="文件名.pdf">直链下载</a>
</div>
</div>
</div> -->
</div>
</div>
<p style="font-size: 12px;">
* 由于直链下载成本很高,为降低运营成本,目前仅提供给登录用户使用。
</p>
</main>
<%- include("./component/footer.html"); %>
@@ -78,6 +192,16 @@
location.href = "/search";
}
</script>
<script>
// 由于多个请求之后都需要调用该方法,为避免多次压缩,使用计数器,等最后一个请求完成后执行一次
var requestCount = 2;
function doFontmin() {
console.log("所有请求完毕,开始获取字体");
if (--requestCount == 0) {
fontmin(getPageText());
}
}
</script>
<script>
// 获取书籍信息
getRequest("/book/get", { id: bookId })
@@ -87,7 +211,6 @@
var data = axiosData.data;
if (status === "success") {
console.log(data)
data.thumbnail = "https://img14.360buyimg.com/pop/jfs/t1/141705/31/25225/853702/61a85f89Ef68c838b/929ded96a4a7579e.png";
if (data.description == "") {
data.description = "暂无描述";
}
@@ -104,12 +227,12 @@
<!-- 预加载图片 --><img src="/assets/image/svg/favorites_fill.svg" style="display: none;" />
</div>
<div class="grid-item">
<a class="download-link" href="/download/?bookId=${data.id}"><img id="download-icon" src="/assets/image/svg/download.svg" /><span>下载这本书</span></a>
<a class="download-link" href="javaScript:scrollToTarget()"><img id="download-icon" src="/assets/image/svg/download.svg" /><span>下载这本书</span></a>
<!--<a class="download-link" href="/download/?bookId=${data.id}"><img id="download-icon" src="/assets/image/svg/download.svg" /><span>下载这本书</span></a>-->
</div>
</div>
<hr style="opacity: 0.3; margin-top: 30px; margin-bottom: 25px;">
<div>
<h2>基本信息</h2>
<div class="grid-item" id="book-details">
<p>作者:${data.author}</p>
<p>所属分类:<a href="/category?id=${data.category.id}">${data.category.name}</a></p>
@@ -125,15 +248,14 @@
// 获取用户收藏信息
getUserFavouritesStatus();
// 渲染后重新获取一次字体
fontmin(getPageText());
} else {
alert(`出错啦!${data.errMsg} (错误码: ${data.errCode}) `);
}
}).catch(function (error) {
console.log(error);
alert("无法连接到服务器,请检查网络连接!");
}).finally(function () {
doFontmin();
});
</script>
<script>
@@ -231,5 +353,94 @@
}
}
</script>
<!-- 页面滚动 -->
<script>
$(".download-container").css("transition", "0.5s");
$(".download-container").css("border-radius", "20px");
function scrollToTarget() {
$('html, body').animate({
scrollTop: $("#scrollTarget").offset().top
}, 600);
setTimeout(function () {
$(".download-container").css("background-color", "#6DA122");
$(".download-container").css("transform", "scale(1.05)");
setTimeout(function () {
$(".download-container").css("background-color", "");
$(".download-container").css("transform", "");
}, 500);
}, 500);
}
</script>
<!-- 获取文件下载链接信息 -->
<script>
// 获取文件信息
function getFileInfo() {
function stringifyFileSize(nBytes = 0) {
// 美化输出文件大小
let sOutput = nBytes + " bytes";
const aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(2) + " " + aMultiples[nMultiple];
}
return sOutput;
}
getRequest("/file/getFile", { bookId: bookId })
.then(function (response) {
var axiosData = response.data;
var status = axiosData.status;
var data = axiosData.data;
if (status === "success") {
console.log(data);
var fileContainer = document.getElementById("file-container");
var innerHTML = [];
for (let i = 0; i < data.length; i++) {
const fileInfo = data[i];
innerHTML.push(`
<div class="file-item">
<div class="file-title">
<span class="file-name size20">${fileInfo.fileName}</span><span class="file-ext size16">${fileInfo.fileFormat == "" ? "" : ("." + fileInfo.fileFormat)}</span>
<span class="file-size size14" style="padding-left: 30px;">${stringifyFileSize(fileInfo.fileSize)}</span>
</div>
<div class="file-detail">
<span class="overflow-hide file-sha1 size12">SHA1<span class="">${fileInfo.fileSha1}</span></span>
<span class="file-copyright size14 overflow-hide">${fileInfo.bookOrigin == "" ? "" : ("来源信息:" + fileInfo.bookOrigin) }</span>
<span class="file-copyright size14" style="margin-top: 12px; display: block;">下载地址:</span>
</div>
<div class="file-object">
<div class="file-object-item">
<a href="" target="_blank">百度网盘</a>
</div>
<div class="file-object-item">
<a href="" target="_blank">阿里云盘</a>
</div>
<div class="file-object-item">
<a href="" download="文件名.pdf">直链下载</a>
</div>
</div>
</div>`
);
}
fileContainer.innerHTML = innerHTML.join("");
if (data.length == 0) {
var fileItem = document.createElement("div");
fileItem.className = "file-item";
fileItem.style.textAlign = "center";
fileItem.innerHTML = "暂无可用文件源";
fileContainer.appendChild(fileItem);
}
} else {
alert(`出错啦!${data.errMsg} (错误码: ${data.errCode}) `);
}
}).catch(function (error) {
console.log(error);
alert("无法连接到服务器,请检查网络连接!");
}).finally(function () {
doFontmin();
});
}
getFileInfo();
</script>
</body>
</html>

View File

@@ -65,6 +65,10 @@
$(document).ready(function () {
var allText = getPageText();
// console.log(allText);
fontmin(allText);
if ('<%= typeof(minfontOnLoad) === "undefined" ? "true" : minfontOnLoad %>' != "false") {
fontmin(allText);
} else {
// $("html,body").css("opacity", "1");
}
});
</script>

View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%- include("./component/header.html"); %>
</head>
<body>
<%- include("./component/navbar.html"); %>
<div class="main">
<h1><%= headText %></h1>
<div id="container">
</div>
</div>
<%- include("./component/footer.html"); %>
</body>
</html>

View File

@@ -50,6 +50,20 @@ public class FileController extends BaseController {
@Autowired
FileObjectServiceImpl fileObjectService;
@ApiOperation(value = "书籍下载页面获取文件提供的下载方式", notes = "")
@RequestMapping(value = "getFile", method = {RequestMethod.GET})
@ResponseBody
public CommonReturnType getFile(@RequestParam(value = "bookId", required = false) Integer bookId) throws BusinessException {
List<FileModel> fileModels = fileService.getFile(bookId);
List<FileVO> fileVOS = new ArrayList<>();
for (FileModel fileModel : fileModels) {
FileVO fileVO = convertFileVOFromModel(fileModel);
fileVOS.add(fileVO);
}
return CommonReturnType.create(fileVOS);
}
@ApiOperation(value = "【管理员】查询文件列表", notes = "查询文件列表")
@RequestMapping(value = "list", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})
@ResponseBody

View File

@@ -60,6 +60,13 @@ public interface FileDOMapper {
*/
FileDO[] selectAll();
/**
* 列出文件支持的下载方式
*
* @return
*/
FileDO[] selectAvailableByBookId(Integer bookId);
/**
* 获取上一次插入的主键Id
*

View File

@@ -4,6 +4,7 @@ import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;
import plus.bookshelf.Common.Error.BusinessErrorCode;
import plus.bookshelf.Common.Error.BusinessException;
import plus.bookshelf.Config.QCloudCosConfig;
import plus.bookshelf.Dao.DO.FileDO;
@@ -39,6 +40,29 @@ public class FileServiceImpl implements FileService {
@Autowired
CosPresignedUrlGenerateLogService cosPresignedUrlGenerateLogService;
/**
* 列出文件支持的下载方式
*
* @return
*/
@Override
public List<FileModel> getFile(Integer bookId) throws BusinessException {
if (bookId == 0 || bookId == null) {
throw new BusinessException(BusinessErrorCode.PARAMETER_VALIDATION_ERROR, "bookId不能为空");
}
FileDO[] fileDOS = fileDOMapper.selectAvailableByBookId(bookId);
List<FileModel> fileModels = new ArrayList<>();
for (FileDO fileDO : fileDOS) {
FileModel fileModel = convertFromDataObject(fileDO);
fileModels.add(fileModel);
}
return fileModels;
}
/**
* 列出所有文件
*
@@ -62,7 +86,7 @@ public class FileServiceImpl implements FileService {
}
private FileModel convertFromDataObject(FileDO fileDO) {
if(fileDO == null) {
if (fileDO == null) {
return null;
}
FileModel fileModel = new FileModel();

View File

@@ -7,6 +7,17 @@ import java.lang.reflect.InvocationTargetException;
import java.util.List;
public interface FileService {
/**
* 列出文件支持的下载方式
*
* @param bookId
* @return
* @throws InvocationTargetException
* @throws IllegalAccessException
* @throws BusinessException
*/
List<FileModel> getFile(Integer bookId) throws InvocationTargetException, IllegalAccessException, BusinessException;
/**
* 列出所有文件
*

View File

@@ -217,6 +217,12 @@
file_sha1 = #{fileSha1,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
<select id="selectAvailableByBookId" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from file_info
where book_id = #{bookId,jdbcType=INTEGER}
</select>
<select id="selectAll" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />