poem_front/ancient poetry.html
ZHANG ZENGXUAN d0dd647fac feat: INIT
2025-05-19 21:59:43 +08:00

687 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>词汇江湖</title>
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<link rel=" stylesheet " href="./assets/css/header.css ">
<link rel="stylesheet " href="./assets/iconfont/iconfont.css ">
<link rel="stylesheet " href="./assets/iconfont3/iconfont.css ">
<link rel="stylesheet" href="./assets/css/footer.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/style1.css">
<link rel="stylesheet" href="./assets/css/bootstrap.css">
<link rel="stylesheet" href="./assets/css/footer.css">
<script src="./assets/js/jquery-1.9.1.min.js"></script>
<script src="./assets/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="./assets/js/ajax.js"></script>
<link rel="stylesheet" href="./assets/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<!-- 头部导航 -->
<div id="header"></div>
<!-- 诗简介 -->
<div class="poetry " id="submitgushiquanbuneirong">
<div id="dynastyId">
<p class="gaunzhuspan_user">
<button class="reply djpl gaunzhu_user guanzhu " id="followers" style="font-size:17px; border: none; display: inline-block;background-color: rgb(241 241 241 / 0%);">
<d >&#xe655;</d>
<d id="gzzz">关注作者</d><input type="hidden" id="dynastyUserId">
</button>
</p>
</div>
<div class="explain" id="explain">
<p>翻译:</p>
</div>
<div class="content">
<div class="content_box">
<input type="button" id="like" class="icon-checkbox">
<label for="like" class="icon">
<i class="iconfonts" id="dainzna">&#xe652;</i>
</label>
<span class="quantity" id="dianzanshuju">
<!-- <span class="quantity">(1231)</span> -->
</span>
</div>
<div class="content_box">
<input type="button" id="collect" class="icon-checkbox">
<label for="collect" class="icon">
<i class="iconfonts" id="shoucang">&#xe657;</i>
</label>
<span class="quantity" id="shoucangshuju">
<!-- <span class="quantity">(1231)</span> -->
</span>
</div>
<div class="content_box">
<!-- <input type="button" value="Copy URL" οnclick="Copy()"> -->
<input type="button" id="coin" class="icon-checkbox">
<label for="coin" class="icon">
<i class="iconfonts">&#xe656;</i>
</label>
</div>
</div>
</div>
<!-- 评论区 -->
<div id="pinglun">
<div class="dycontainer">
<h4>评论区</h4>
<div class="sends">
<span class="avatary"><img src="./assets/images/ye.webp" alt="avatary"></span>
<input type="text" class="sends-input" form="commentForm" cols="80" rows="5" placeholder="评论" id="inp">
<input type="button" class="sends-button" id="fbpl" value="提交">
</div>
<div class="list" id="dyconments">
</div>
<div class="list" id="dyconnes">
</div>
</div>
<!-- 弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:200px;">
<div class="modal-header">
<h4>回复评论</h4>
<button class="close" data-dismiss="modal">
&times;
</button>
</div>
<div class="modal-header">
<input type="text" id="commentsInformation" class="neirung" placeholder="回复内容">
</div>
<div class="modal-footer">
<button id="toreply" style="outline: none;background-color: #fff; border: none;">提交回复</button>
</div>
</div>
</div>
</div>
</div>
<!-- 底部开始 -->
<div id="footer"></div>
<script>
$(function() {
$('#header').load('./common/header.html');
$('#footer').load('./common/footer.html');
let userId = window.sessionStorage.getItem('userId');
let username = window.sessionStorage.getItem("username");
let userToken = window.sessionStorage.getItem("yq_token");
// 用户权限判断
$.ajax({
url: 'http://127.0.0.1:81/consumer/user/fineById/' + userId + '/',
undefined,
type: "get",
headers: {
undefined,
"token": userToken //此处放置请求到的用户token
},
success: function(data) {
if (data.code == 200) {
document.getElementById("denglu").innerHTML = '<div style="display:flex;"><a href="./user"><img src=http://cdn.shuguangwl.com/2022/04/01/9d62eaa7c11f2.png style="width:20px;height:20px;">' + data.data.username + '</a><a href="./user/logout.html"><img src=http://cdn.shuguangwl.com/2022/04/10/60fc777f1b526.png style="width:20px;height:20px;">退出登录</a><div>';
}
}
})
})
//分享 复制网页链接----------------------------------------------
$('#coin').on('click', function() {
var url = window.location.href;
copyUrl(url);
alert("网页链接复制成功!");
});
function copyUrl(id) {
$("body").after("<input id='copyVal'></input>");
var text = id;
var input = document.getElementById("copyVal");
input.value = text;
input.select();
input.setSelectionRange(0, input.value.length);
document.execCommand("copy");
$("#copyVal").remove();
}
//分享end 复制网页链接----------------------------------------------
//获取主页搜索数据并展示到页面----------------------------------
//1.获取主页搜索数据
var twoText = window.location.href;
var twodata = twoText.split("="); //截取 url中的“=”,获得“=”后面的参数
var dynastyId = decodeURI(twodata[1]); //decodeURI解码
//2.展示到页面
$('#submitgushiquanbuneirong').ready(function() {
$.ajax({
// 返回诗的id找出诗的内容
url: 'http://127.0.0.1:82/consumer/do/fine/dynasty/dynastyId/' + dynastyId + '/',
dataType: "json", //数据格式
type: "get", //请求方式
success: function(data) { //如何发送成功
var dynastyId = data.data.dynastyId;
var dynastyName = data.data.dynastyName;
var dynastyUser = data.data.dynastyUser;
const dynastyUserId = data.data.dynastyUserId;
window.sessionStorage.setItem('dynastyUserId',dynastyUserId);
var dynastyInformation = data.data.dynastyInformation;
var giveLike = data.data.giveLike;
var collection = data.data.collection;
var explain = data.data.explain;
var time = data.data.time;
var one = data.data.dynastyInformation;
var input = one.replace(/\。/g, '。<br/>');
one = input.replace(/\/g, '<br/>');
input = one.replace(/\ /g, '<br/>');
one = input.replace(/\,/g, '<br/>');
input = one.replace(/\ /g, '<br/>')
one = input.replace(/\!/g, '!<br/>');
var result = one.replace(/\./g, '。<br/>');
var dynastyInformation = result;
$(`<p class='poetry-topic'>${dynastyName}</p>
<p class='poetry-artile'>${dynastyUser}</p>
<p class='poetry-content'id='dynastyInformation'>${dynastyInformation}</p>
`).appendTo($("#dynastyId"));
$(`<p style="margin: 0px 20px;text-indent: 2em; font-size: 19px;font-family:'楷体';word-break: break-all;">
${explain}
</p>`).appendTo($("#explain"));
},
})
})
//翻译
function translation(num) {
alert('翻译:' + num)
}
//获取搜索数据并展示到页面end----------------------------------
//评论列表---------------------------------------------------
//页面跳转同时显示的历史评论及回复
$('#srk').ready(function() {
var repLyerId = "";
$.ajax({
url: 'http://127.0.0.1:86/consumer/do/see/dynasty/comments/' + dynastyId,
dataType: "json",
headers: {
token: sessionStorage.getItem("yq_token")
},
success: function(data) {
if (data.code == 200) {
data.data.forEach(element => {
var str = element.commentsId;
var str1 = str.substring(0, 10);
var str2 = str.substring(10);
// 一级评论+二级
$(`<div class="contently" onclick="display(${str1},${str2},${element.replyCommentsId.length})" >
<p class="contently-name">${element.userId}</p>
<div class="check">
<a href="#">
<button class="reply" type="button" style="background-color: rgb(247 247 247 / 0%); outline: none;" onclick="reply(${str1},${str2},${element.dynastyId})" data-toggle="modal" data-target="#myModal">回复</button>
</a>
</div>
<p class="contently-article">${element.commentsInformation}</p>
<p class="contently-footer">
<span class="contently-footer-timestamp">${element.time}</span>
<input type="button" class="reply djpl" style="background-color: rgb(247 247 247 / 0%);" value="查看全部${element.replyCommentsId.length}条回复"/>
</p>
</div>
`).appendTo($("#dyconments"));
// console.log(element.commentsId);
if (element.replyCommentsId != null) {
var index = 0;
element.replyCommentsId.forEach(e => {
index++;
$(`<div id="${element.commentsId}${index}" style="display:none;" class="huifu" >
<p class="contently-nam e">${e.userId}</p>
<p class="contently-article">${e.commentsInformation}</p>
<p class="contently-footer">
<span class="contently-footer-timestamp">${e.time}</span>
</p>
</div >
`).appendTo($("#dyconments"))
})
};
})
}
},
})
})
//给文章评论
$("#fbpl").click(function() {
//获取回复值=============================================
var commentsInformation = $("#inp").val();
//获取回复者id username=======================================================
var userId = window.sessionStorage.getItem('userId');
var username = window.sessionStorage.getItem("username");
var userToken = window.sessionStorage.getItem("yq_token");
//通过id获取用户姓名 并输出二级评论===========================================================
// var poemId = 1;
$.ajax({
undefined,
type: "GET",
headers: {
undefined,
"token": userToken //此处放置请求到的用户token
},
url: 'http://127.0.0.1:86/consumer/user/comments/dynasty/' + userId + '/' + dynastyId + '/' + commentsInformation + '/',
dataType: "json",
success: function(data) {
if (data.code == 200) {
window.location.reload()
} else if (data.code == 201) {
alert("未登录,请登录后评论"),
window.location.replace("./user/login.html")
}
},
error: function() {
alert("请登录后评论")
}
})
});
//给评论者评论内容的回复
//给评论者评论内容的回复
function display(num1, num2, length) {
var num1 = String(num1);
var num2 = String(num2);
var e = num1 + num2;
for (i = 1; i <= length; i++) {
var s = String(i)
$("#" + e + i).toggle();
}
}
function reply(num1, num2, length) {
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
if (userId == null || userToken==null) {
alert('请登录后回复'),
window.location.replace("./user/login.html")
}else{
var num1 = String(num1);
var num2 = String(num2);
let repLyerId = num1 + num2;
//var commentsInformation = "";
$("#toreply").click(function() {
$('#myModal').modal('hide');
let commentsInformation = $.trim($("#commentsInformation").val());
if (commentsInformation == '' || commentsInformation==null) {
alert("回复为空,请正确输入回复内容!");
} else {
doComments(userId,dynastyId,commentsInformation,repLyerId);
}
});
}
};
function doComments(userId,dynastyId,commentsInformation,repLyerId){
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:86/consumer/user/comments/dynasty/' + userId + '/' + dynastyId + '/' + commentsInformation + '/' + repLyerId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
window.location.reload()
} else if (data.code == 201) {
alert("未登录,请登录后评论")
}
},
error: function() {
alert("未回复成功,请重新回复")
}
})
};
//评论列表end---------------------------------------------------
// 点赞
//页面跳转同时显示 历史 点赞/收藏数 及 是否 点赞/收藏
window.onload = function() {
like_number();
seelike();
seecollect()
collect_number()
seefollowers()
}
//历史点赞数
function like_number() {
$.ajax({
url: 'http://127.0.0.1:85/consumer/do/see/dynasty/give/like/num/' + dynastyId,
success: function(data) {
if (data.data >= 500) {
data.data = "500+";
}
var html1 = "";
html1 += "点赞人数:" + data.data;
$("#dianzanshuju").html(html1);
}
})
}
//是否点赞
function seelike() {
var userId = window.sessionStorage.getItem("userId");
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
url: 'http://127.0.0.1:85/consumer/see/dynasty/give/like/' + userId + "/" + dynastyId,
dataType: "json",
undefined,
headers: {
undefined,
"token": userToken
},
success: function(data) {
var butto = $("#dainzna");
if (data.code == 200) {
butto.css({
"color": 'red'
})
} else if (data.code === 204) {
butto.css({
"color": '#ccc'
})
}
$("#like").click(function() {
if (data.code == 201) {
alert('请登录后点赞'),
window.location.replace("./user/login.html")
} else if (data.code == 200) {
nolikegive()
} else if (data.code === 204) {
likegive()
}
})
}
})
}
//用户未点赞时执行的操作
function likegive() {
var butto = $("#dainzna");
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:85/consumer/dynasty/give/like/' + userId + "/" + dynastyId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": 'red'
});
// seelike();
window.location.reload()
} else {
alert("点赞失败")
}
},
})
}
//用户已经点赞时执行的操作
function nolikegive() {
console.log("num1");
//取消赞
var butto = $("#dainzna");
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:85/consumer/dynasty/give/like/cancel/' + userId + "/" + dynastyId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": '#ccc'
});
// seelike();
window.location.reload()
} else {
alert("取消点赞失败")
}
}
})
}
// 收藏
//历史收藏数
function collect_number() {
$.ajax({
url: 'http://127.0.0.1:84/consumer/do/see/collection/dynasty/num/' + dynastyId,
dataType: "json",
success: function(data) {
if (data.data >= 500) {
data.data = "500+";
}
var html1 = "";
html1 += "收藏人数:" + data.data;
$("#shoucangshuju").html(html1);
}
})
}
//是否收藏
function seecollect() {
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
url: 'http://127.0.0.1:84/consumer/see/dynasty/collection/' + userId + "/" + dynastyId,
dataType: "json",
undefined,
headers: {
undefined,
"token": userToken
},
success: function(data) {
var butto = $("#shoucang");
if (data.code === 204) {
butto.css({
"color": '#ccc'
})
} else if (data.code == 200) {
butto.css({
"color": 'gold'
})
}
$("#collect").click(function() {
if (data.code == 201) {
alert("请登录后收藏"),
window.location.replace("./user/login.html")
} else if (data.code === 204) {
collectgive();
} else if (data.code == 200) {
nocollectgive()
}
})
}
})
}
// 用户未收藏时执行的操作
function collectgive() {
var butto = $("#shoucang");
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:84/consumer/collection/dynasty/' + userId + "/" + dynastyId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": 'gold'
});
// seelike();
window.location.reload()
} else {
alert("收藏失败")
}
}
})
}
// 用户已经收藏时执行的操作
function nocollectgive() {
//取消收藏
var butto = $("#shoucang");
var userId = window.sessionStorage.getItem('userId');
var userToken = window.sessionStorage.getItem("yq_token");
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:84/consumer/collection/dynasty/cancel/' + userId + "/" + dynastyId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": '#ccc'
});
// seelike();
window.location.reload()
} else {
alert("取消收藏失败")
}
}
})
}
//关注
//是否关注
function seefollowers() {
var followers = window.sessionStorage.getItem("userId");
var userToken = window.sessionStorage.getItem("yq_token");
var dynastyUserId = window.sessionStorage.getItem('dynastyUserId');
$.ajax({
url: 'http://127.0.0.1:83/consumer/user/see/attention/' + followers + "/" + dynastyUserId,
dataType: "json",
undefined,
headers: {
undefined,
"token": userToken
},
success: function(data) {
var butto = $(".guanzhu");
if (data.code === 204) {
butto.css({
"color": '#ccc'
})
} else if (data.code == 200) {
butto.css({
"color": 'darkgoldenrod'
})
$("#gzzz").text('已关注作者')
}
$("#followers").click(function() {
if (data.code == 201) {
alert('请登录后关注'),
window.location.replace("./user/login.html")
} else if (data.code == 204) {
followersgive();
} else if (data.code === 200) {
nofollowersgive()
}
})
}
})
}
// 用户未关注时执行的操作
function followersgive() {
var butto = $(".guanzhu");
var followers = window.sessionStorage.getItem("userId");
var userToken = window.sessionStorage.getItem("yq_token");
var dynastyUserId = window.sessionStorage.getItem('dynastyUserId');
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:83/consumer/user/attention/' + followers + "/" + dynastyUserId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": 'darkgoldenrod'
});
// seelike();
window.location.reload()
} else {
alert("关注失败")
}
}
})
}
// 用户已经关注时执行的操作
function nofollowersgive() {
//取消收藏
var butto = $("#guanzhu");
var followers = window.sessionStorage.getItem("userId");
var userToken = window.sessionStorage.getItem("yq_token");
var dynastyUserId = window.sessionStorage.getItem('dynastyUserId');
$.ajax({
type: "GET",
undefined,
headers: {
undefined,
"token": userToken
},
url: 'http://127.0.0.1:83/consumer/user/cancel/attention/' + followers + "/" + dynastyUserId,
dataType: "json",
success: function(data) {
if (data.code == 200) {
butto.css({
"color": '#ccc'
});
window.location.reload()
} else {
alert("取消关注失败")
}
}
})
}
</script>
</html>