register.html
代码：
<!--register.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 请此处添加页面美观控制代码，完成题目要求。如果需要使用bootstrap，可以引用css和js目录下的文件*/
table,
td {
border: none;
}
table,
img {
width: 380px;
text-align: left;
vertical-align: middle;
}
tr {
height: 18px;
}
.firstTD {
background-color: #ECE7E7;
color: #000000;
}
#main {
font-size: 14px;
}
.error {
font-size: 10px;
color: #F50F13;
}
</style>
<script src="./js/jquery-3.2.0.min.js"></script>
<script>
/*
请在此处添加控制代码，完成题目要求内容。如果需要jquery，可以自行引用js目录下的文件
*/
$(document).ready(function () {
$("input:radio[value='1']").prop('checked', true);
check01();
check02();
check03();
check04();
register();
});
function check01() {
$("#userno").blur(function () {
let userno = $("#userno").val();
$("#userno_error").empty();
if (userno == "") {
$("#userno_error").append("请检查输入！");
}
});
}
function check02() {
$("#username").blur(function () {
let username = $("#username").val();
$("#username_error").empty();
let x = username.slice(0, 1);
let verifyIfContainNum = /\d/;
if (username == "" || username.length < 2 || username.length > 6 || verifyIfContainNum.test(x)) {
$("#username_error").append("请检查输入！");
}
else {
}
});
}
function check03() {
$("#email").blur(function () {
let email = $("#email").val();
$("#email_error").empty();
if (email == "") {
$("#email_error").append("请检查输入！");
}
else {
}
});
}
function check04() {
$("#userpwd").blur(function () {
let userpwd = $("#userpwd").val();
console.log(userpwd);
$("#userpwd_error").empty();
if (userpwd == "") {
$("#userpwd_error").append("请检查输入！");
}
else {
}
});
$("#repwd").blur(function () {
let userpwd = $("#userpwd").val();
let repwd = $("#repwd").val();
$("#repwd_error").empty();
if (repwd == "") {
$("#repwd_error").append("请检查输入！");
}
else if (userpwd != repwd) {
$("#repwd_error").append("两次密码不一致！");
}
else {
}
});
}
function register() {
$("body").on("click", "#btnok", function () {
if ($("#userno_error").text() != "" || $("#username_error").text() != "" || $("#email_error").text() != ""
|| $("#userpwd_error").text() != "" || $("#repwd_error").text() != "") {
alert("请检查输入！");
}
else {
let userno = $("#userno").val();
let username = $("#username").val();
let email = $("#email").val();
let userpwd = $("#userpwd").val();
let sex = $('input:radio:checked').val();
$.ajax({
type: "post",
url: "http://120.79.153.0/register.aspx",
data: {
userno: userno,
userpwd: userpwd,
username: userpwd,
sex: sex,
email: email
},
complete: function (data) {
console.log(data);
if (data.responseText == "TRUE") {
alert("注册成功");
location.replace("login.html");
}
else {
alert("注册失败");
}
}
});
}
});
}
</script>
</head>
<!-- 本题仅能在register.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。
-->
<body>
<div id="main">
<table border="1" cellspacing="0" cellpadding="5px">
<tr>
<td colspan="3">
<div id="header"><img src="img/logo.png" id="logoImg" /></div>
</td>
</tr>
<tr>
<td class="firstTD">工号：</td>
<td><input type="text" id="userno" maxlength="12"> </td>
<td>
<div id="userno_error" class="error"></div>
</td>
</tr>
<tr>
<td class="firstTD">姓名：</td>
<td><input type="text" id="username" /> </td>
<td>
<div id="username_error" class="error"></div>
</td>
</tr>
<tr>
<td class="firstTD">邮箱：</td>
<td><input type="text" id="email" /> </td>
<td>
<div id="email_error" class="error"></div>
</td>
</tr>
<tr>
<td class="firstTD">登录密码：</td>
<td><input type="password" id="userpwd" /> </td>
<td>
<div id="userpwd_error" class="error"></div>
</td>
</tr>
<tr>
<td class="firstTD">确认密码：</td>
<td><input type="password" id="repwd"> </td>
<td>
<div id="repwd_error" class="error"></div>
</td>
</tr>
<tr>
<td class="firstTD">性别：</td>
<td>
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="0" />女
</td>
<td>
<div id="sex_error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input id="btnok" type="image" src="img/button.gif" /></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
login.html
代码：
<!--login.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<!--CSS设置信息请在css/login.css进行设置 -->
<link href="css/login.css" rel="stylesheet" type="text/css" />
<style>
/* #username div:nth-child(1),
#password div:nth-child(1) {
float: left;
} */
#username,
#password {
display: inline;
}
.inputarea {
text-align: left;
}
</style>
<script src="./js/jquery-3.2.0.min.js"></script>
<script>
/*
请在此处添加控制代码，完成题目要求内容。如果需要jquery，可以自行引用js目录下的文件
*/
$(document).ready(function () {
goBack();
login();
});
function goBack() {
$("a").click(function () {
location.replace("register.html");
});
}
function login() {
$("body").on("click", "#btnLogin", function () {
let userno = $("#userno").val();
let userpwd = $("#userpwd").val();
if (userno == "" || userpwd == "") {
$("#error").append("请输入账号密码");
}
else {
$.ajax({
type: "post",
url: "http://120.79.153.0/login.aspx?",
data: {
userno: userno,
userpwd: userpwd,
},
complete: function (data) {
console.log(data);
if (data.responseText == "TRUE") {
alert("登录成功");
localStorage.setItem("userno", userno);
location.replace("mainframe.html");
}
else {
alert("登录失败");
}
}
});
}
});
$("#btnCancel").click(function () {
$("#userno").val("");
$("#userpwd").val("");
$("#error").empty();
});
}
</script>
</head>
<!-- 本题仅能在login.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。
-->
<body>
<div id="username" class="inputarea">
<div>工号</div>
<div><input type="text" id="userno" placeholder="请输入工号" maxlength="12"></div>
</div>
<div id="password" class="inputarea">
<div>密码</div>
<div><input type="password" id="userpwd" placeholder="请输入密码"></div>
</div>
<div id="error"></div>
<div id="login">
<input type="button" id="btnLogin" value="登录" />
<input type="button" id="btnCancel" value="取消" />
<a href="register.html">注册</a>
</div>
</body>
</html>
learning.html
代码：
<!--learning.html-->
<!DOCTYPE html>
<html>
<head>
<title> 操作说明 </title>
</head>
<body>
<div id="title">操作说明</div>
<div id="content">
<div>1.必须先登录才能管理图书。</div>
<div>2.管理员只能操作自己添加的图书信息。</div>
</div>
<div id="sign">
<div>图书管理办公室</div>
</div>
</body>
</html>
<style>
#title {
color: green;
font-size: 18px;
text-align: center;
border-bottom: 1px solid black;
padding-bottom: 10px;
font-weight: bold;
}
#content {
padding: 10px;
line-height: 25px;
color: blue;
text-align: left;
}
#sign {
color: blue;
text-align: right;
}
</style>
mainframe.html
代码：
<!--mainframe.html-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="nav">
<div id="selectLearning">操作学习</div>
<div id="selctManage">管理图书</div>
</div>
<div id="main">
<iframe id="learning" src="learning.html" width="100%" height="100%" scrolling="no"></iframe>
<div id="manage">
<div id="inputMessage">
图书编号<input id="bookNo" type="text">
图书名称<input id="bookName" type="text">
出版社<input id="bookPublisher" type="text">
<input type="button" id="sumbitAdd" value="确定添加">
<input type="button" id="sumbitModify" value="确定修改">
</div>
<div id="content">
<table></table>
</div>
</div>
</div>
</body>
</html>
<script src="./js/jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function () {
$("#learning").show();
$("#manage").hide();
selectLearning();
selectManege();
addBook();
modifyBook();
$("#sumbitAdd").show();
$("#sumbitModify").hide();
});
function selectLearning() {
$("#selectLearning").click(function () {
$("#learning").show();
$("#manage").hide();
});
}
function selectManege() {
$("#selctManage").click(function () {
$("#manage").show();
$("#learning").hide();
refreshBooks();
});
}
function refreshBooks() {
let userno = localStorage.getItem("userno");
$.ajax({
type: "get",
url: "http://120.79.153.0:8080/getBooks.aspx?",
data: {
userno: userno
},
complete: function (data) {
var dataSet = data.responseJSON;
gdataSet = dataSet;
if (dataSet.length == 0) {
$("#content table").hide();
alert("暂无图书信息");
}
else {
$("#content table").show();
$("#content table").empty();
$("#content table").append(buildTableContent(dataSet));
}
}
});
}
function buildTableContent(dataSet) {
let tableContent = "<tr><th>图书编号</th><th>图书名称</th><th>出版社</th><th>第四列</th></tr>";
for (let i = 0; i < dataSet.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + dataSet[i].bookNo + "</td>";
tableContent += "<td>" + dataSet[i].bookName + "</td>";
tableContent += "<td>" + dataSet[i].bookPublisher + "</td>";
tableContent += "<td>" + "<a href='javasrcipt:void(0);'>修改</a>" + "</td>";
tableContent += "</tr>";
}
return tableContent;
}
function addBook() {
$("#sumbitAdd").click(function () {
let userno = localStorage.getItem("userno");
let bookNo = $("#bookNo").val();
let bookName = $("#bookName").val();
let bookPublisher = $("#bookPublisher").val();
$.ajax({
type: "post",
url: "http://120.79.153.0:8080/addBooks.aspx",
data: {
userno: userno,
bookNo: bookNo,
bookName: bookName,
bookPublisher: bookPublisher
},
complete: function (data) {
console.log(data);
if (data.responseText == "TRUE") {
alert("添加成功");
$("#bookNo").val("");
$("#bookName").val("");
$("#bookPublisher").val("");
refreshBooks();
}
else {
alert("添加失败");
}
}
});
});
}
function getBookId(dataSet, currentBookNo, currentbookName) {
let currentbookId = "";
for (let i = 0; i < dataSet.length; i++) {
if (dataSet[i].bookNo == currentBookNo && dataSet[i].bookName == currentbookName) {
console.log(currentBookNo);
currentbookId = dataSet[i].id;
}
}
return currentbookId;
}
function modifyBook() {
$("body").on("click", "table > tr > td:nth-child(4)", function () {
let currentRow = $(this).closest("tr");
let currentBookNo = currentRow.find("td:eq(0)").text();
let currentbookName = currentRow.find("td:eq(1)").text();
let currentbookPublisher = currentRow.find("td:eq(2)").text();
let bookId = getBookId(gdataSet, currentBookNo, currentbookName);
bookID = bookId;
$("#bookNo").val(currentBookNo);
$("#bookName").val(currentbookName);
$("#bookPublisher").val(currentbookPublisher);
$("#sumbitAdd").hide();
$("#sumbitModify").show();
});
$("body").on("click", "#sumbitModify", function () {
let userno = localStorage.getItem("userno");
let newBookNo = $("#bookNo").val();
let newBookName = $("#bookName").val();
let newBookPublisher = $("#bookPublisher").val();
$.ajax({
type: "post",
url: "http://120.79.153.0:8080/updateBooks.aspx",
data: {
id: bookID,
userno: userno,
bookNo: newBookNo,
bookName: newBookName,
bookPublisher: newBookPublisher,
},
complete: function (data) {
if (data.responseText == "TRUE") {
alert("修改成功");
$("#bookNo").val("");
$("#bookName").val("");
$("#bookPublisher").val("");
$("#sumbitAdd").show();
$("#sumbitModify").hide();
refreshBooks();
}
else {
alert("修改失败");
}
}
});
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
}
#nav {
height: 10%;
background-color: green;
}
#main {
height: 90%;
}
#nav div {
color: blue;
font-size: 20px;
margin-left: 80px;
display: inline-block;
margin-top: 2%;
}
#selectLearning:hover,
#selctManage:hover {
cursor: pointer;
}
#learning {
height: 100%;
border: none;
}
#manage {
height: 100%;
}
#inputMessage {
margin-top: 2%;
margin-bottom: 2%;
height: 10%;
border: 1px solid black;
text-align: center;
}
#bookNo {
margin-top: 2%;
}
#content {
width: 100%;
display: flex;
justify-content: center;
}
table {
/* margin-left: 10%; */
width: 80%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
tr th:nth-child(1) {
width: 30%;
}
tr th:nth-child(2) {
width: 30%;
}
tr th:nth-child(3) {
width: 30%;
}
th {
background-color: #fffcc6;
font-weight: bold;
}
</style>
浙公网安备 33010602011771号