冲刺记录13
今日任务：今天尝试添加上照片识别功能
遇到困难：需要调用网上的识别接口，没调用过接口不会弄
toggleLike(item) {
if (!this.likedItems.includes(item.id)) {
item.likes++;
this.likedItems.push(item.id);
this.likeBook(item.id);
this.saveLikedItems();
} else {
item.likes--;
const index = this.likedItems.indexOf(item.id);
if (index > -1) {
this.likedItems.splice(index, 1);
}
this.unlikeBook(item.id);
this.saveLikedItems();
}
},
likeBook(id) {
return fetch(`http://192.168.1.176:8081/book/${id}/like`, {
method: 'PUT',
}).then(response => {
if (!response.ok) {
console.error('点赞失败:', response.statusText);
alert('点赞失败，请稍后重试！');
}
}).catch(error => {
console.error('请求失败:', error);
alert('请求失败，请稍后重试！');
});
},
unlikeBook(id) {
return fetch(`http://192.168.1.176:8081/book/${id}/unlike`, {
method: 'PUT',
}).then(response => {
if (!response.ok) {
console.error('取消点赞失败:', response.statusText);
alert('取消点赞失败，请稍后重试！');
}
}).catch(error => {
console.error('请求失败:', error);
alert('请求失败，请稍后重试！');
});
},
addComment(item) {
fetch(`http://192.168.1.176:8081/book`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: item.id,
comment: item.comment
})
}).then(response => {
if (response.ok) {
item.comment = '';
item.showComment = false;
} else {
console.error('写入失败:', response.statusText);
alert('写入失败，请稍后重试！');
}
}).catch(error => {
console.error('请求失败:', error);
alert('请求失败，请稍后重试！');
});
},
closeModal(item) {
const target = event.target;
const modal = target.closest('.modal-content');
if (!modal) {
item.showComment = false;
}
},
saveLikedItems() {
localStorage.setItem('likedItems', JSON.stringify(this.likedItems));
},
loadLikedItems() {
const likedItems = localStorage.getItem('likedItems');
if (likedItems) {
this.likedItems = JSON.parse(likedItems);
}
},
sortByDate() {
this.sortBy = 'date';
},
sortByLikes() {
this.sortBy = 'likes';
}
}
};
</script>
<style scoped>
.background-container {
padding: 20px;
background-image: url('/static/111.jpg');
background-size: cover;
background-position: center;
min-height: 100vh;
background-attachment: fixed;
overflow-y: auto;
}
.item-container {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.photo {
max-width: 100%;
height: auto;
}
.action-buttons {
display: flex;
align-items: center;
}
.like-btn,
.comment-btn {
background-color: transparent;
border: none;
cursor: pointer;
display: inline-block;
margin-right: 10px;
}
.like-btn svg {
width: 20px;
height: 20px;
vertical-align: middle;
}
.comment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
width: 200px;
background-image: url('/static/222.jpg');
background-size: cover;
padding: 20px;
border-radius: 5px;
}
.comment-input {
width: 100%;
resize: vertical;
}
.comments-section {
margin-top: 10px;
}
.comment {
margin-bottom: 5px;
}
.liked .red-heart {
fill: red;
}
.search-input {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
.sorting-buttons {
display: flex;
margin-bottom: 10px;
}
.sort-btn {
margin-right: 10px;
}
</style>
