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

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

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

运行效果图：

 

代码：

 app.js文章来源地址https://www.toymoban.com/news/detail-757889.html

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(`
        <tr>
          <td>${student.id}</td>
          <td>${student.name}</td>
          <td>${student.age}</td>
          <td>${student.gender}</td>
          <td>
            <button type="button" class="btn btn-sm btn-primary">修改</button>
            <button type="button" class="btn btn-sm btn-danger">删除</button>
          </td>
        </tr>
      `);
  });
}

// 添加学生信息
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(`
          <tr>
            <td>${student.id}</td>
            <td>${student.name}</td>
            <td>${student.age}</td>
            <td>${student.gender}</td>
            <td>
              <button type="button" class="btn btn-sm btn-primary">修改</button>
              <button type="button" class="btn btn-sm btn-danger">删除</button>
            </td>
          </tr>
        `);

  }
}
// 编辑学生信息
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页面

<!DOCTYPE html>
<html>

<head>
  <title>管理系统登录</title>
  <style>
    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;
    }
  </style>
</head>

<body>
  <h1>学生管理系的登录</h1>
  <div class="header">
    <div id="login-wrapper">
      <h1>请登录</h1>
      <form action="#" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" />

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" />

        <div class="loginBtn">登录</div>
      </form>
    </div>
  </div>


</body>
<script>
  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 = "";
    }
  });
</script>

</html>

studentList.html页面

<!DOCTYPE html>
<html>
  <head>
    <title>管理页面</title>
    <meta charset="utf-8" />
    <script>
      if (!sessionStorage.getItem("state") || JSON.parse(sessionStorage.getItem("state")) === false) {
        alert("您未登录，无权访问！！")
        window.location.href = "login.html";
      }
    </script>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Bootstrap样式库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" />
    <!-- 引入Bootstrap JS库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

    <style>
      .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;
      }
    </style>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="text-align: center">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">学生管理系统</a>
      </div>
      <div class="container-fluid loginOut">
        <a class="navbar-brand" href="#">退出登录</a>
      </div>
    </nav>

    <div class="container my-4">
      <h2><i style="padding-right: 100px">学生列表</i> <input type="text" id="search-input" placeholder="请输入搜索得学号" /> <button id="search-button">搜索</button></h2>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <div class="input-box-wrpper">
        <div class="box1">
          <h2>添加学生信息</h2>

          <form>
            <div class="mb-3">
              <label for="id" class="form-label">学号</label>
              <input type="text" class="form-control" id="id" name="id" />
            </div>
            <div class="mb-3">
              <label for="name" class="form-label">姓名</label>
              <input type="text" class="form-control" id="name" name="name" />
            </div>
            <div class="mb-3">
              <label for="age" class="form-label">年龄</label>
              <input type="number" class="form-control" id="age" name="age" />
            </div>
            <div class="mb-3">
              <label for="gender" class="form-label">性别</label>
              <select class="form-select" aria-label="Default select example" id="gender" name="gender">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
            <button type="button" class="btn btn-primary tool" style="float: right">数据重置</button>
          </form>
        </div>

        <div class="box2">
          <h2>修改学生信息</h2>
          <form>
            <div class="mb-3">
              <label for="id" class="form-label">学号</label>
              <input type="text" class="form-control" id="newId" name="id" disabled />
            </div>
            <div class="mb-3">
              <label for="name" class="form-label">姓名</label>
              <input type="text" class="form-control" id="newName" name="name" />
            </div>
            <div class="mb-3">
              <label for="age" class="form-label">年龄</label>
              <input type="number" class="form-control" id="newAge" name="age" />
            </div>
            <div class="mb-3">
              <label for="gender" class="form-label">性别</label>
              <select class="form-select" aria-label="Default select example" id="newGender" name="gender">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary">确认修改</button>
          </form>
        </div>
      </div>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

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

到了这里，关于前端三大件html,css,js原生实现学生信息管理系统（课程设计）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！