JQuery图书管理系统

<script>

//全局变量

//当前页

let currentPageNo = 1;

let pageSize = 3; //每页显示记录数

let globalnextPage;

let globalprePage;

let globalpages;

let globalUrl = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${currentPageNo}&pageSize=${pageSize}`;

//页面加载

$(function () {

//获取localstore存储的username,然后放到span的内容里面

let userName = localStorage.getItem("userName");

$("#username").html(userName);

//页面加载就要刷新数据，查询图书全部信息

//http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=1&pageSize=5

// $.get(`http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${currentPageNo}&pageSize=${pageSize}`, function (data) {

function getData(url) {

$.get(url, function (data) {

//返回的data，服务器响应给你的数据

// (data);

//通过解构获取一些数据

/*

total 总数

list 获取的集合

pages 总页数

pageNum 当前页

prePage 上一页

nextPage 下一页

*/

let { list, pages, pageNum, prePage, nextPage, total } = data;

//赋值给全局变量

globalnextPage = nextPage;

globalprePage = prePage;

globalpages = pages;

// (list);

let newBooks = list.map((item, index) => {

return `

<tr>

<input type="hidden" value="${}"/>

<td>${}</td>

<td>${}</td>

<td>${}</td>

<td>${}</td>

<td>${}</td>

<td>${}</td>

<td>${}</td>

<td><a href="#" data-index="${}" >修改</a>&nbsp;<a data-index="${}" href="#" >删除</a></td>

</tr>

`;

})

//添加到tobody中

$("tbody").html(newBooks.join(""));

//添加分页控件到tfoot里面

$("tfoot").html(`

<tr>

<td colspan="8" style="text-align: center;">

<button style="margin-right:20px;">新增图书</button>共${total}条记录&nbsp;每页<input style="width: 30px;" type="text" value="${pageSize}">&nbsp;第${pageNum}页/共${pages}页

<a href="#" >第一页</a><a href="#" >上一页</a><a href="#" >下一页</a><a href="#" >最后一页</a>

转到第<input style="width:40px;" type="text" >页&nbsp;<button >GO</button>

</td>

</tr>

`)

})

}

//页面加载调用一次getData();

getData(globalUrl);

//绑定未来元素下一页

$(document).on("click", "#nextBtn", function (e) {

//阻止默认事件

e.preventDefault();

//跳转的ur1重新构建

let url = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${globalnextPage}&pageSize=${pageSize}`;

getData(url);

})

//绑定未来元素上一页

$(document).on("click", "#preBtn", function (e) {

//阻止默认事件

e.preventDefault();

//跳转的ur1重新构建

let url = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${globalprePage}&pageSize=${pageSize}`;

getData(url);

})

//绑定第一页

$(document).on("click", "#firstBtn", function (e) {

//阻止默认事件

e.preventDefault();

//跳转的ur1重新构建

let url = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${currentPageNo}&pageSize=${pageSize}`;

getData(url);

})

//绑定最后一页

$(document).on("click", "#lastBtn", function (e) {

//阻止默认事件

e.preventDefault();

//跳转的ur1重新构建

let url = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${globalpages}&pageSize=${pageSize}`;

getData(url);

})

//绑定GO

$(document).on("click", "#goBtn", function (e) {

//获取input里面的value

let pageNumber = $("#goPage").val();

let n = Number(pageNumber);

//验证输入合法性

let regPage = /^\d{1}$/;//数字出现一次

if (regPage.test(n)) {

//判断输入的数字是否在有效范围

if (n >= 1 && n <= globalpages) {

let url = `http://localhost:8080/bookManager/getAllBookByPage?currentPageNo=${pageNumber}&pageSize=${pageSize}`;

getData(url);

} else {

alert("超出合理的页码范围");

}

} else {

alert("输入字符不合法");

return;

}

})

//进入添加图书页面

$(document).on("click", "#addBtn", function () {

window.location.href = "";

})

//点击删除按钮删除一行

$(document).on("click", "#delBtn", function (e) {

console.log(e);

e.preventDefault(); //去除超链接默认事件

//根据接口来http://localhost:8080/bookManager/deleteBook 参数id(对应每一本书中的id值)

//获取id

let id = e.target.dataset.index;

console.log(id);

//发送ajax请求，根据服务器返回的结果做相应的处理

$.get(`http://localhost:8080/bookManager/deleteBook?id=${id}`, function (data) {

console.log(data);

if (data == 1) {

alert("删除成功")

//页面跳转list

window.location.href = "";

} else {

alert("删除失败")

}

})

})

//点击修改按钮，进入到修改页面，并且传递点击记录的id过去

$(document).on("click", "#updateBtn", function (e) {

//获取id

let id = e.target.dataset.index;

//去除默认事件

e.preventDefault();

//将id封装在本地存储，本地存储是存储在浏览器里面

localStorage.setItem("id", id);

//跳转页面

window.location.href = "";

})

})

</script>