今天我们来实现管理员登陆与学生登录及功能等的前后端代码
首先是我的配置图
1、管理员
①后端
UserController
package com.example.controller;
import com.example.pojo.Result;
import com.example.pojo.User;
import com.example.pojo.student;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
//登陆验证
@GetMapping("/getByUser")
public ResponseEntity<Integer> getByUser(String username, String password, String position) {
int re = userService.getByUser(username, password, position);
return ResponseEntity.ok(re);
}
//学生注册
@PostMapping("/add")
public Result add(@RequestBody student s) {
userService.add(s);
return Result.success(s);
}
//登陆用户信息添加
@PostMapping("addUser")
public Result addUser(@RequestBody User user) {
userService.addUser(user);
return Result.success(user);
}
//查询登录数据
@GetMapping("getUser/{username}")
public Result getUser1(@PathVariable String username) {
User user = userService.getUser(username);
if (user != null) {
return Result.success(user);
} else {
return Result.error("查询失败");
}
}
//查询个人信息
@GetMapping("/person/{username}")
public Result getPerson(@PathVariable String username) {
student s = userService.getPerson(username);
if (s != null) {
return Result.success(s);
} else {
return Result.error("查询失败");
}
}
//修改用户密码
@PutMapping("/update/{username}/{password}")
public Result update(@PathVariable String username, @PathVariable String password) {
userService.update(username, password);
User user = userService.getUser(username);
if (user != null) {
return Result.success(user);
} else {
return Result.error("修改失败");
}
}
// 获取全部申请注册的信息
@GetMapping("/getAll")
public Result getAll() {
List<student> students = userService.getAll();
if (students != null) {
return Result.success(students);
} else {
return Result.error("当前不存在未审查的信息");
}
}
//修改审批状态
@PutMapping("/updateById/{stuId}/{state}")
public Result updateById(@PathVariable String stuId, @PathVariable int state) {
userService.updateById(stuId, state);
List<student> s = userService.getAll();
if (s != null) {
return Result.success(s);
} else {
return Result.error("审批失败");
}
}
//查询考试信息
@GetMapping("/selectTest/{courseName}/{courseClass}/{courseMajor}")
public Result selectTest(@PathVariable("courseName") String courseName, @PathVariable("courseClass") String courseClass, @PathVariable("courseMajor") String courseMajor) {
return Result.success(userService.selectTest(courseName, courseClass, courseMajor));
}
}
UserService
package com.example.service;
import com.example.mapper.UserMapper;
import com.example.pojo.Test;
import com.example.pojo.User;
import com.example.pojo.student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
//登陆验证
public int getByUser(String username, String password, String position) {
return userMapper.getByUser(username, password, position);
}
//注册学生数据
public void add(student s) {
String stuID = s.getStuId();
String stuName = s.getStuName();
String grade = s.getGrade();
String sex = s.getSex();
String college = s.getCollege();
String professionals = s.getProfessionals();
String phone = s.getPhone();
String position = s.getPosition();
int state = s.getState();
userMapper.add(stuID, stuName, grade, sex, college, professionals, phone, position, state);
}
public void addUser(User user) {
String username=user.getUsername();
String password=user.getPassword();
// String[] position= user.getPosition().toArray(new String[0]);
String position=String.join(",",user.getPosition());
userMapper.addUser(username,password, position);
}
//查询个人详细信息
public student getPerson(String username) {
return userMapper.getPerson(username);
}
public User getUser(String username) {
return userMapper.getUser(username);
}
public void update(String username, String password) {
userMapper.update(username, password);
}
public List<student> getAll() { return userMapper.getAll();
}
public void updateById(String stuId,int state) { userMapper.updateById(stuId,state);
}
public List<Test> selectTest(String courseName, String courseClass, String courseMajor) {
return userMapper.selectTest(courseName, courseClass, courseMajor);
}
}
UserMapper
package com.example.mapper;
import com.example.pojo.Test;
import com.example.pojo.User;
import com.example.pojo.student;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface UserMapper {
//根据用户名和密码查询用户
//根据用户名和密码查询用户，并返回用户所在部门
@Select("select count(*) from user where username = #{username} and password = #{password} and position like concat('%', #{position}, '%')")
int getByUser(@Param("username") String username, @Param("password") String password, @Param("position") String position);
@Insert("insert into student(StuID, StuName, grade, sex, College, Professionals, Phone, Position, State) VALUES (#{id},#{StuName},#{grade},#{sex},#{College},#{Professionals},#{Phone},#{Position},#{State})")
void add(String id, String StuName, String grade, String sex, String College, String Professionals, String Phone, String Position, int State);
@Select("select * from student where StuID=#{username}")
student getPerson(String username);
@Select("select * from user where username=#{username}")
User getUser(String username);
@Update("update user set password=#{password} where username=#{username}")
void update(@Param("username") String username, @Param("password") String password);
@Select("SELECT * from student where State=0")
List<student> getAll();
@Update("update student set State=#{state} where StuID=#{stuId}")
void updateById(String stuId, int state);
@Insert("insert into user(username,password,position) VALUES (#{username},#{password},#{position})")
void addUser(String username, String password, String position);
@Select("select * from test1 where AuditStatus=2 and CourseName=#{courseName} and CourseClass=#{courseClass} and CourseMajor=#{courseMajor} ")
List<Test> selectTest(String courseName, String courseClass, String courseMajor);
}
②前端
主页面index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
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>
<div class="centered-form">
<div class="bordered-form">
<h1>用户登录</h1>
<form id="login">
<label for="username">用户名:</label><input type="text" id="username">
<br>
<label for="password">密码:</label><input type="password" id="password">
<br>
<label>职位:</label>
<div id="loginUser">
<label><input type="radio" name="loginUser" value="专业教师">专业教师</label>
<label><input type="radio" name="loginUser" value="专业负责人">专业负责人</label>
<label><input type="radio" name="loginUser" value="教学副院长">教学副院长</label>
<label><input type="radio" name="loginUser" value="学生">学生</label>
<label><input type="radio" name="loginUser" value="系统管理员">系统管理员</label>
</div>
<div class="centered-buttons">
<button type="submit" style="display: block; margin: 0 auto;">登录</button>
<br>
<button id="register" type="button" style="display: block; margin: 0 auto;">学生注册</button>
</div>
</form>
</div>
</div>
</body>
<script>
const register = document.getElementById("register");
register.addEventListener("click", function () {
window.location.href = "http://localhost:8080/STUDENT/register.html";
});
document.getElementById("login").addEventListener("submit", function (event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const loginUser = document.querySelectorAll('input[name="loginUser"]');
let l;
loginUser.forEach(radio => {
if (radio.checked) {
l = radio.value;
}
});
const url = `user/getByUser?username=${username}&password=${password}&position=${l}`;
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
if (data === 1) {
alert("登录成功");
if (l === '系统管理员') {
window.location.href = "ROOT/administrator.html?username=" + encodeURIComponent(username);
} else if (l === '学生') {
window.location.href = "STUDENT/student.html?username=" + encodeURIComponent(username);
} else if (l === '专业教师') {
window.location.href = "TEACHER/teacher.html?username=" + encodeURIComponent(username);
} else if (l === '专业负责人') {
window.location.href = "HEAD/head.html?username=" + encodeURIComponent(username);
} else if (l === '教学副院长') {
window.location.href = "PRESIDENT/president.html?username=" + encodeURIComponent(username);
}
} else {
alert("登录失败");
console.log(data);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
</html>
administrator.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>
<script>
// 获取URL中的用户名参数
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username);
</script>
<div class="form">
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>编号</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>
<button id="examine">审批学生注册信息</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="insert">增加信息</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="delete">删除信息</button>
</td>
</tr>
<tr>
<td>4</td>
<td>
<button id="update">修改信息</button>
</td>
</tr>
<tr>
<td>5</td>
<td>
<button id="select">查询信息</button>
</td>
</tr>
<tr>
<td>6</td>
<td>
<button id="reset">重置学生密码</button>
</td>
</tr>
</table>
</div>
</body>
<script>
document.getElementById("examine").addEventListener("click", function () {
window.location.href = "examine.html";
});
document.getElementById('insert').addEventListener('click', function () {
window.location.href = "insert.html";
});
document.getElementById("delete").addEventListener("click", function () {
window.location.href = "delete.html";
});
document.getElementById('update').addEventListener('click', function () {
window.location.href = "update.html";
});
document.getElementById("select").addEventListener("click", function () {
window.location.href = "select.html";
});
document.getElementById("reset").addEventListener("click", function () {
window.location.href = "reSet.html";
});
</script>
</html>
insert.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="8" maxlength="8" required>
<br>
<label for="name">请输入姓名</label>
<input type="text" id="name">
<br>
<label for="college">请输入所属学院</label>
<input type="text" id="college">
<br>
<label for="pro">请输入所属专业</label>
<input type="text" id="pro">
<br>
<label for="position">请输入职位，001表示普通教师、010表示专业负责人、011表示即是教师又是专业负责人，111表示三种角色兼具</label>
<input type="text" id="position">
<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 username = document.getElementById('username');
const name = document.getElementById('name');
const college = document.getElementById('college');
const pro = document.getElementById('pro');
const role = document.getElementById('position');
console.log(username.value + " " + name.value + " " + college.value + " " + pro.value + " " + role.value);
addUser(username.value, role.value);
addTea(username.value, name.value, college.value, pro.value, role.value);
});
</script>
<script>
function addUser(username, role) {
const requestUrl = 'http://localhost:8080/root/add';
const roleToPoList = {
'111': ["专业教师", "专业负责人", "教学副院长"],
'011': ["专业教师", "专业负责人"],
'001': ["专业教师"],
'100': ["教学副院长"],
'010': ["专业负责人"],
'110': ["专业负责人", "教学副院长"],
'101': ["专业教师", "教学副院长"],
};
const poList = roleToPoList[role] || [];
console.log(poList);
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: "123456",
position: poList,
})
})
.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>
<script>
function addTea(username, name, college, pro, role) {
const requestUrl = 'http://localhost:8080/root/addTea';
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
teacherID: username,
name: name,
college: college,
professionals: pro,
role: role,
})
})
.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>
delete.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;
}
.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="deleteForm">
<label for="username">请输入您要删除的用户名</label>
<input type="text" id="username" minlength="8" maxlength="8" required>
<br>
<button type="submit" style="display: block; margin: 0 auto;">查询</button>
<div id="container">
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function getTea(username) {
const requestUrl = `http://localhost:8080/root/getTea/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.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>
document.getElementById('deleteForm').addEventListener('submit', function (event) {
event.preventDefault();
const username = document.getElementById('username').value;
console.log(username);
getTea(username);
});
</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);
const roleToPoList = {
'111': ["专业教师", "专业负责人", "教学副院长"],
'011': ["专业教师", "专业负责人"],
'001': ["专业教师"],
'100': ["教学副院长"],
'010': ["专业负责人"],
'110': ["专业负责人", "教学副院长"],
'101': ["专业教师", "教学副院长"],
};
const poList = roleToPoList[data.role] || [];
row = document.createElement("tr");
row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td><td><button class="deleteButton">删除信息</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
<script>
const tableContainer = document.getElementById("container");
tableContainer.addEventListener("click", function (event) {
// 获取到点击事件的目标元素
let target = event.target;
// 向上遍历DOM树，找到具有相应类名的祖先元素
while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) {
target = target.parentNode;
}
if (target.classList.contains("deleteButton")) {
// 点击了"审批通过"按钮
const row = target.closest("tr");
const username = row.querySelector("td:first-child").textContent;
deleteTea(username);
deleteUser(username);
// display(); // 重新显示数据
}
});
</script>
<script>
function deleteTea(username) {
const requestUrl = `http://localhost:8080/root/deleteTea/${username}`;
fetch(requestUrl,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
alert("删除教师信息成功");
} else {
alert("删除失败,或是未查找到该教师");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function deleteUser(username) {
const requestUrl = `http://localhost:8080/root/deleteUser/${username}`;
fetch(requestUrl,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data);
alert("删除登录信息成功");
} else {
alert("删除失败,或是未查找到该信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
</html>
update.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;
}
.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="deleteForm">
<label for="username">请输入您要修改的用户名</label>
<input type="text" id="username" minlength="8" maxlength="8" required>
<br>
<button type="submit" style="display: block; margin: 0 auto;">查询</button>
<div id="container">
</div>
</form>
<form id="updateForm">
<label for="userid">请输入用户名</label>
<input type="text" id="userid" minlength="8" maxlength="8" required>
<br>
<label for="name">请输入姓名</label>
<input type="text" id="name">
<br>
<label for="college">请输入所属学院</label>
<input type="text" id="college">
<br>
<label for="pro">请输入所属专业</label>
<input type="text" id="pro">
<br>
<label for="position">请输入职位，001表示普通教师、010表示专业负责人、011表示即是教师又是专业负责人，111表示三种角色兼具</label>
<input type="text" id="position">
<button type="submit" style="display: block; margin: 0 auto;">添加</button>
</form>
</div>
</div>
</div>
</body>
<script>
document.getElementById('updateForm').addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('userid');
const name = document.getElementById('name');
const college = document.getElementById('college');
const pro = document.getElementById('pro');
const role = document.getElementById('position');
console.log(username.value + " " + name.value + " " + college.value + " " + pro.value + " " + role.value);
updateTea(username.value, name.value, college.value, pro.value, role.value);
});
</script>
<script>
function updateTea(username, name, college, pro, role) {
const requestUrl = `http://localhost:8080/root/updateTea/${username}/${name}/${college}/${pro}/${role}`;
fetch(requestUrl,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
})
.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>
<script>
function getTea(username) {
const requestUrl = `http://localhost:8080/root/getTea/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.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>
document.getElementById('deleteForm').addEventListener('submit', function (event) {
event.preventDefault();
const username = document.getElementById('username').value;
console.log(username);
getTea(username);
});
</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);
const roleToPoList = {
'111': ["专业教师", "专业负责人", "教学副院长"],
'011': ["专业教师", "专业负责人"],
'001': ["专业教师"],
'100': ["教学副院长"],
'010': ["专业负责人"],
'110': ["专业负责人", "教学副院长"],
'101': ["专业教师", "教学副院长"],
};
const poList = roleToPoList[data.role] || [];
row = document.createElement("tr");
row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
</html>
select.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;
}
.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="deleteForm">
<label for="username">请输入您要查询的用户名</label>
<input type="text" id="username" minlength="8" maxlength="8" required>
<br>
<button type="submit" style="display: block; margin: 0 auto;">查询</button>
<div id="container">
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function getTea(username)
{
const requestUrl=`http://localhost:8080/root/getTea/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.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>
document.getElementById('deleteForm').addEventListener('submit',function (event)
{
event.preventDefault();
const username=document.getElementById('username').value;
console.log(username);
getTea(username);
});
</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);
const roleToPoList = {
'111': ["专业教师", "专业负责人", "教学副院长"],
'011': ["专业教师", "专业负责人"],
'001': ["专业教师"],
'100': ["教学副院长"],
'010': ["专业负责人"],
'110': ["专业负责人", "教学副院长"],
'101': ["专业教师", "教学副院长"],
};
const poList = roleToPoList[data.role] || [];
row = document.createElement("tr");
row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
</html>
exmine.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>审查学生信息</title>
<style>
.approveButton {
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;
}
.rejectButton {
background-color: #f44336;
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>
<script>
const tableContainer = document.getElementById("container");
tableContainer.addEventListener("click", function (event) {
// 获取到点击事件的目标元素
let target = event.target;
// 向上遍历DOM树，找到具有相应类名的祖先元素
while (target !== tableContainer && ![...target.classList].some(className => ["approveButton", "rejectButton"].includes(className))) {
target = target.parentNode;
}
if (target.classList.contains("approveButton")) {
// 点击了"审批通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId, 1);
// display(); // 重新显示数据
} else if (target.classList.contains("rejectButton")) {
// 点击了"审批不通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId, -1);
}
});
</script>
</body>
<script>
const requestUrl = `http://localhost:8080/user/getAll`;
function display() {
fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
generateTable(data.data);
} else {
alert("当前不存在未审查的结果");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
display();
</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><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].stuId}</td><td>${data[i].stuName}</td><td>${data[i].grade}</td><td>${data[i].sex}</td><td>${data[i].college}</td><td>${data[i].professionals}</td><td>${data[i].phone}</td><td>${data[i].position}</td><td>${data[i].state}</td><td><button class="approveButton">审批通过</button></td><td><button class="rejectButton">审批不通过</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
<script>
function add(stuId) {
const requestUrl = `http://localhost:8080/user/addUser`;
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(
{
username: stuId,
password: "123456",
position: ["学生"],
})
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("已添加学生用户到数据库");
} else {
alert("未通过审核，取消添加入数据库");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function updateStateInDatabase(stuId, state) {
const requestUrl = `http://localhost:8080/user/updateById/${stuId}/${state}`;
fetch(requestUrl, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
generateTable(data.data);
if(state===1)
{
add(stuId);
}
alert("审核成功")
} else {
alert("审核失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
</html>
reSet.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">
<label for="name">请输入学生姓名</label>
<input type="text" id="name">
<button id="select" style="display: block; margin: 0 auto;">查询</button>
<div id="container">
</div>
</div>
</div>
</div>
</body>
<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><td>手机号</td><td>职位</td><td>审核状态</td><td>密码重置</td>';
tableBody.appendChild(row);
let s="审核中";
if(data.state===1)
{
s="审核通过";
}else if(data.state===-1)
{
s="审核未通过";
}
if(data.state===0||data.state===-1)
{
row = document.createElement("tr");
row.innerHTML = `<td>${data.stuId}</td><td>${data.stuName}</td><td>${data.grade}</td><td>${data.sex}</td><td>${data.college}</td><td>${data.professionals}</td><td>${data.phone}</td><td>${data.position}</td><td>${s}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
alert("当前学生并未通过审核或者还未进行审核，无法进行重置密码操作")
}
else {
row = document.createElement("tr");
row.innerHTML = `<td>${data.stuId}</td><td>${data.stuName}</td><td>${data.grade}</td><td>${data.sex}</td><td>${data.college}</td><td>${data.professionals}</td><td>${data.phone}</td><td>${data.position}</td><td>${s}</td><td><button class="reSet">密码重置</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
<script>
document.getElementById('select').addEventListener('click', function () {
const name = document.getElementById('name').value;
const requestUrl = `http://localhost:8080/root/getByName/${name}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
generateTable(data.data);
} else {
alert("学生信息不存在");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
<script>
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/root/updatePassword/${id}`
fetch(requestUrl,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
alert("重置成功")
} else {
alert("重置失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
});
</script>
</html>
标签：username,const,String,11.7,error,document,data From： https://www.cnblogs.com/zzqq1314/p/17830103.html