node + express 学生信息管理

真的想不出名儿

已于 2024-02-04 22:26:04 修改

阅读量247

点赞数 3

分类专栏： Node 文章标签： express

于 2024-02-04 22:25:35 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/136033497

版权

Node 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

api/db.js

const mysql = require("mysql");

const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "school2",
});

connection.connect();

// 根据登录和密码查询用户信息
module.exports.selectByNameAndPwd = function (loginName, pwd, callback) {
  var sql = `select * from student where LoginName='${loginName}' and LoginPwd='${pwd}'`;
  connection.query(sql, function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(data);
    }
  });
};

// 根据用户姓名或登录名查询用户信息
module.exports.selectByCondtion = function (name, callback) {
  var sql = `select * from student where Sname like '%${name}%' or LoginName like '%${name}%'`;
  connection.query(sql, function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(data);
    }
  });
};

// 根据用户Sno删除用户信息
module.exports.deleteBySno = function (sno, callback) {
  var sql = `delete from student where Sno='${sno}'`;
  connection.query(sql, function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(data);
    }
  });
};

// 根据Sno查询用户信息
module.exports.selectBySno = function (sno, callback) {
  var sql = `select * from student where Sno = '${sno}'`;
  connection.query(sql, function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(data);
    }
  });
};

// 根据用户Sno编辑用户信息和新增用户信息
module.exports.addAndUpdateBySno = function (sno, student, callback) {
  if (sno == -1) {
    var sql = `insert into student values('${student.Sno}','${student.Sname}',${student.Sage},'${student.Ssex}','${student.loginName}','${student.loginPwd}')`;
  } else {
    sql = `update student set Sno='${student.Sno}',Sname='${student.Sname}',Sage=${student.Sage},Ssex='${student.Ssex}',LoginName='${student.loginName}',LoginPwd='${student.loginPwd}' where Sno='${sno}'`;
  }
  connection.query(sql, function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(data);
    }
  });
};

api/http.js

const express = require("express");
const app = new express();
const cors = require("cors");
const db = require("./db");

app.use(cors());

