STUDENT/student.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理页面</title>
<style>
.form {
width: 600px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.form table {
margin: 0 auto;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="text-align: center">学生信息管理</h1>
<div class="form">
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>编号</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>
<button id="update">修改个人信息</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="select">浏览选课信息</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="choose">选课</button>
</td>
</tr>
</table>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username);
document.getElementById("update").addEventListener("click", function () {
window.location.href = "1update.html?username=" + encodeURIComponent(username);
});
document.getElementById('select').addEventListener('click', function () {
window.location.href = "2select.html?username=" + encodeURIComponent(username);
});
document.getElementById("choose").addEventListener("click", function () {
window.location.href = "3choose.html?username=" + encodeURIComponent(username);
});
</script>
</html>
1update.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改个人信息</title>
<style>
.reSet {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.form {
width: 600px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.form table {
margin: 0 auto;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 20px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username + " 1");
const requestUrl = `http://localhost:8080/student/getName/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
generateTable(data.data, username);
console.log(data);
} else {
alert("查找失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function update(username, name, s, college, p) {
const requestUrl = 'http://localhost:8080/student/updateStu';
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
studentID: username,
studentName: name,
studentSex: s,
studentClass: college,
studentMajor: p,
})
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
alert("修改角色成功");
console.log(data);
generateTable(data.data, username);
} else {
alert("添加失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function generateTable(data, username) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>学号</td><td>学生姓名</td><td>学生性别</td><td>学生所在班级</td><td>学生专业</td>';
tableBody.appendChild(row);
row = document.createElement("tr");
row.innerHTML = `<td>${username}</td><td>${data.studentName}</td><td>${data.studentSex}</td><td>${data.studentClass}</td><td>${data.studentMajor}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
<body>
<h1 style="text-align: center"></h1>
<div id="container">
</div>
<div class="centered-form">
<div class="bordered-form">
<div class="form">
<form id="addForm">
<label for="name">请输入姓名</label>
<input type="text" id="name">
<br>
<label>性别:</label>
<div id="sex">
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>
</div>
<br>
<label for="college">请输入所属班级</label>
<input type="text" id="college">
<br>
<label for="major">请输入所属专业</label>
<input type="text" id="major">
<button type="submit" style="display: block; margin: 0 auto;">添加</button>
</form>
</div>
</div>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username + " 2");
document.getElementById('addForm').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name');
const sex = document.querySelectorAll('input[name="sex"]');
let s;
sex.forEach(radio => {
if (radio.checked) {
s = radio.value;
}
});
const college = document.getElementById('college');
const major = document.getElementById('major');
console.log(username + " " + name.value + " " + s + " " + college.value + " " + major.value);
update(username, name.value, s, college.value, major.value);
});
</script>
</html>
2select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览选课信息</title>
</head>
<body>
<h1 style="text-align: center">课程信息</h1>
<div id="container">
</div>
</body>
<script>
const requestU = `http://localhost:8080/student/select`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data);
generateTable(data.data);
} else {
alert("未查询到此教师信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateTable(data) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>课程编号</td><td>课程名称</td><td>选课人数</td><td>任课教师</td><td>已选人数</td>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
for (let i = 0; i < data.length; i++) {
row = document.createElement("tr");
row.innerHTML = `<td><button type="button" id="search" onclick="redirectToSelectAll('${data[i].courseID}')">${data[i].courseID}</button></td><td>${data[i].courseName}</td><td>${data[i].courseCount}</td><td><button type="button" id="search" onclick="redirect('${data[i].courseTeacher}')">${data[i].courseTeacher}</button></td><td>${data[i].count}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
function redirectToSelectAll(n) {
// 修改这里的路径为实际的 selectAll 页面路径
window.location.href = `4selectCourse.html?name=${n}`;
}
function redirect(n) {
// 修改这里的路径为实际的 selectAll 页面路径
window.location.href = `5selectAll.html?name=${n}`;
}
</script>
</html>
3choose.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览选课信息</title>
</head>
<body>
<h1 style="text-align: center">课程信息</h1>
<div id="container">
</div>
</body>
<script>
const requestU = `http://localhost:8080/student/choose`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data);
generateTable(data.data);
} else {
alert("未查询到此教师信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateTable(data) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>课程编号</td><td>课程名称</td><td>选课人数</td><td>任课教师</td><td>已选人数</td><td>选择</td>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
for (let i = 0; i < data.length; i++) {
if (data[i].courseCount > data[i].count) {
row = document.createElement("tr");
row.innerHTML = `<td>${data[i].courseID}</td><td>${data[i].courseName}</td><td>${data[i].courseCount}</td>${data[i].courseTeacher}</td><td>${data[i].count}</td><td><button class="reSet">选择</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
}
</script>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username + " 1");
const tableContainer = document.getElementById("container");
tableContainer.addEventListener("click", function (event) {
// 获取到点击事件的目标元素
let target = event.target;
// 向上遍历DOM树，找到具有相应类名的祖先元素
while (target !== tableContainer && ![...target.classList].some(className => ["reSet"].includes(className))) {
target = target.parentNode;
}
if (target.classList.contains("reSet")) {
// 点击了"审批通过"按钮
const row = target.closest("tr");
// 获取第一个元素的值
const id = row.querySelector("td:first-child").textContent;
// 获取第四个元素的值
const requestUrl = `http://localhost:8080/student/cc/${id}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
const name = data.data.courseTeacher;
const requestU = `http://localhost:8080/teacher/getByName/${name}`
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
count(id);
const teacherID = data.data.teacherID;
const requestUrl = `http://localhost:8080/student/choose1`;
console.log(id + " " + teacherID + " " + username);
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
courseID: id,
teacherID: teacherID,
studentID: username,
})
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
generateTable(data.data);
alert("选择成功")
} else {
alert("选择败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
} else {
alert("重置失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
} else {
alert("选择败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
});
</script>
<script>
function count(id) {
const requestUrl = `http://localhost:8080/student/selectCourse/${id}`
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
const count = data.data.count + 1;
console.log("选课数量为" + count);
updateCourse(id, count);
} else {
alert("选择败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function updateCourse(id, count) {
const requestUrl = `http://localhost:8080/student/updateCourse/${id}/${count}`
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("选课数量已改变");
} else {
alert("选择败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
</html>
4selectCourse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程信息</title>
<style>
.reSet {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<div id="container">
</div>
</div>
</div>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var name = urlParams.get('name');
console.log("用户名为:" + name);
const requestUrl = `http://localhost:8080/student/selectCourse/${name}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data);
generateTable(data.data);
} else {
alert("查找失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateTable(data) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>课程编号</td><td>课程名称</td><td>选课人数</td><td>任课教师</td><td>已选人数</td>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
row = document.createElement("tr");
row.innerHTML = `<td>${data.courseID}</td><td>${data.courseName}</td><td>${data.courseCount}</td><td>${data.courseTeacher}</td><td>${data.count}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
</html>
5selectAll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教师信息</title>
<style>
.reSet {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<div id="container">
</div>
</div>
</div>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var name = urlParams.get('name');
console.log("用户名为:" + name);
const requestUrl = `http://localhost:8080/student/selectAll/${name}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data);
generateTable(data.data);
} else {
alert("查找失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateTable(data) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>教师工号</td><td>教师姓名</td><td>教师性别</td><td>教师所在学院</td><td>职位</td>';
tableBody.appendChild(row);
row = document.createElement("tr");
row.innerHTML = `<td>${data.teacherID}</td><td>${data.teacherName}</td><td>${data.teacherSex}</td><td>${data.teacherCollege}</td><td>${data.position}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
</html>
浙公网安备 33010602011771号