TEACHER/teacher.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="insert">添加课程</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="update">修改个人信息</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="select">浏览选课学生信息</button>
</td>
</tr>
</table>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username);
document.getElementById("insert").addEventListener("click", function () {
window.location.href = "1insert.html?username=" + encodeURIComponent(username);
});
document.getElementById('update').addEventListener('click', function () {
window.location.href = "2update.html?username=" + encodeURIComponent(username);
});
document.getElementById("select").addEventListener("click", function () {
window.location.href = "3select.html?username=" + encodeURIComponent(username);
});
</script>
</html>
1insert.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>
<body>
<h1 style="text-align: center">添加课程信息</h1>
<div class="centered-form">
<div class="bordered-form">
<div class="form">
<form id="addForm">
<label for="username">请输入课程编号</label>
<input type="text" id="username" minlength="6" maxlength="6" required>
<br>
<label for="name">请输入课程名称</label>
<input type="text" id="name">
<br>
<label for="count">请输入选课人数</label>
<input type="text" id="count">
<br>
<button type="submit" style="display: block; margin: 0 auto;">添加</button>
</form>
</div>
</div>
</div>
</body>
<script>
document.getElementById('addForm').addEventListener('submit', function (e) {
e.preventDefault();
const classname = document.getElementById('username');
const name = document.getElementById('name');
const count = document.getElementById('count');
console.log(classname.value + " " + name.value + " " + count.value);
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username);
const requestUrl = `http://localhost:8080/teacher/getName/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
addCourse(classname.value, name.value, count.value, data.data.teacherName);
console.log(data);
} else {
alert("查找失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
<script>
function addCourse(classname, name, count, teacherName) {
const requestUrl = 'http://localhost:8080/teacher/addCourse';
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
courseID: classname,
courseName: name,
courseCount: count,
courseTeacher: teacherName,
count: 0,
})
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
alert("已将课程信息添加到数据库");
console.log(data);
} else {
alert("添加失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
</html>
2update.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/teacher/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/teacher/updateTea';
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
teacherID: username,
teacherName:name,
teacherSex:s,
teacherCollege:college,
position: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.teacherName}</td><td>${data.teacherSex}</td><td>${data.teacherCollege}</td><td>${data.position}</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>职位:</label>
<div id="position">
<label><input type="radio" name="position" value="教授">教授</label>
<label><input type="radio" name="position" value="副教授">副教授</label>
<label><input type="radio" name="position" value="讲师">讲师</label>
<label><input type="radio" name="position" value="助教">助教</label>
</div>
<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 college=document.getElementById('college');
const sex = document.querySelectorAll('input[name="sex"]');
let s;
sex.forEach(radio => {
if (radio.checked) {
s = radio.value;
}
});
const position = document.querySelectorAll('input[name="position"]');
let p;
position.forEach(radio => {
if (radio.checked) {
p = radio.value;
}
});
console.log(username+" "+name.value+" "+s+" "+college.value+" "+p);
update(username,name.value,s,college.value,p);
});
</script>
</html>
3select.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>
<body>
<h1 style="text-align: center">浏览选课信息</h1>
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<div id="container">
</div>
</div>
</div>
</div>
</body>
<script>
function display() {
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username + " 1");
const requestUrl = `http://localhost:8080/teacher/getAll/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
c(data.data.teacherName);
console.log(data);
} else {
alert("查找失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
display();
</script>
<script>
function c(name) {
const requestUrl = `http://localhost:8080/teacher/getCourse/${name}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
generateTable(data.data);
console.log(data);
} else {
alert("查找失败 " + data.msg);
}
})
.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>${data[i].courseID}</td><td><button type="button" id="search" onclick="redirectToSelectAll('${data[i].courseID}')">${data[i].courseName}</button></td><td>${data[i].courseCount}</td><td>${data[i].courseTeacher}</td><td>${data[i].count}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
function redirectToSelectAll(n) {
// 修改这里的路径为实际的 selectAll 页面路径
window.location.href = `4student.html?name=${n}`;
}
</script>
</html>
4student.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/getInformation/${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);
//查询到选课表中的数据 然后根据学生学号查找学生信息，显示在页面
a(data.data);
} else {
alert("查找失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function a(data) {
let students = []; // 创建一个空数组来存储学生数据
let promises = []; // 创建一个空数组来存储请求的Promise
for (let i = 0; i < data.length; i++) {
let promise = getStudent(data[i].studentID); // 获取学生数据并返回一个Promise
promises.push(promise); // 将Promise添加到数组中
}
Promise.all(promises) // 等待所有Promise完成
.then(results => {
results.forEach(result => {
students.push(result); // 将每个学生的数据添加到students数组中
});
generateTable(students); // 调用generateTable函数并传递students数组
})
.catch(error => {
console.error("Error fetching student data:", error);
});
}
</script>
<script>
// function getStudent(id)
// {
// const requestUrl = `http://localhost:8080/student/getName/${id}`;
// fetch(requestUrl,
// {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json'
// },
// })
// .then(res => res.json())
// .then(data => {
// if (data.msg === 'success' && data.data != null) {
// return data.data;
// } else {
// alert("查找失败");
// }
// })
// .catch(error => {
// alert("请求失败，请重试");
// console.error(error);
// });
// }
async function getStudent(id) {
const requestUrl = `http://localhost:8080/student/getName/${id}`;
try {
const response = await fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
});
const data = await response.json();
if (data.msg === 'success' && data.data != null) {
return 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>${data[i].studentID}</td><td>${data[i].studentName}</td><td>${data[i].studentSex}</td><td>${data[i].studentClass}</td><td>${data[i].studentMajor}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
</html>
浙公网安备 33010602011771号