app.all("*", function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

// 根据登录和密码查询用户信息
app.get("/student/selectByNameAndPwd", function (req, res) {
  db.selectByNameAndPwd(
    req.query.loginName,
    req.query.loginPwd,
    function (data) {
      if (data.length > 0) {
        res.json({ status: 1, msg: "登录成功", data: data });
      } else {
        res.json({ status: 0, msg: "登录失败", data: data });
      }
    }
  );
});

// 根据用户姓名或登录名查询用户信息
app.get("/student/selectByCondtion", function (req, res) {
  db.selectByCondtion(req.query.name, function (data) {
    if (data.length > 0) {
      res.json(data);
    } else {
      res.json(data);
    }
  });
});

// 根据用户Sno删除用户信息
app.get("/student/deleteBySno", function (req, res) {
  db.deleteBySno(req.query.sno, function (data) {
    if (data.affectedRows > 0) {
      res.json({ status: 1, msg: "删除成功" });
    } else {
      res.json({ status: 0, msg: "删除失败" });
    }
  });
});

// 根据Sno查询用户信息
app.get("/student/selectBySno", function (req, res) {
  db.selectBySno(req.query.sno, function (data) {
    if (data.length > 0) {
      res.json({ status: 1, data: data });
    } else {
      res.json({ status: 0, msg: "数据回显失败" });
    }
  });
});

// 根据用户Sno编辑用户信息和新增用户信息
app.get("/student/addAndUpdateBySno", function (req, res) {
  // console.log(req.query.sno, "req.query.sno");
  // console.log(req.query.student, "req.query.student");

  // 传入的对象参数一定要先从JSON格式转换为对象格式---JSON.parse(req.query.student)
  db.addAndUpdateBySno(
    req.query.sno,
    JSON.parse(req.query.student),
    function (data) {
      if (data.affectedRows > 0) {
        res.json({ status: 1, msg: "操作成功" });
      } else {
        res.json({ status: 0, msg: "操作失败" });
      }
    }
  );
});

app.listen(3000, function () {
  console.log("端口3000已启动...");
});

html/login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      html,
      body {
        background-color: #eee;
      }

      h1 {
        text-align: center;
      }

      .loginWrapper {
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: 1px solid blue;
        border-radius: 3px;
        background-color: #fff;
        margin: 0 auto;
        padding: 30px;
      }

      .username,
      .password {
        margin-bottom: 10px;
      }

      .tip {
        display: block;
        margin-bottom: 6px;
      }

      .form-control,
      .btn {
        width: 250px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>学生信息管理-登录</h1>
      <div class="loginWrapper">
        <div class="username">
          <span class="tip"> 用户名： </span>
          <input
            type="text"
            id="name"
            placeholder="请输入用户名"
            class="form-control"
          />
        </div>
        <div class="password">
          <span class="tip"> 密码： </span>
          <input
            type="text"
            id="pwd"
            placeholder="请输入密码"
            class="form-control"
          />
        </div>
        <button class="btn btn-info" onclick="login()">登录</button>
      </div>
    </div>
  </body>

  <script>
    function login() {
      $.ajax({
        url: "http://localhost:3000/student/selectByNameAndPwd",
        data: {
          loginName: $("#name").val(),
          loginPwd: $("#pwd").val(),
        },
        success: (res) => {
          if (res.status == 1) {
            console.log(res);
            localStorage.setItem("loginUser", JSON.stringify(res.data[0]));
            location.href = "./index.html";
          } else {
            alert(res.msg);
          }
        },
      });
    }
  </script>
</html>

html/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      /* 顶部欢迎语  */
      .divTop {
        display: flex;
        align-items: end;
        font-size: 16px;
        margin-bottom: 20px;
      }

      .divTop h2 {
        margin-bottom: 0;
      }

      /* 搜索模块 */
      .searchWrapper {
        display: flex;
        width: 500px;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 40px;
      }

      .searchWrapper #searchIpt {
        width: 300px;
      }

      /* 表格模块 */
      table th {
        text-align: center;
      }
      .tShow td {
        text-align: center;
      }

      /* 模态框 */
      .modal-body {
        height: 350px !important;
      }
      .modal-table {
        height: 100%;
        margin: 0 auto;
      }
      .modal-table tr {
        margin-bottom: 15px;
      }
      .modal-table tr td input {
        width: 300px;
      }
      /* 分页 */
      .divFooter {
        display: flex;
        align-items: center;
      }
      .divFooter .pageSelect {
        width: 100px;
      }
      .divFooter nav {
        transform: translateY(3px);
        margin: 0 10px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- 顶部欢迎语 -->
      <div class="divTop">
        <h2>欢迎<span class="user"></span>，进入学生信息管理页面</h2>
        &nbsp;|&nbsp;<a href="#" onclick="exit()">退出</a>
      </div>
      <!-- 搜索模块 -->
      <div class="searchWrapper">
        搜索条件：<input
          type="text"
          id="searchIpt"
          placeholder="请输入用户名或登录名"
          class="form-control"
        />
        <button class="btn btn-info" onclick="search()">搜索</button>
        <button
          class="btn btn-primary"
          data-toggle="modal"
          data-target="#myModal"
          onclick="add()"
        >
          新增
        </button>
      </div>
      <!-- 模态框 -->
      <div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="myModalLabel">新增/编辑信息</h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <table class="modal-table">
                <tr>
                  <td>学号：</td>
                  <td><input type="text" class="form-control" id="mSno" /></td>
                </tr>
                <tr>
                  <td>姓名：</td>
                  <td>
                    <input type="text" class="form-control" id="mSname" />
                  </td>
                </tr>
                <tr>
                  <td>年龄：</td>
                  <td><input type="text" class="form-control" id="mSage" /></td>
                </tr>
                <tr>
                  <td>性别：</td>
                  <td><input type="text" class="form-control" id="mSsex" /></td>
                </tr>
                <tr>
                  <td>登录名：</td>
                  <td>
                    <input type="text" class="form-control" id="mloginName" />
                  </td>
                </tr>
                <tr>
                  <td>登录密码：</td>
                  <td>
                    <input type="text" class="form-control" id="mloginPwd" />
                  </td>
                </tr>
              </table>
            </div>
            <div class="modal-footer">
              <button
                id="closeBtn"
                type="button"
                class="btn btn-secondary"
                data-dismiss="modal"
              >
                关闭
              </button>
              <button type="button" class="btn btn-primary" onclick="submit()">
                提交数据
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格模块 -->、
      <table class="table">
        <thead>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>登录名</th>
          <th>登录密码</th>
          <th>操作</th>
        </thead>
        <tbody class="tShow"></tbody>
      </table>
      <!-- 分页 -->
      <div class="divFooter">
        <select
          name=""
          id="sPage"
          class="form-control pageSelect"
          onclick="changePageSize(this)"
        >
          <option value="3">3条/页</option>
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
        </select>
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <!-- <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li> -->
          </ul>
        </nav>
        共
        <div
          class="totalCount form-control"
          style="width: 30px; padding: 0; text-align: center; line-height: 34px"
        ></div>
        条
      </div>
    </div>
  </body>
  <script>
    // 全局变量，用于控制是编辑还是新增
    var idd = -1;
    var pageSize = 3; // 默认每页展示5条
    var allData; // 总数据
    var pageCount = 0; // 总页数
    var currentPage = 1; // 当前页

    // 改变每页展示条数
    function changePageSize(e) {
      console.log($("select"));
      pageSize = $(e).val();
      showLi(); // <li></li>中显示多少页\
      search();
    }
    // 计算共有多少页
    function showLi() {
      pageCount =
        allData.length % pageSize == 0
          ? allData.length / pageSize
          : allData.length / pageSize + 1;
      $(".pagination").html("");
      var content = `<li><a href="#">&laquo;</a></li>`;
      for (var i = 1; i < pageCount; i++) {
        content += `<li><a href="javascript:choosePage(${i})">${i}</a></li>`;
      }
      content += `<li><a hred="#">&raquo</a></li>`;
      $(".pagination").append(content);
    }

    // 选择不同的页数展示不同数据
    function choosePage(i) {
      currentPage = i;
      var startIndex = (currentPage - 1) * pageSize;
      var endIndex =
        currentPage * pageSize > allData.length
          ? allData.length
          : currentPage * pageSize;

      var newData = [];
      for (var i = startIndex; i < endIndex; i++) {
        newData.push(allData[i]);
      }
      showData(newData);
    }

    // 页面加载完成后，执行的代码
    window.onload = function () {
      // 获取已登录用户的姓名
      const user = JSON.parse(localStorage.getItem("loginUser"));
      $(".user").html(user.Sname);
      search();
      // console.log($("#sPage option:selected").val());
      // $("#sPage option:selected").val() = pageSize;
    };

    // 展示数据
    function showData(data) {
      $(".tShow").html("");
      var content = ``;
      for (var i = 0; i < data.length; i++) {
        content += `<tr>
            <td>${data[i].Sno}</td>
            <td>${data[i].Sname}</td>
            <td>${data[i].Sage}</td>
            <td>${data[i].Ssex}</td>
            <td>${data[i].LoginName}</td>
            <td>${data[i].LoginPwd}</td>
            <td>
              <button class="btn btn-info" data-toggle="modal" data-target="#myModal" οnclick="edit(${data[i].Sno})">编辑</button>
              <button class="btn btn-danger" οnclick="del(${data[i].Sno})">删除</button>
            </td>
            </tr>`;
      }
      $(".tShow").html(content);
    }

    // 搜索
    function search() {
      $.ajax({
        url:
          "http://localhost:3000/student/selectByCondtion?name=" +
          $("#searchIpt").val(),
        success: (res) => {
          allData = res;
          // showData(res);
          showLi();
          choosePage(1);
          $(".totalCount").html(allData.length);
        },
      });
    }

    // 删除
    function del(sno) {
      if (confirm("确定删除吗？")) {
        $.ajax({
          url: "http://localhost:3000/student/deleteBySno?sno=" + sno,
          success: (res) => {
            alert(res.msg);
            search();
          },
        });
      }
    }

    // 编辑，数据回显
    function edit(sno) {
      idd = sno;
      $.ajax({
        url: "http://localhost:3000/student/selectBySno?sno=" + idd,
        success: (res) => {
          var obj = res.data[0];
          $("#mSno").val(obj.Sno);
          $("#mSname").val(obj.Sname);
          $("#mSage").val(obj.Sage);
          $("#mSsex").val(obj.Ssex);
          $("#mloginName").val(obj.LoginName);
          $("#mloginPwd").val(obj.LoginPwd);
        },
      });
    }
    // 新增
    function add() {
      idd = -1;
      // 清空输入框
      $("#mSno").val("");
      $("#mSname").val("");
      $("#mSage").val("");
      $("#mSsex").val("");
      $("#mloginName").val("");
      $("#mloginPwd").val("");
    }
    // 提交数据
    function submit() {
      var obj = new Object();
      obj.Sno = $("#mSno").val();
      obj.Sname = $("#mSname").val();
      obj.Sage = $("#mSage").val();
      obj.Ssex = $("#mSsex").val();
      obj.loginName = $("#mloginName").val();
      obj.loginPwd = $("#mloginPwd").val();
      console.log(obj);
      $.ajax({
        url:
          "http://localhost:3000/student/addAndUpdateBySno?sno=" +
          idd +
          "&student=" +
          JSON.stringify(obj),
        success: (res) => {
          alert(res.msg);
          $("#closeBtn").click();
          search();
        },
      });
    }

    // 退出登录
    function exit() {
      localStorage.removeItem("loginUser");
      location.href = "./login.html";
    }
  </script>
</html>