268 lines
11 KiB
HTML
268 lines
11 KiB
HTML
<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("«"));
|
||
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("»"));
|
||
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> |