Fortern/light-blog
1
0
Fork 0
Code Activity

init

Browse Source
This commit is contained in:
Fortern
2024-03-28 04:24:35 +08:00
commit 28ae65b3d2
110 changed files with 45386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/main/resources/static/comment_list.html Normal file
View File

@@ -0,0 +1,268 @@
<html lang="zh">
<head>
<title>评论列表</title>
<script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="toastr/toastr.min.js"></script>
<script type="text/javascript" src="decimal/decimal.js"></script>
<script type="text/javascript" src="moment/moment.js"></script>
<script type="text/javascript" src="js/fortern.js"></script>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="toastr/toastr.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default">
<!-- 导航条 -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- 导航条左边头部 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 登录页 -->
<a class="navbar-brand" href="index.html">落星原</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- 导航条中间部分 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 左侧导航连接 -->
<ul class="nav navbar-nav">
<li class="active"><a href="edit_article.html">添加新文章 <span class="sr-only">(current)</span></a></li>
<li><a href="user_list.html">用户管理</a></li>
<li><a href="article_list.html">文章管理</a></li>
<li><a href="comment_list.html">评论管理</a></li>
<li><a href="category_list.html">分类管理</a></li>
<li><a href="donate_list.html">捐赠管理</a></li>
</ul>
<!-- 搜索框 -->
<form class="navbar-form navbar-left">
<div class="form-group">
<label>
<input id="search_key" type="text" class="form-control" placeholder="Search">
</label>
</div>
<button type="button" class="btn btn-default" onclick="to_search()" id="search_btn">搜索</button>
</form>
<!-- 右侧导航连接 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<!-- 个人中心 -->
<li><a href="user.html">个人中心</a></li>
<li role="separator" class="divider"></li>
<li><a onclick="show_donate()">捐赠</a></li>
<li role="separator" class="divider"></li>
<li><a onclick="logout()">注销</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>评论列表</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<!-- 此列向右偏移 -->
<!-- 宽度4，左间距8 -->
<div class="col-md-4 col-md-offset-8">
</div>
</div>
<!-- 显示表格数据库 -->
<div class="row">
<!-- 表格占12列 -->
<div class="col-md-12">
<table id="comment_table" class="table table-hover">
<thead>
<tr>
<th>
<label><input id="check_all" type="checkbox"/></label>
</th>
<th>文章id</th>
<th>用户</th>
<th>回复数</th>
<th>内容</th>
<th>发表时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<!-- 分页信息 -->
<div id="page_info_area" class="col-md-6">
</div>
<div id="page_nav" class="col-md-6">
</div>
</div>
</div>
<script type="text/javascript">
let security;
//1、页面加载完成以后，直接发送ajax请求，要到分页数据
$(function () {
$.ajax({
url: "/user/getMe",
type: "GET",
dataType: "json",
async: false,
success: function (result) {
security = result.security;
},
statusCode: {
403: function () {
$(window).attr('location', '/login.html');
}
}
});
to_page(1);
});
//跳转到第pn页
function to_page(pn) {
$.ajax({
url: "/comment/i",
data: "page=" + pn + "&size=5",
type: "POST",
dataType: "json",
success: function (result) {
//1、解析并显示评论数据
build_comment_table(result);
let page_info = build_page_info(result.pageIndex, result.pageSize, result.totalCount);
//2、解析并显示分页信息
$("#page_info_area").empty().append("当前" + page_info.page + "页，共" + page_info.pages + "页，共" + page_info.total + "条记录");
//3、解析显示分页条数据
build_page_nav(page_info);
},
fail: function () {
toastr.fail("加载数据失败");
}
});
}
//构建评论列表
function build_comment_table(result) {
//先清空原有数据
$("#comment_table tbody").empty();
$("#check_all").prop("checked", false);
let articles = result.records;
$.each(articles, function (index, item) {
let checkBoxTd = $("<td></td>").append("<input type='checkbox' class='check_item'/>");
let aidTd = $("<td></td>").append(item.aid);
let usernameTd = $("<td></td>").append(item.simpleUser.username);
let numOfReplyTd = $("<td></td>").append(item.numOfReply);
let contentTd = $("<td></td>").append(item.content);
let timeTd = $("<td></td>").append(moment(new Date(item.time)).format(time_format));
let editBtn = $("<button data-id='" + item.id + "' class='btn btn-danger btn-sm del_btn'></button>").append($("<span class='glyphicon glyphicon-trash'></span>")).append("删除");
let btnTd = $("<td></td>").append(editBtn);
$("<tr></tr>").attr("data-id", item.id).append(checkBoxTd).append(aidTd).append(usernameTd).append(numOfReplyTd).append(timeTd).append(contentTd).append(timeTd).append(btnTd).appendTo("#comment_table tbody");
});
}
//构建分页条
function build_page_nav(page_info) {
$("#page_nav").empty();
let ul = $("<ul></ul>").addClass("pagination");
let firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
let prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
if (!page_info.hasPreviousPage) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
firstPageLi.click(function () {
to_page(1);
});
prePageLi.click(function () {
to_page(page - 1);
});
}
let lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
let nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
if (page_info.hasNextPage === false) {
lastPageLi.addClass("disabled");
nextPageLi.addClass("disabled");
} else {
nextPageLi.click(function () {
to_page(page + 1);
});
lastPageLi.click(function () {
to_page(pages);
});
}
ul.append(firstPageLi).append(prePageLi);
$.each(page_info.beforePages, function (index, item) {
let numLi = $("<li value='" + item + "'></li>").append($("<a></a>").append(item));
numLi.appendTo(ul);
numLi.click(function () {
to_page(item);
})
});
ul.append("<li class='active'><a>" + page_info.page + "</a></li>");
$.each(page_info.afterPages, function (index, item) {
let numLi = $("<li value='" + item + "'></li>").append($("<a></a>").append(item));
numLi.appendTo(ul);
numLi.click(function () {
to_page(item);
})
});
ul.append(nextPageLi).append(lastPageLi);
let navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav");
}
//给后来出现的“编辑”按钮添加绑定事件
$(document).on("click", ".edit_btn", function () {
let id = $(this).attr("data-id");
$(window).attr('location','/edit_article.html?aid=' + id);
})
//给后来出现的“删除”按钮添加绑定事件
$(document).on("click", ".del_btn", function () {
let comment_id = $(this).attr("data-id");
if (confirm("确认删除【" + comment_id + "】吗?")) {
$.ajax({
url: "/comment/del/" + comment_id,
type: "DELETE",
success: function (result) {
toastr.success(result);
to_page(1);
}
})
}
})
//给后来出现的“复选框”添加绑定事件
$(document).on("click", ".check_item", function () {
//判断全选框里是不是要有钩
let flag = $(".check_item:checked").length === $(".check_item").length;
$("#check_all").prop("checked", flag);
})
//全选
$("#check_all").click(function () {
//prop修改和获取原声属性的值
//将所有复选框的checked属性设为和被点击的那个相同
$(".check_item").prop("checked", $(this).prop("checked"));
})
</script>
</body>
</html>