前端三大件html,css,js原生实现学生信息管理系统(课程设计)
话不多说,直接上代码,有用麻烦点个免费的赞赞。超级好用版。
目录结构如该图所示,只要将文件命名成图上三种。代码即可正常运行。分别有三个文件,一个是app.js,放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。
运行效果图:
代码:
app.js
let temData = { studentList: [{ id: '1', name: "爱吃饭的小恐龙", age: "20", gender: "男", }, { id: '2', name: "付渐渐", age: "19", gender: "男", }] } $(document).ready(function () { // 执行页面加载时获取学生列表 getStudentList(); //退出登录 $('.loginOut').click(function () { loginOut(); }); // 监听添加学生信息表单提交事件 $('.box1').submit(function (event) { event.preventDefault(); addStudentInfo(); }); // 监听修改学生信息表单提交事件 $('.box2').submit(function (event) { event.preventDefault(); confimEdit() }); // 监听编辑按钮点击事件 $('table').on('click', '.btn-primary', function () { var id = $(this).closest('tr').find('td:eq(0)').text(); editStudentInfo(id); }); // 监听删除按钮点击事件 $('table').on('click', '.btn-danger', function () { var id = $(this).closest('tr').find('td:eq(0)').text(); deleteStudentInfo(id); }); //监听清空学生表点击事件 $('.tool').click(function () { clearStudent(); }); //监听搜索事件 $('#search-button').on('click', function () { const keyword = $('#search-input').val(); performSearch(keyword); }); }); // 获取学生列表 function getStudentList() { const dataString = localStorage.getItem('myData'); // 从localStorage中获取字符串数据 const data = JSON.parse(dataString); // 将字符串转换为原始的JavaScript对象 if (data) { temData = data } displayStudentList(temData.studentList); } // 显示学生列表 function displayStudentList(studentList) { $('table tbody').empty(); studentList.forEach(function (student) { $('table tbody').append(``); }); } // 添加学生信息 function addStudentInfo() { var student = { id: $('#id').val(), name: $('#name').val(), age: $('#age').val(), gender: $('#gender').val() }; //做数据安全判断 if (!student.id) { alert('ID为空'); return; } else if (!student.name) { alert('姓名为空'); return; } else if (!student.age) { alert('年龄为空'); return; } else if (!student.gender) { alert('性别为空'); return; } else if (temData.studentList.findIndex(n => n.id == student.id) != -1) { alert('学号已经存在!'); return; } temData.studentList.push(student) localStorage.setItem('myData', JSON.stringify(temData)); alert('成功添加学生信息!'); getStudentList(); $('.box1 form')[0].reset(); } //传入初值函数 function setData(data) { $('#newId').val(data.id); $('#newName').val(data.name); $('#newAge').val(data.age); $('#newGender').val(data.gender); } //搜索逻辑 function performSearch(keyword) { if (!keyword) { getStudentList(); } else { let student = temData.studentList.find(student => student.id === keyword); $('table tbody').empty(); $('table tbody').append(` ${student.id} ${student.name} ${student.age} ${student.gender} 修改 删除 `); } } // 编辑学生信息 let needEditIndex = -1; function editStudentInfo(id) { needEditIndex = temData.studentList.findIndex(student => student.id === id); $('.box2').css('visibility', 'visible') setData(temData.studentList[needEditIndex]) } //确认修改 function confimEdit() { var student = { id: $('#newId').val(), name: $('#newName').val(), age: $('#newAge').val(), gender: $('#newGender').val() }; if (!student.id) { alert('ID为空'); return; } else if (!student.name) { alert('姓名为空'); return; } else if (!student.age) { alert('年龄为空'); return; } else if (!student.gender) { alert('性别为空'); return; } temData.studentList[needEditIndex] = student; localStorage.setItem('myData', JSON.stringify(temData)); alert('成功修改学生信息!'); getStudentList(); $('.box2').css('visibility', 'hidden'); } // 删除学生信息 function deleteStudentInfo(id) { const index = temData.studentList.findIndex(student => student.id == id); if (index !== -1) { temData.studentList.splice(index, 1); } localStorage.setItem('myData', JSON.stringify(temData)); alert('成功删除该学生!'); getStudentList(); } //清空数据 function clearStudent() { localStorage.removeItem('myData'); // 删除名为“myData”的数据 alert('数据清除成功!'); location.reload(); } //退出登录 function loginOut() { sessionStorage.setItem("state", JSON.stringify(false)); window.location.href = "login.html"; } ${student.id} ${student.name} ${student.age} ${student.gender} 修改 删除
login页面
管理系统登录 body { font-family: Arial, sans-serif; background-color: #ffffff; } #login-wrapper { height: 520px; width: 100%; } h1 { text-align: center; color: #333; margin-top: 20px; } form { width: 500px; margin: 0 auto; background-color: #ff805b; padding: 80px; padding-left: 80px; padding-right: 80px; border-radius: 5px; box-shadow: 0px 0px 5px #888; } label { display: block; margin-bottom: 10px; color: #f23b24; } input[type="text"], input[type="password"] { padding: 15px; border: none; outline: none; width: 100%; margin-bottom: 30px; border-radius: 5px; box-sizing: border-box; box-shadow: 0px 0px 5px #ccc; } .loginBtn { text-align: center; background-color: #224b8f; color: #fff; padding: 15px; border: none; border-radius: 5px; cursor: pointer; width: 100%; font-size: 16px; margin-top: 30px; }学生管理系的登录
请登录
用户名: 密码: 登录 let userData = { userList: [ { username: "admin", password: "123456", }, { username: "jianjian", password: "12921xin", }, ], }; let state = false; sessionStorage.setItem("state", state); let usernameInput = document.querySelector("#username"); let passwordInput = document.querySelector("#password"); const loginBtn = document.querySelector(".loginBtn"); loginBtn.addEventListener("click", () => { if (!usernameInput.value.trim() || !passwordInput.value.trim()) { alert("请输入用户名和密码"); return; } userData.userList.forEach((user) => { if (user.username === usernameInput.value) { if (user.password === passwordInput.value) { state = true; sessionStorage.setItem("state", JSON.stringify(state)); alert("登录成功"); window.location.href = "studentList.html"; return; } } }); if (JSON.parse(sessionStorage.getItem("state")) === false) { alert("用户名或密码错误,请重新输入"); passwordInput.value = ""; usernameInput.value = ""; } });
studentList.html页面
管理页面 if (!sessionStorage.getItem("state") || JSON.parse(sessionStorage.getItem("state")) === false) { alert("您未登录,无权访问!!") window.location.href = "login.html"; } .input-box-wrpper { display: flex; justify-content: space-between; } .input-box-wrpper .box1, .box2 { width: 50%; box-sizing: border-box; padding: 0 40px; } .input-box-wrpper .box2 { visibility: hidden; } 学生管理系统 退出登录学生列表 搜索
学号 | 姓名 | 年龄 | 性别 | 操作 |
---|
添加学生信息
学号 姓名 年龄 性别 男 女 提交 数据重置修改学生信息
学号 姓名 年龄 性别 男 女 确认修改完活,很好的代码。记得点赞点赞点赞👍
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...