CRUD
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E6</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<div id="login">
<p>
<input type="text" id="username" class="form-control" placeholder="账号" />
</p>
<p>
<input type="text" id="password" class="form-control" placeholder="密码" />
</p>
<p><button class="btn btn-primary btn-block">登录</button></p>
</div>
<div id="studentINFO"></div>
<div id="addStudent"></div>
<div id="modifyStudent"></div>
<div id="deleteStudent"></div>
</body>
</html>
<script src="./jquery-3.6.4.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script></script>
<script>
$(document).ready(function () {
login();
addStudedntINFO();
modifyStudedntINFO();
goBack();
deleteStudentINFO();
})
function login() {
$("#login button").click(function () {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "post",
url: "http://114.67.241.121:8088/user/login?" + "username=" + username + "&password=" + password,
async: false,
complete: function (data) {
if (data.responseJSON.msg == "账号或密码错误") {
alert("账号或密码错");
}
else {
var token = data.responseJSON.data.token;
window.localStorage.setItem("token", token);
$("#login").hide();
$("#studentINFO").append("<table height='80%' class='table table-striped table-bordered table-hover table-condensed'><tr><td>stuaddess</td><td>stugender</td><td>stugrade</td><td>stuid</td><td>stumajor</td><td>stuname</td><td>stunative</td><td>stuno</td><td>stuphone</td><td>操作</td></tr></table>");
refreshStudentINFO();
$("#studentINFO").before("<div align='center'><button id='add' class='btn btn-info'>添加</button></div>");
}
},
})
})
}
function refreshStudentINFO() {
$.ajax({
type: "get",
url: "http://114.67.241.121:8088/stu/list",
headers: {
'Authorization': window.localStorage.getItem("token"),
},
async: false,
complete: function (data) {
var studentList = data.responseJSON.data;
$("#studentINFO tr").not(":first").remove();
for (var i = 0; i < studentList.length; i++) {
$("#studentINFO table").append(
"<tr>"
+ "<td>" + studentList[i].stuaddess + "</td>"
+ "<td>" + studentList[i].stugender + "</td>"
+ "<td>" + studentList[i].stugrade + "</td>"
+ "<td>" + studentList[i].stuid + "</td>"
+ "<td>" + studentList[i].stumajor + "</td>"
+ "<td>" + studentList[i].stuname + "</td>"
+ "<td>" + studentList[i].stunative + "</td>"
+ "<td>" + studentList[i].stuno + "</td>"
+ "<td>" + studentList[i].stuphone + "</td>"
+ "<td>" + "<button class='btn btn-warning'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>修改</button>"
+ "<button class='btn btn-danger'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span>删除</button>" + "</td>"
+ "</tr>"
);
}
}
})
}
function addStudedntINFO() {
$("body").on("click", "#add", function () {
console.log("!");
$("#studentINFO").hide();
$("#addStudent").show();
$("#addStudent").append(
"<p>stuaddess: <input type='text' id='stuaddess' /></p>"
+ "<p>stugender: <input type='text' id='stugender' /></p>"
+ "<p>stugrade: <input type='text' id='stugrade' /></p>"
+ "<p>stuid: <input type='text' id='stuid' /></p>"
+ "<p>stumajor: <input type='text' id='stumajor' /></p>"
+ "<p>stuname: <input type='text' id='stuname' /></p>"
+ "<p>stunative: <input type='text' id='stunative' /></p>"
+ "<p>stuno: <input type='text' id='stuno' /></p>"
+ "<p>stuphone: <input type='text' id='stuphone' /></p>"
+ "<div><button style='float: left;' id='confirmAdd' class='btn btn-success'>添加</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>"
);
$("p").css({ "width": "200px" });
$("#confirmAdd").click(function () {
$.ajax({
type: "post",
url: "http://114.67.241.121:8088/stu/add",
headers: {
'Authorization': window.localStorage.getItem("token"),
"Content-Type": "application/json",
},
async: false,
data:
JSON.stringify({
stuaddess: $("#stuaddess").val(),
stugender: $("#stugender").val(),
stugrade: $("#stugrade").val(),
stuid: $("#stuid").val(),
stumajor: $("#stumajor").val(),
stuname: $("#stuname").val(),
stunative: $("#stunative").val(),
stuno: $("#stuno").val(),
stuphone: $("#stuphone").val(),
}),
})
$("#addStudent").hide();
$("#addStudent").empty();
refreshStudentINFO();
$("#studentINFO").show();
})
})
}
function modifyStudedntINFO() {
$("body").on("click", "#studentINFO td button:nth-child(1)", function () {
var currentRow = $(this).closest("tr");
var currentstuaddess = currentRow.find("td:eq(0)").text();
var currentstugender = currentRow.find("td:eq(1)").text();
var currentstugrade = currentRow.find("td:eq(2)").text();
var currentstuid = currentRow.find("td:eq(3)").text();
var currentstumajor = currentRow.find("td:eq(4)").text();
var currentstuname = currentRow.find("td:eq(5)").text();
var currentstunative = currentRow.find("td:eq(6)").text();
var currentstuno = currentRow.find("td:eq(7)").text();
var currentstuphone = currentRow.find("td:eq(8)").text();
console.log(currentstuid);
$("#add").hide();
$("#studentINFO").hide();
$("#modifyStudent").show();
$("#modifyStudent").append(
"<p>stuaddess: <input type='text' id='nstuaddess' /></p>"
+ "<p>stugender: <input type='text' id='nstugender' /></p>"
+ "<p>stugrade: <input type='text' id='nstugrade' /></p>"
+ "<p>stuid: " + currentstuid + "</p>"
+ "<p>stumajor: <input type='text' id='nstumajor' /></p>"
+ "<p>stuname: <input type='text' id='nstuname' /></p>"
+ "<p>stunative: <input type='text' id='nstunative' /></p>"
+ "<p>stuno: <input type='text' id='nstuno' /></p>"
+ "<p>stuphone: <input type='text' id='nstuphone' /></p>"
+ "<div><button style='float: left;' id='confirmModify' class='btn btn-success'>修改</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>"
);
$("p").css({ "width": "200px" });
$("#confirmModify").click(function () {
$.ajax({
type: "post",
url: "http://114.67.241.121:8088/stu/edit",
headers: {
'Authorization': window.localStorage.getItem("token"),
"Content-Type": "application/json",
},
async: false,
data:
JSON.stringify({
"stuaddess": $("#nstuaddess").val(),
"stugender": $("#nstugender").val(),
"stugrade": $("#nstugrade").val(),
"stuid": currentstuid,
"stumajor": $("#nstumajor").val(),
"stuname": $("#nstuname").val(),
"stunative": $("#nstunative").val(),
"stuno": $("#nstuno").val(),
"stuphone": $("#nstuphone").val(),
}),
})
$("#modifyStudent").hide();
$("#modifyStudent").empty();
refreshStudentINFO();
$("#studentINFO").show();
})
})
}
function goBack() {
$("body").on("click", ".goBack", function () {
$("#addStudent").hide();
$("#addStudent").empty();
$("#modifyStudent").hide();
$("#modifyStudent").empty();
$("#deleteStudent").hide();
$("#deleteStudent").empty();
refreshStudentINFO();
$("#studentINFO").show();
$("#add").show();
})
}
function deleteStudentINFO() {
$("body").on("click", "#studentINFO td button:nth-child(2)", function () {
var currentRow = $(this).closest("tr");
var deleteStuid = currentRow.find("td:eq(3)").text();
$("#add").hide();
$("#studentINFO").hide();
$("#deleteStudent").show();
$("#deleteStudent").append("<div class='label label-danger' style='font-size:20px;'>确定删除？</div> <div id='confirmDelete' style='margin-top:20px;'><button class='btn btn-danger'>确定</button><button style='margin-left:20px;' class='goBack btn btn-default'>返回</button></div>");
$("#confirmDelete").css({ "margin-right": "25px", });
$("#confirmDelete button:nth-child(1)").on("click", function () {
// console.log("1");
$.ajax({
type: "post",
url: "http://114.67.241.121:8088/stu/del?stuid=" + deleteStuid,
headers: {
'Authorization': window.localStorage.getItem("token"),
},
async: false,
})
$("#deleteStudent").hide();
$("#deleteStudent").empty();
refreshStudentINFO();
$("#studentINFO").show();
})
})
}
</script>
<style>
#login,
#studentINF,
#addStudent,
#modifyStudent,
#deleteStudent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#studentINF {
height: 80%;
width: 80%;
}
</style>
浙公网安备 33010602011771号