mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-09-01 22:53:29 +08:00
书籍收藏前端部分完成
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M898 178.7H665.3c4.3-9.8 6.7-20.6 6.7-32 0-44-36-80-80-80H432c-44 0-80 36-80 80 0 11.4 2.4 22.2 6.7 32H126c-13.2 0-24 10.8-24 24s10.8 24 24 24h772c13.2 0 24-10.8 24-24s-10.8-24-24-24zM812 280.7H212c-13.3 0-24 10.7-24 24v530c0 68.4 55.6 124 124 124h400c68.4 0 124-55.6 124-124v-530c0-13.2-10.7-24-24-24z m-416 461c0 18.1-14.9 33-33 33h-2c-18.2 0-33-14.8-33-33v-334c0-18.2 14.8-33 33-33h2c18.1 0 33 14.8 33 33v334z m150 0c0 18.1-14.9 33-33 33h-2c-18.2 0-33-14.8-33-33v-334c0-18.2 14.8-33 33-33h2c18.1 0 33 14.8 33 33v334z m150 0c0 18.1-14.9 33-33 33h-2c-18.2 0-33-14.8-33-33v-334c0-18.2 14.8-33 33-33h2c18.1 0 33 14.8 33 33v334z"></path></svg>
|
||||
|
After Width: | Height: | Size: 931 B |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="#0056ff"><path d="M896 672c-17.066667 0-32 14.933333-32 32v128c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 40.533333 34.133333 74.666667 74.666667 74.666667h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667v-128c0-17.066667-14.933333-32-32-32z"></path><path d="M488.533333 727.466667c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466667-8.533333l213.333333-213.333334c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0l-157.866667 157.866667V170.666667c0-17.066667-14.933333-32-32-32s-34.133333 14.933333-34.133333 32v456.533333L322.133333 469.333333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l211.2 213.333334z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M875.3 217.5c-49.9-50-116.5-77.5-187.5-77.5-33.8 0-66.7 6.3-97.8 18.7-12.3 4.9-18.3 18.9-13.4 31.2s18.9 18.3 31.2 13.4c25.5-10.1 52.4-15.3 80.1-15.3 119.6 0 217 97.4 217 217 0 58-22.6 112.6-63.7 153.6l-0.1 0.1-283.4 285.8c-12.2 12.4-28.6 19.2-46 19.2s-33.7-6.8-45.9-19.2L182.6 558.7l-0.1-0.1c-41.1-41-63.7-95.6-63.7-153.6 0-119.6 97.3-217 216.9-217 119.9 0 217.5 97.6 217.5 217.5 0 13.3 10.7 24 24 24s24-10.7 24-24c0-70.9-27.6-137.6-77.8-187.8-50.1-50.1-116.7-77.7-187.6-77.7h-0.1-0.1c-70.9 0-137.5 27.5-187.4 77.5C98.3 267.4 70.8 334 70.8 405c0 70.9 27.6 137.5 77.8 187.5l283.2 285.8c21.3 21.5 49.8 33.4 80 33.4 30.3 0 58.7-11.9 80-33.4L875 592.5c50.1-50.1 77.8-116.7 77.8-187.5 0-71-27.6-137.6-77.5-187.5z"></path></svg>
|
||||
|
After Width: | Height: | Size: 969 B |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M875.3 217.5c-49.9-50-116.5-77.5-187.5-77.5-55.4 0-108.5 16.9-153.5 49-13.5 9.6-31.6 9.6-45 0-45-32-98.1-49-153.5-49-71 0-137.6 27.5-187.5 77.5S70.8 334 70.8 405c0 70.9 27.6 137.5 77.8 187.5l283.2 285.8c21.3 21.5 49.8 33.4 80 33.4s58.7-11.9 80-33.4L875 592.5c50.1-50.1 77.8-116.7 77.8-187.5 0-71-27.6-137.6-77.5-187.5z" fill="#E5404F"></path></svg>
|
||||
|
After Width: | Height: | Size: 595 B |
@@ -15,6 +15,47 @@
|
||||
margin-bottom: 20px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
#favorties-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#favorties-button:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.download-link {
|
||||
user-select: none;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
#download-icon {
|
||||
width: 0px;
|
||||
height: 1.2em;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
position: relative;;
|
||||
}
|
||||
.download-link:hover #download-icon {
|
||||
width: 1.2em;
|
||||
opacity: 1;
|
||||
}
|
||||
.download-link * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#book-details {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#book-details > p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -38,6 +79,7 @@
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// 获取书籍信息
|
||||
getRequest("/book/get", { id: bookId })
|
||||
.then(function (response) {
|
||||
var axiosData = response.data;
|
||||
@@ -58,23 +100,32 @@
|
||||
<h1>${data.bookName}</h1>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<a href="/download/?bookId=${data.id}">下载这本书</a>
|
||||
<img id="favorties-button" src="./assets/image/svg/favorites_empty.svg" style="visibility: hidden; opacity: 1; transition: all 0.3s;" title="点击收藏/取消收藏" onclick="alert('请先登录！')" />
|
||||
<!-- 预加载图片 --><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>
|
||||
</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>
|
||||
<p>语言：${data.language}</p>
|
||||
<p>出版社：${data.publishingHouse}</p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>书本介绍</h2>
|
||||
<p>${data.description}</p>
|
||||
<h2>版权信息</h2>
|
||||
<p>${data.copyright}</p>
|
||||
</div>`;
|
||||
|
||||
// 获取用户收藏信息
|
||||
getUserFavouritesStatus();
|
||||
|
||||
// 渲染后重新获取一次字体
|
||||
fontmin(getPageText());
|
||||
} else {
|
||||
@@ -85,5 +136,93 @@
|
||||
alert("无法连接到服务器，请检查网络连接！");
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// 显示收藏还是取消收藏图标
|
||||
var favortiesIcon = false;
|
||||
// 获取用户收藏信息
|
||||
function getUserFavouritesStatus() {
|
||||
if(!localStorage || !localStorage.getItem("token") || !localStorage.getItem("is_admin")) {
|
||||
// 用户未登录
|
||||
$("#favorties-button").css("visibility", "visible");
|
||||
return;
|
||||
}
|
||||
postRequest("/book/getFavoritesStatus", { token: localStorage.getItem("token"), bookId: bookId })
|
||||
.then(function (responseData) {
|
||||
var axiosData = responseData.data;
|
||||
var status = axiosData.status;
|
||||
var data = axiosData.data;
|
||||
if (status === "success") {
|
||||
console.log(data)
|
||||
if(data.status == 1) {
|
||||
// 用户已收藏
|
||||
console.log("已收藏");
|
||||
favortiesIcon = true;
|
||||
} else {
|
||||
// 用户没有收藏本书
|
||||
console.log("没有收藏");
|
||||
favortiesIcon = false;
|
||||
}
|
||||
toggleDisplayButton();
|
||||
} else {
|
||||
if(data.errCode == "20004") {
|
||||
// 登陆过期，小问题，这里不弹窗显示
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("is_admin");
|
||||
} else {
|
||||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||||
}
|
||||
}
|
||||
}).finally(function () {
|
||||
$("#favorties-button").css("visibility", "visible");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// 正在请求标记
|
||||
var requestingFlag = false;
|
||||
// 添加收藏/取消收藏
|
||||
function toggleFavorites(toggleStatus) {
|
||||
if(requestingFlag) return;
|
||||
requestingFlag = true;
|
||||
$("#favorties-button").css("opacity", "0.3");
|
||||
postRequest("/book/toggleFavorites", { token: localStorage.getItem("token"), bookId: bookId, status: toggleStatus ? 1 : 0 })
|
||||
.then(function (responseData) {
|
||||
var axiosData = responseData.data;
|
||||
var status = axiosData.status;
|
||||
var data = axiosData.data;
|
||||
if (status === "success") {
|
||||
console.log(data)
|
||||
if(data == "success") {
|
||||
if(toggleStatus) {
|
||||
console.log("收藏成功");
|
||||
favortiesIcon = true;
|
||||
} else {
|
||||
console.log("取消收藏成功");
|
||||
favortiesIcon = false;
|
||||
}
|
||||
} else {
|
||||
console.log("操作失败");
|
||||
}
|
||||
} else {
|
||||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||||
}
|
||||
}).finally(function () {
|
||||
setTimeout(toggleDisplayButton, 500);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleDisplayButton() {
|
||||
requestingFlag = false;
|
||||
$("#favorties-button").attr("src", "");
|
||||
$("#favorties-button").css("opacity", "1");
|
||||
if(favortiesIcon) {
|
||||
$("#favorties-button").attr("src", "./assets/image/svg/favorites_fill.svg");
|
||||
$("#favorties-button").attr("onclick", "toggleFavorites(false)");
|
||||
} else {
|
||||
$("#favorties-button").attr("src", "./assets/image/svg/favorites_empty.svg");
|
||||
$("#favorties-button").attr("onclick", "toggleFavorites(true)");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -213,7 +213,7 @@ CREATE TABLE `user_book_favorites_relation` (
|
||||
`id` int(11) NOT NULL AUTO_INCREMENT,
|
||||
`user_id` int(11) NOT NULL,
|
||||
`book_id` int(11) NOT NULL,
|
||||
`create_time` datetime NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
`create_time` datetime NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
PRIMARY KEY (`id`) USING BTREE,
|
||||
UNIQUE INDEX `user_id`(`user_id`, `book_id`) USING BTREE
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;
|
||||
|
||||
@@ -18,10 +18,7 @@ import plus.bookshelf.Service.Model.CategoryModel;
|
||||
import plus.bookshelf.Service.Service.BookService;
|
||||
import plus.bookshelf.Service.Service.CategoryService;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.*;
|
||||
|
||||
@Service
|
||||
public class BookServiceImpl implements BookService {
|
||||
@@ -101,6 +98,7 @@ public class BookServiceImpl implements BookService {
|
||||
UserFavoritesDO userFavoritesDO = new UserFavoritesDO();
|
||||
userFavoritesDO.setBookId(bookId);
|
||||
userFavoritesDO.setUserId(userId);
|
||||
userFavoritesDO.setCreateTime(new Date());
|
||||
int affectRows = userFavoritesDOMapper.insert(userFavoritesDO);
|
||||
return affectRows > 0;
|
||||
}
|
||||
@@ -131,7 +129,7 @@ public class BookServiceImpl implements BookService {
|
||||
public Map getFavoritesStatus(Integer userId, Integer bookId) throws BusinessException {
|
||||
UserFavoritesDO userFavoritesDO = userFavoritesDOMapper.selectCountByUserIdAndBookId(userId, bookId);
|
||||
|
||||
Map<String, String> result = new HashMap<>();
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
if (userFavoritesDO == null) {
|
||||
// 用户未收藏
|
||||
result.put("status", "0");
|
||||
@@ -139,7 +137,7 @@ public class BookServiceImpl implements BookService {
|
||||
} else {
|
||||
// 用户已收藏，返回收藏时间
|
||||
result.put("status", "1");
|
||||
result.put("time", userFavoritesDO.getCreateTime().toString());
|
||||
result.put("time", userFavoritesDO.getCreateTime());
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,9 @@ server.port=8090
|
||||
# api基础路径
|
||||
server.servlet.context-path=/api
|
||||
|
||||
# UTC时区
|
||||
spring.jackson.time-zone=GMT+8
|
||||
|
||||
# mybatis
|
||||
mybatis.mapperLocations=classpath:mapping/*.xml
|
||||
|
||||
|
||||
Reference in New Issue
Block a user