娱乐类网站怎么建设,一个静态网站开发考虑什么,北京网站建设设计公司,九幺seo优化神器任务3.4 借书还书页面
任务描述
这部分主要是制作借书还书的界面#xff0c;这里我分别制作了两个网页分别用来借书和还书。此页面#xff0c;也是通过获取books.txt内容然后添加到表格中#xff0c;但是借还的操作没有添加到后端中去#xff0c;只是一个简单的前端操作。…任务3.4 借书还书页面
任务描述
这部分主要是制作借书还书的界面这里我分别制作了两个网页分别用来借书和还书。此页面也是通过获取books.txt内容然后添加到表格中但是借还的操作没有添加到后端中去只是一个简单的前端操作。
任务实施
3.4.1 借还的页面搭建
因为两者的整体框架是一样的不一样的点只有在借还操作这一部分是不同的所以放在一块进行。
这里为借书操作为例
整体布局就是左面导航栏右边为主体部分内容
主体内容部分
.main 包含一个表格表格的头部定义了七个列书名、作者、出版社、价格、内容摘要、借阅状态、操作
tbody 部分暂时为空稍后将通过 JavaScript 动态填充数据。
导航栏部分有三个导航链接
“我的空间”链接到用户个人页面。
“图书借阅”当前所在页面。
“图书还回”链接到图书还回的页面。
全部代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jQuery.js/scriptlink relstylesheet href./css/borrow.css
/head
style/stylebodydiv classcontentdiv classnavdiv classnav-headerimg src./img/user1.png alth3用户系统/h3/divdiv classnav-menuullia hrefuser.html我的空间/a/lilia href#图书借阅/a/lilia hrefrepaid.html图书还回/a/li/ul/div/divdiv classmaintabletheadtrth书名/thth作者/thth出版社/thth价格/thth内容摘要/thth借阅状态/thth操作/th/tr/theadtbody/tbody/table/div/div
/body
script src./js/borrow.js/script
/html
而还书的部分只有这部分是不一样的div classnav-menuullia hrefuser.html我的空间/a/lilia hrefborrow.html图书借阅/a/lilia href#图书还回/a/li/ul/div3.4.2 页面样式设置
这里样式设置部分不多说还是以借书为例全部代码
*{margin: 0;padding: 0;
}
.nav {background-color: #2f2f2f;width: 20%;height: 100vh;float: left;
}
.nav-header {height: 6rem;display: flex;
}
.nav-header img {width: 6rem;height: 6rem;margin: 1rem 2rem;
}
.nav-header h3 {color: #fff;font-size: 2rem;margin-top: 1rem;text-align: center;line-height: 6rem;
}
.nav-menu {height: 80%;
}
.nav-menu ul {list-style: none;margin-top: 2rem;
}
.nav-menu ul li {margin-bottom: 1rem;text-indent: 2rem;
}
.nav-menu ul :hover{opacity: 0.9;
}
.nav-menu ul li a {color: #fff;text-decoration: none;font-size: 1.5rem;
}
.main{background-color: cadetblue;border-radius: 1.5rem;width: 79%;height: 100%;position: absolute;left: 24rem;
}
.main table{border-collapse: collapse;width: 100%;margin-top: 2rem;text-align: center;
}
.main table th{background-color: #4CAF50;color: white;padding: 12px 16px;
}
.main table td{background-color: #78c37b;border: 1px solid #ddd;padding: 8px;
}
.main table td span{color: green;font-weight: bold;
}
.main table td button{background-color: #5fa862;color: white;border: none;border-radius: 5px;padding: 8px 16px;font-size: 16px;cursor: pointer;
}
.main table td button:hover{opacity: 0.8;
}3.4.3 借还的功能实现
这里来两者这主要区别就是点击借书或还书时转换的字体颜色不同。
点击结束或者还书的时候会有提示框并会有一个时间戳的提示。
讲解部分还是以借书为例
首先利用 $.get 方法从 books.txt 文件中获取书籍数据。使用 $.each 遍历每一本书并为每本书生成一行 tr包括书名、作者、出版社、价格、内容摘要、借阅状态和借阅按钮。借阅状态初始设置为“未借阅”并伴随一个“借阅”按钮。
然后使用事件代理 ($(tbody).on(...)) 来处理动态生成的借阅按钮的点击事件。
当按钮被点击时调用 getFormatDate 函数获取当前时间格式化字符串。找到当前行使用 $(this).closest(tr)并将 “借阅状态” 文本更改为“已借阅”同时修改文本的颜色为红色若是还书则初始页面字体为红色修改后则为绿色以明确显示书籍的借阅状态。
弹出提示框显示借阅成功的信息和当前时间。
最后重要的部分就是获取当前时间的函数部分。
getFormatDate 函数用于获取当前的日期和时间并进行格式化。
使用 Date 对象获取当前年份、月份、日期、小时和分钟并确保它们都是两位数例如10、01。
最终拼接字符串按照“YYYY-MM-DD HH:mm”的格式返回。
其中nowDate.getMonth()获取当前月份的索引0-11。
nowDate.getMonth() 1 10 ? 0 (nowDate.getMonth() 1)检查月份是否小于 10如果是则在前面添加零以确保格式是“01”、“02”等。
nowDate.getDate()、nowDate.getHours()、nowDate.getMinutes()
与这个都是同理。
借书JS部分 $.get(../books.txt, function (data) {var usres JSON.parse(data);$.each(usres, function (i, book) {$(tbody).append(trtd${book.bookname}/tdtd${book.author}/tdtd${book.publisher}/tdtd${book.price}/tdtd${book.content}/tdtdspan classborrow-book未借阅/span/tdtdbutton classborrow-btn借阅/button/td/tr)})
})
$(tbody).on(click, .borrow-btn, function () {var str getFormatDate();alert(借阅成功!当前时间: str);$(this).closest(tr).find(.borrow-book).text(已借阅).css(color, red);
})
function getFormatDate() {var nowDate new Date();var year nowDate.getFullYear();var month nowDate.getMonth() 1 10 ? 0 (nowDate.getMonth() 1) : nowDate.getMonth() 1;var date nowDate.getDate() 10 ? 0 nowDate.getDate() : nowDate.getDate();var hour nowDate.getHours() 10 ? 0 nowDate.getHours() : nowDate.getHours();var minute nowDate.getMinutes() 10 ? 0 nowDate.getMinutes() : nowDate.getMinutes();return year - month - date hour : minute;
}
还书JS部分
$.get(../books.txt, function (data) {var usres JSON.parse(data);$.each(usres, function (i, book) {$(tbody).append(trtd${book.bookname}/tdtd${book.author}/tdtd${book.publisher}/tdtd${book.price}/tdtd${book.content}/tdtdspan classborrow-book stylecolor:red未还回/span/tdtdbutton classborrow-btn还回/button/td/tr)})
})
$(tbody).on(click, .borrow-btn, function () {var str getFormatDate();alert(还书成功!当前时间: str);$(this).closest(tr).find(.borrow-book).text(已还回).css(color, green);})
function getFormatDate() {var nowDate new Date();var year nowDate.getFullYear();var month nowDate.getMonth() 1 10 ? 0 (nowDate.getMonth() 1) : nowDate.getMonth() 1;var date nowDate.getDate() 10 ? 0 nowDate.getDate() : nowDate.getDate();var hour nowDate.getHours() 10 ? 0 nowDate.getHours() : nowDate.getHours();var minute nowDate.getMinutes() 10 ? 0 nowDate.getMinutes() : nowDate.getMinutes();return year - month - date hour : minute ;
}任务3.5 图书管理功能界面
任务描述
该任务可以说是整个项目中最重要的部分即能够连接后端进行前后端的交互包括新增图书编辑图书删除图书等等。以及还有翻页功能的实现。Server.js的编写。
任务实施 3.5.1 页面框架搭建
首先想到的是需要一个表格将我们通过ajax访问并获取txt文本然后把获取到的内容放到表格中所以我们可以新建一个空表格还有新建图书和编辑图书时的表单。以及一些按钮和超链接例如新增图书按钮翻页部分的超链接等等。
分析后即为
主体内容使用body标签包含整个页面的主体部分。
标题使用h2标签显示“图书管理系统”。
图书表格使用table标签布局图书信息表头定义了书名、作者、出版社、出版日期、页数、价格、内容摘要和操作等字段。
分页导航有按钮和链接用于新增图书、翻页和跳转至指定页数。
新增图书表单包含一个ID为addform的表单用于输入新图书信息包括书名、作者、出版社、出版日期、页数、价格和内容摘要等。
编辑图书表单类似于新增图书的表单供编辑现有图书信息使用。
HTML具体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图书信息管理/titlelink relstylesheet href/public/css/Admin-books.cssscript src./js/jQuery.js/script
/head
bodydiv classcontainerh2图书管理系统/h2tabletheadtrth书名/thth作者/thth出版社/thth出版日期/thth页数/thth价格/thth内容摘要/thth操作/th/tr/theadtbody/tbody/tablediv classnavbutton idadd新增图书/buttonspan classtotal-records/spannbsp;nbsp;span classcurrent-page第1页/spana href# idfirst-page第一页/aa href# idprev-page上一页/aa href# idnext-page下一页/aa href# idlast-page最后一页/aspan跳转到第/spaninput typetext value1 placeholder页码span页/spanbutton idjump-to-page确定/button/div/divdiv classaddbookh2新增图书/h2form idaddformlabel forbookname书名/labelinput typetext idbookname namebooknamebrbrlabel forauthor作者/labelinput typetext idauthor nameauthorbrbrlabel forpublisher出版社/labelinput typetext idpublisher namepublisherbrbrlabel forpublishdate出版日期/labelinput typedate idpublishdate namepublishdatebrbrlabel forpage页数/labelinput typetext idpage namepagebrbrlabel forprice价格/labelinput typetext idprice namepricebrbrlabel forcontent内容摘要/labeltextarea idcontent namecontent/textareabrbrbutton typesubmit idsubmit提交/buttonbutton idclose关闭/button/form/divdiv classeditbookh2编辑图书/h2form ideditformlabel forbookname书名/labelinput typetext idbookname namebooknamebrbrlabel forauthor作者/labelinput typetext idauthor nameauthorbrbrlabel forpublisher出版社/labelinput typetext idpublisher namepublisherbrbrlabel forpublishdate出版日期/labelinput typedate idpublishdate namepublishdatebrbrlabel forpage页数/labelinput typetext idpage namepagebrbrlabel forprice价格/labelinput typetext idprice namepricebrbrlabel forcontent内容摘要/labeltextarea idcontent namecontent/textareabrbrbutton typesubmit idedit-submit提交/button/form/div
/body
script src./js/Admin-books.js/script
/html3.5.2 页面样式设置
样式部分主要就分为容器样式主体内容样式导航栏样式链接样式等等。这里比较重要的是我们需要先把新增图书和编辑图书隐藏掉当我们点击相应按钮的时候再把他们分别显示出来。
CSS部分代码
* {margin: 0;padding: 0;
}body {background-image: url(../img/Admin2.png);background-size: cover;
}.container {width: 70%;height: 20%;margin: 10rem auto;border: 1rem solid #adda8f;background-color: aliceblue;border-radius: 1rem;
}h2 {margin: 1rem;
}.container table {width: 100%;height: 100%;border: 0.1rem solid #000000;
}.container table thead {background-color: #f2f2f2;color: #000000;text-align: center;font-size: 1.5rem;
}
.container table tbody {background-color: #ffffff;color: #000000;text-indent: 1rem;font-size: 1.2rem;
}
.nav{width: 80%;margin: 1rem auto;
}
a{text-decoration: none;
}
input{width: 7rem;height: 1.5rem;
}
.addbook{width: 40%;margin: 1rem auto;border: 1rem solid #adda8f;background-color: aliceblue;border-radius: 1rem;position: absolute;top: 10%;left: 25%;display: none;
}
.editbook{width: 40%;margin: 1rem auto;border: 1rem solid #adda8f;background-color: aliceblue;border-radius: 1rem;position: absolute;top: 10%;left: 25%;display: none;
}
label{display: inline-block;width: 8rem;text-align: right;margin-right: 1rem;
}
textarea{width: 80%;height: 5rem;resize: none;
}
button{width: 6rem;height: 2rem;margin-left: 1rem;background-color: #008CBA;color: #ffffff;border: none;border-radius: 0.5rem;cursor: pointer;
}
td {max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}最终效果 3.5.3 更新图书表格updateTable()函数
主要目的就是从 books.txt 的文件中获取书籍数据并将其显示在 HTML 表格中。
这里首先定义了三个全局变量
books一个空数组用于存储书籍信息。currentPage表示当前页码初始值为 1。booksPerPage每页显示的书籍数量这里设置为 5。
首先先获取书籍使用$.get() 方法从 books.txt 文件中获取数据。成功获取后将数据解析为 JSON 对象并将其赋值给 books 数组。最后调用 updateTable() 函数更新表格。
$.get(/books.txt, function (data) { var usres JSON.parse(data); books usres; // 将文件内容存入数组 updateTable(); // 更新表格
});
下面开始进行更新表格函数的编写首先要清空 tbody 的内容以准备显示新的书籍数据。再定义了三个变量
计算总页数
const totalPages Math.ceil(books.length / booksPerPage);
books.length 获取书籍的总数量即数组长度将其除以每页的书籍数量 booksPerPage这里设为每页最多为5然后使用 Math.ceil() 函数向上取整以确保即使有一部分书籍也会增加到新的一页。
计算当前页的起始索引
const start (currentPage - 1) * booksPerPage;
根据当前页码 currentPage 计算当前页的起始索引。由于数组索引从 0 开始所以需要将 currentPage 减去 1然后乘以每页的书籍数量。这个值用于确定在 books 数组中从哪里开始取书籍。
计算当前页的结束索引
const end Math.min(start booksPerPage, books.length);
start booksPerPage 计算出当前页应显示的最后一个书籍的索引但也可能会超过 books.length。因此使用 Math.min() 函数确保结束索引不会超过实际书籍的数量。
再下一步循环遍历当前页的书籍从 start 索引开始直到 end 索引不包括 end遍历当前页面应显示的书籍并获取当前书籍信息。然后再将遍历完的书籍每部分对应的值插入到表格中。插入时使用的是jQuery 的 append() 方法。将每一本书的信息以一个新的表格行 (tr) 的形式添加到 tbody 中。每一列 (td) 显示书籍的不同属性。注意其中包含两个链接一个是 编辑 操作的链接另一个是 删除 操作的链接。它们的 class 属性分别为 edit 和 delete可以用于后续的事件绑定实现对书籍的编辑和删除功能。
let books [];
let currentPage 1;
const booksPerPage 5;
// 获取books.txt文件内容
$.get(/books.txt, function (data) {var usres JSON.parse(data);books usres; // 将文件内容存入数组updateTable(); // 更新表格
});// 更新表格函数
function updateTable() {$(tbody).empty();const totalPages Math.ceil(books.length / booksPerPage);const start (currentPage - 1) * booksPerPage;const end Math.min(start booksPerPage, books.length);for (let i start; i end; i) {const book books[i];$(tbody).append(trtd${book.bookname}/tdtd${book.author}/tdtd${book.publisher}/tdtd${book.publishdate}/tdtd${book.page}/tdtd${book.price}/tdtd${book.content}/tdtda href# classedit编辑/aa href# classdelete删除/a/td/tr);}3.5.4 新增图书功能
我们首先进行新增图书功能的编写首先先获取到对应所需要的元素然后实现点击新增图书该表单显示的操作。
var addbook document.querySelector(.addbook);
var btn document.querySelector(#add);
var close1 document.querySelector(#close);
btn.addEventListener(click, function () {addbook.style.display block;
})close1.addEventListener(click, function (e) {e.preventDefault();addbook.style.display none;
})该功能就编辑完成此时点击新增图书该表单就会显示出来。
接下来开始进行实现新增图书功能的操作可以将新增的图书不仅能够添加到浏览器的页面还能够添加到books.txt中去。
首先添加事件监听当表单被提交时会触发该事件。
在这个监听函数中获取表单数据将表单中输入的数据提取出来并存储在newbook对象中。
这个newbook对象就是用来后面把新增的图书储存请求后端放到txt中的对象。
发送AJAX请求使用jQuery的$.ajax()方法向后端发送HTTP请求。请求信息包括
url: 发送请求的目标URL。
method: 请求的方法这里使用POST。
contentType: 设置请求头为application/json表示请求体内容为JSON格式。
data: 将newbook对象转换为JSON字符串作为请求体发送。
并添加一个处理成功响应若能成功响应在回调中将新书对象newbook添加到books数组中调用updateTable()函数更新表格显示并隐藏新增图书的表单。
这里的updateTable()函数将在后面进行编写这个函数就是用来更新表格每当我们实现一个功能时调用它来进行刷新。
处理错误响应添加这个的目的就是我们在编写中难免会出现错误所以我们可以在当我们发生错误时可以打印一下错误信息并为之改错。使用error: 定义当请求失败时的回调函数。使用console.error()输出错误信息便于调试。
Xhr这是当 AJAX 请求发生错误时错误回调函数的第一个参数。
新增图书代码
document.getElementById(addform).addEventListener(submit, function (e) {e.preventDefault(); // 防止默认提交行为var newbook {bookname: document.getElementById(bookname).value,author: document.getElementById(author).value,publisher: document.getElementById(publisher).value,publishdate: document.getElementById(publishdate).value,page: document.getElementById(page).value,price: document.getElementById(price).value,content: document.getElementById(content).value};// 使用 POST 方法确保将数据作为请求体发送$.ajax({url: http://localhost:5501/addBook, // 后端处理的 URLmethod: POST, // 使用 POST 方法contentType: application/json, // 设置请求头为 JSONdata: JSON.stringify(newbook), // 将对象转换为 JSON 字符串success: function () {books.push(newbook); // 将新书加入数组updateTable(); // 更新表格addbook.style.display none; // 隐藏新增表单},error: function (xhr) {console.error(添加图书失败:, xhr.responseText); // 输出错误信息}});
});3.5.6 删除书籍功能
这部分主要想实现删除图书的功能首先进行的是一个委托事件绑定。绑定一个点击事件到表格的 .delete 类元素上。当用户点击某个删除链接时触发这个事件处理函数。点击删除链接时会触发一个弹窗并提示用户是否删除图书如果用户选择“确定”则继续执行后续代码否则不采取任何行动。
接线来进行若点击删除下面要执行的代码首先要知道是哪行在请求删除所以使用 $(this).closest(tr) 获取当前链接所在的行 (tr)。这样可以找到与点击的删除链接对应的数据行。
知道是哪行了以后由于获取到的书籍是在刚刚新建的数组中所以要获取行的索引并加上当前页的书籍数量以计算出在 books 数组中的实际索引位置。这是确保正确定位要删除的书籍。
最后开始与后端相交互发送删除请求使用 DELETE 方法向指定的 URL 发送删除请求。注意端口名再添加一个删除图书回调若请求成功则从数组中删除对应的书籍。再删除表格对应的行最后更新分页信息。若请求失败则要打印一下错误信息以方便改错。
$(table).on(click, .delete, function () {if (confirm(是否确定删除图书)) {var tr $(this).closest(tr); // 获取当前行var bookIndex tr.index() (currentPage - 1) * booksPerPage; // 计算索引$.ajax({url: http://localhost:5501/books/ bookIndex, // 确保URL正确method: DELETE, // 使用 DELETE 方法success: function (response) {// 删除成功books.splice(bookIndex, 1); // 从数组中移除对应的书籍tr.remove(); // 删除表格中的行updatePagination(Math.ceil(books.length / booksPerPage)); // 更新分页信息},error: function (xhr, status, error) {console.error(删除图书失败:, xhr.responseText); // 输出错误信息}});}
});注意更新分页信息是为后期翻页功能中输出信息当前共几本书的函数。 3.5.7 编辑图书功能
第一步与前两个功能一样都可以使用事件委托来进行编辑操作。同样的方法先获取当前所在行在通过计算分页的页数以及计算出书籍在 books 数组中的实际索引从而获取对应的书籍数据。
接下来在点击编辑后出现的表单中进行填充表单。
填充表单之后管理员即开始对其书籍信息进行编辑等待编辑完事并点击提交时就会进行下一步编辑表单提交时处理更新。还是使用表单提交事件。
解除对表单提交事件的所有先前绑定并定义新的提交处理逻辑。
注意然后需要获取更新后的书籍信息就是更改完之后的表单中每项对应的值构建一个 updatedBook 对象该对象还会用于请求后端时写入的内容。获取之后开始向后端发起AJAX请求使用 PUT 方法向服务器发送更新的书籍信息。同样的请求头设置为 application/json发送的请求体为 updatedBook 对象的 JSON 字符串格式。
请求更新编辑成功后将更新后的书籍信息存回 books 数组中并调用 updateTable() 函数刷新表格内容。最后隐藏编辑表单。
若请求失败输出错误信息到控制台便于后续的修改。 $(tbody).on(click, .edit, function () {var tr $(this).closest(tr); // 获取当前行var bookIndex tr.index() (currentPage - 1) * booksPerPage; // 更新索引以便正确指向var book books[bookIndex]; // 获取对应的书籍数据editbook.style.display block; // 显示编辑表单// 填充编辑表单document.getElementById(editform).reset(); // 清空表单document.querySelector(#editform input[namebookname]).value book.bookname;document.querySelector(#editform input[nameauthor]).value book.author;document.querySelector(#editform input[namepublisher]).value book.publisher;document.querySelector(#editform input[namepublishdate]).value book.publishdate;document.querySelector(#editform input[namepage]).value book.page;document.querySelector(#editform input[nameprice]).value book.price;document.querySelector(#editform textarea[namecontent]).value book.content;// 在编辑表单提交时处理更新$(#editform).off(submit).on(submit, function (event) {event.preventDefault(); // 防止默认提交行为var updatedBook {bookname: document.querySelector(#editform input[namebookname]).value,author: document.querySelector(#editform input[nameauthor]).value,publisher: document.querySelector(#editform input[namepublisher]).value,publishdate: document.querySelector(#editform input[namepublishdate]).value,page: document.querySelector(#editform input[namepage]).value,price: document.querySelector(#editform input[nameprice]).value,content: document.querySelector(#editform textarea[namecontent]).value};// 向服务器发送PUT请求更新书籍信息$.ajax({url: http://localhost:5501/books/ bookIndex, // 使用正确的URL及IDmethod: PUT, // 将方法改为 PUTcontentType: application/json, // 设置请求头为 JSONdata: JSON.stringify(updatedBook), // 将对象转换为 JSON 字符串success: function (response) {// 更新数组中的数据books[bookIndex] updatedBook; // 更新对应索引的书籍信息updateTable(); // 更新表格editbook.style.display none; // 隐藏编辑表单},error: function (xhr) {console.error(编辑图书失败:, xhr.responseText); // 输出错误信息}});});});// 更新分页信息updatePagination(totalPages);
}3.5.8 翻页功能及更新分页信息updatePagination
首先写一下更新的那些信息的函数该函数接受参数 totalPages更新页面上显示的总书籍数量和当前页码信息确保管理员清楚现在的书籍数量。
翻到第一页
当点击“第一页”按钮时将 currentPage 设置为 1并调用 updateTable() 更新表格内容显示第一页的书籍。即会跳到第一页。
$(.nav #first-page).click(function () {currentPage 1;updateTable();
});翻到上一页
点击“上一页”按钮时如果当前页大于 1则将 currentPage 减 1并更新表格内容显示上一页的书籍。
$(.nav #prev-page).click(function () {if (currentPage 1) {currentPage--;updateTable();}
});翻到下一页
当点击“下一页”按钮时首先计算总页数 totalPages。如果当前页小于总页数则将 currentPage 加 1并更新表格显示下一页的书籍。
$(.nav #next-page).click(function () {const totalPages Math.ceil(books.length / booksPerPage);if (currentPage totalPages) {currentPage;updateTable();}
});翻到最后一页
点击“最后一页”按钮时直接将 currentPage 设置为最后一页的页码然后更新表格以显示最后一页的书籍。
$(.nav #last-page).click(function () {currentPage Math.ceil(books.length / booksPerPage);updateTable();
});跳转到指定页
当用户输入一个页码并点击“跳转”按钮时首先通过 parseInt() 转换输入的值为整数。如果该页码大于 0 且小于等于总页数则更新 currentPage并调用 updateTable() 更新表格以显示相应的页。
$(.nav #jump-to-page).click(function () {const pageInput parseInt($(.nav input[typetext]).val());if (pageInput 0 pageInput Math.ceil(books.length / booksPerPage)) {currentPage pageInput;updateTable();}
});至此图书管理的相关功能就写完了。 JS全部代码
var addbook document.querySelector(.addbook);
var container document.querySelector(.container);
var close1 document.querySelector(#close);
var btn document.querySelector(#add);
var editbook document.querySelector(.editbook);btn.addEventListener(click, function () {addbook.style.display block;
})close1.addEventListener(click, function (e) {e.preventDefault();addbook.style.display none;
})//分页功能
// 书籍数据数组// 新增图书
document.getElementById(addform).addEventListener(submit, function (e) {e.preventDefault(); // 防止默认提交行为var newbook {bookname: document.getElementById(bookname).value,author: document.getElementById(author).value,publisher: document.getElementById(publisher).value,publishdate: document.getElementById(publishdate).value,page: document.getElementById(page).value,price: document.getElementById(price).value,content: document.getElementById(content).value};// 使用 POST 方法确保将数据作为请求体发送$.ajax({url: http://localhost:5501/addBook, // 后端处理的 URLmethod: POST, // 使用 POST 方法contentType: application/json, // 设置请求头为 JSONdata: JSON.stringify(newbook), // 将对象转换为 JSON 字符串success: function () {books.push(newbook); // 将新书加入数组updateTable(); // 更新表格addbook.style.display none; // 隐藏新增表单},error: function (xhr) {console.error(添加图书失败:, xhr.responseText); // 输出错误信息}});
});
let books [];
let currentPage 1;
const booksPerPage 5;
// 获取books.txt文件内容
$.get(/books.txt, function (data) {var usres JSON.parse(data);books usres; // 将文件内容存入数组updateTable(); // 更新表格
});// 更新表格函数
function updateTable() {$(tbody).empty();const totalPages Math.ceil(books.length / booksPerPage);const start (currentPage - 1) * booksPerPage;const end Math.min(start booksPerPage, books.length);for (let i start; i end; i) {const book books[i];$(tbody).append(trtd${book.bookname}/tdtd${book.author}/tdtd${book.publisher}/tdtd${book.publishdate}/tdtd${book.page}/tdtd${book.price}/tdtd${book.content}/tdtda href# classedit编辑/aa href# classdelete删除/a/td/tr);}// //编辑操作// 使用事件委托处理动态生成的元素$(tbody).on(click, .edit, function () {var tr $(this).closest(tr); // 获取当前行var bookIndex tr.index() (currentPage - 1) * booksPerPage; // 更新索引以便正确指向var book books[bookIndex]; // 获取对应的书籍数据editbook.style.display block; // 显示编辑表单// 填充编辑表单document.getElementById(editform).reset(); // 清空表单document.querySelector(#editform input[namebookname]).value book.bookname;document.querySelector(#editform input[nameauthor]).value book.author;document.querySelector(#editform input[namepublisher]).value book.publisher;document.querySelector(#editform input[namepublishdate]).value book.publishdate;document.querySelector(#editform input[namepage]).value book.page;document.querySelector(#editform input[nameprice]).value book.price;document.querySelector(#editform textarea[namecontent]).value book.content;// 在编辑表单提交时处理更新$(#editform).off(submit).on(submit, function (event) {event.preventDefault(); // 防止默认提交行为var updatedBook {bookname: document.querySelector(#editform input[namebookname]).value,author: document.querySelector(#editform input[nameauthor]).value,publisher: document.querySelector(#editform input[namepublisher]).value,publishdate: document.querySelector(#editform input[namepublishdate]).value,page: document.querySelector(#editform input[namepage]).value,price: document.querySelector(#editform input[nameprice]).value,content: document.querySelector(#editform textarea[namecontent]).value};// 向服务器发送PUT请求更新书籍信息$.ajax({url: http://localhost:5501/books/ bookIndex, // 使用正确的URL及IDmethod: PUT, // 将方法改为 PUTcontentType: application/json, // 设置请求头为 JSONdata: JSON.stringify(updatedBook), // 将对象转换为 JSON 字符串success: function (response) {// 更新数组中的数据books[bookIndex] updatedBook; // 更新对应索引的书籍信息updateTable(); // 更新表格editbook.style.display none; // 隐藏编辑表单},error: function (xhr) {console.error(编辑图书失败:, xhr.responseText); // 输出错误信息}});});});// 更新分页信息updatePagination(totalPages);
}// 删除书籍
$(table).on(click, .delete, function () {if (confirm(是否确定删除图书)) {var tr $(this).closest(tr); // 获取当前行var bookIndex tr.index() (currentPage - 1) * booksPerPage; // 计算索引$.ajax({url: http://localhost:5501/books/ bookIndex, // 确保URL正确method: DELETE, // 使用 DELETE 方法success: function (response) {// 删除成功books.splice(bookIndex, 1); // 从数组中移除对应的书籍tr.remove(); // 删除表格中的行updatePagination(Math.ceil(books.length / booksPerPage)); // 更新分页信息},error: function (xhr, status, error) {console.error(删除图书失败:, xhr.responseText); // 输出错误信息}});}
});
// 更新分页信息
function updatePagination(totalPages) {$(.nav .total-records).text(共${books.length}本书);$(.nav .current-page).text(当前第${currentPage}页/共${totalPages}页);
}// 翻页功能
$(.nav #first-page).click(function () {currentPage 1;updateTable();
});$(.nav #prev-page).click(function () {if (currentPage 1) {currentPage--;updateTable();}
});$(.nav #next-page).click(function () {const totalPages Math.ceil(books.length / booksPerPage);if (currentPage totalPages) {currentPage;updateTable();}
});$(.nav #last-page).click(function () {currentPage Math.ceil(books.length / booksPerPage);updateTable();
});$(.nav #jump-to-page).click(function () {const pageInput parseInt($(.nav input[typetext]).val());if (pageInput 0 pageInput Math.ceil(books.length / booksPerPage)) {currentPage pageInput;updateTable();}
});目前就差后端代码部分的编写了加油坚持住下一章博客进行最后阶段的完成以及整合
