前端三大件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(`
        
          ${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页面

  
  



  
学生管理系的登录
  

    

      
请登录
      

        用户名:
        

        密码:
        

        
登录
      
    
  

studentList.html页面

  
    
    
    
    
    
    
    
    
    

    
  

  
    

      

        学生管理系统
      
      

        退出登录
      
    

    

      
学生列表  搜索

      

        

          

            
学号
            
姓名
            
年龄
            
性别
            
操作
          
        
        

      

      

        

          
添加学生信息

          

            

              学号
              
            
            

              姓名
              
            
            

              年龄
              
            
            

              性别
              
                男
                女
              
            
            提交
            数据重置
          
        

        

          
修改学生信息
          

            

              学号
              
            
            

              姓名
              
            
            

              年龄
              
            
            

              性别
              
                男
                女
              
            
            确认修改
          
        
      
    
    
  

完活，很好的代码。记得点赞点赞点赞