前端三大件html,css,js原生实现学生信息管理系统（课程设计）

话不多说，直接上代码，有用麻烦点个免费的赞赞。超级好用版。

目录结构如该图所示，只要将文件命名成图上三种。代码即可正常运行。分别有三个文件，一个是app.js，放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。

运行效果图：

前端三大件html,css,js原生实现学生信息管理系统（课程设计）

代码：

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(`
        
          ${student.id}
          ${student.name}
          ${student.age}
          ${student.gender}
          
            
            
          
        
      `);
  });
}

// 添加学生信息
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";
}

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;
      }
    
  

  
    
      
        学生管理系统
      
      
        退出登录
      
    

    
      学生列表  

      
        
          
            学号
            姓名
            年龄
            性别
            操作
          
        
        
      

      
        
          添加学生信息

          
            
              学号
              
            
            
              姓名
              
            
            
              年龄
              
            
            
              性别
              
                男
                女
              
            
            
            
          
        

        
          修改学生信息
          
            
              学号
              
            
            
              姓名
              
            
            
              年龄
              
            
            
              性别
              
                男
                女