基于springboot的学生管理系统-阿里云开发者社区

实现截图

学生管理

学院管理

公寓管理

个人信息

实现流程

创建数据库=》创建数据表=》配置maven、pom等配置文件=》写pojo类=》写mapper接口和mapper.xml=》写service和serviceImpl=》写controller=》postman或者浏览器测试接口=》写前端页面样式=》用ajax进行接口显示。

所有内容都放在我的资源当中，需要可自取。

实现目的

熟悉整个springboot+html+mybatis的简单业务流程，其中包括增删改查，模糊查询，多表联查，数据库主外键设置，html+css+js的使用、ajax简单业务逻辑使用，前后端数据交互。

具体实现

数据库和数据表脚本

-- --------------------------------------------------------
-- 主机                            :127.0.0.1
-- 服务器版本                         :5.0.67-community-log - MySQL Community Edition (GPL)
-- 服务器操作系统                       :Win32
-- HeidiSQL 版本                   :7.0.0.4278
-- 创建                            :2023-04-23 15:45:59
-- --------------------------------------------------------
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
-- 导出 manager 的数据库结构
DROP DATABASE IF EXISTS `manager`;
CREATE DATABASE IF NOT EXISTS `manager` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `manager`;
-- 导出  表 manager.collage 结构
DROP TABLE IF EXISTS `collage`;
CREATE TABLE IF NOT EXISTS `collage` (
  `cid` int(11) NOT NULL auto_increment,
  `cname` varchar(255) default NULL,
  PRIMARY KEY  (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;
-- 正在导出表  manager.collage 的数据: ~3 rows ((大约))
DELETE FROM `collage`;
/*!40000 ALTER TABLE `collage` DISABLE KEYS */;
INSERT INTO `collage` (`cid`, `cname`) VALUES
  (1, '软件学院'),
  (2, '商学院'),
  (3, '艺术学院');
/*!40000 ALTER TABLE `collage` ENABLE KEYS */;
-- 导出  表 manager.dorm 结构
DROP TABLE IF EXISTS `dorm`;
CREATE TABLE IF NOT EXISTS `dorm` (
  `did` int(11) NOT NULL auto_increment,
  `dname` varchar(255) default NULL,
  PRIMARY KEY  (`did`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
-- 正在导出表  manager.dorm 的数据: ~5 rows ((大约))
DELETE FROM `dorm`;
/*!40000 ALTER TABLE `dorm` DISABLE KEYS */;
INSERT INTO `dorm` (`did`, `dname`) VALUES
  (1, '一公寓'),
  (2, '二公寓'),
  (3, '三公寓'),
  (4, '四公寓'),
  (5, '五公寓');
/*!40000 ALTER TABLE `dorm` ENABLE KEYS */;
-- 导出  表 manager.student 结构
DROP TABLE IF EXISTS `student`;
CREATE TABLE IF NOT EXISTS `student` (
  `id` int(11) NOT NULL auto_increment,
  `sno` int(11) default NULL,
  `name` varchar(255) default NULL,
  `collage` int(11) default NULL,
  `dorm` int(11) default NULL,
  `class1` varchar(255) default NULL,
  PRIMARY KEY  (`id`),
  KEY `collage` (`collage`),
  KEY `dorm` (`dorm`),
  CONSTRAINT `student_ibfk_1` FOREIGN KEY (`collage`) REFERENCES `collage` (`cid`),
  CONSTRAINT `student_ibfk_2` FOREIGN KEY (`dorm`) REFERENCES `dorm` (`did`)
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8;
-- 正在导出表  manager.student 的数据: ~4 rows ((大约))
DELETE FROM `student`;
/*!40000 ALTER TABLE `student` DISABLE KEYS */;
INSERT INTO `student` (`id`, `sno`, `name`, `collage`, `dorm`, `class1`) VALUES
  (1, 2020010201, '萧何', 2, 4, '电商2102'),
  (3, 2020010411, '小刘', 1, 3, '软件2103'),
  (11, 2020010321, '小王', 1, 4, '软件2104'),
  (14, 2020010425, '张飞', 1, 3, '软件2004');
/*!40000 ALTER TABLE `student` ENABLE KEYS */;
-- 导出  表 manager.user 结构
DROP TABLE IF EXISTS `user`;
CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `pwd` varchar(255) default NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;
-- 正在导出表  manager.user 的数据: ~12 rows ((大约))
DELETE FROM `user`;
/*!40000 ALTER TABLE `user` DISABLE KEYS */;
INSERT INTO `user` (`id`, `name`, `pwd`) VALUES
  (1, '1', '1'),
  (2, '2', '4'),
  (5, '刘鹏', NULL),
  (6, '刘', '123456'),
  (7, '3', '1'),
  (8, '4', '1'),
  (9, '5', '1'),
  (10, '12', '1'),
  (11, '', '1'),
  (12, '23234', '23442'),
  (13, '123', '1'),
  (14, '1111', '2'),
  (15, '123333', '123');
/*!40000 ALTER TABLE `user` ENABLE KEYS */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.9</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.student</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

application.properties和application.yml配置

放的位置：

application.properties

spring.application.name=springboot-w
server.port=8080
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/manager?characterEncoding=utf-8&&useSSL=false
spring.datasource.username=root
spring.datasource.password=x5
mybatis.mapper-locations=classpath:mapper/*.xml

application.yml

thymeleaf:
  prefix:
    classpath: /templates   # 访问template下的html文件需要配置模板，映射

pojo实体类

目录结构如下

一共四个实体类：分别为学院类，公寓类，学生类，管理员类

collage(学院类)

package com.student.pojo;
import lombok.Data;
@Data
public class collage {
    private Integer cid;
    private String cname;
}

dorm（公寓类）

package com.student.pojo;
import lombok.Data;
@Data
public class dorm {
    private Integer did;
    private String dname;
}

student(学生类)

package com.student.pojo;
import lombok.Data;
@Data
public class student {
    private Integer id;
    private String name;
    private int sno;
    private int collage;
    private int dorm;
    private String class1;
    private String cname;
    private String dname;
}

user(管理员类)

package com.student.pojo;
import lombok.Data;
@Data
public class user {
    private Integer id;
    private String name;
}

mapper接口以及mapper.xml

一共四个接口和xml，分别作为学院接口，公寓接口，登陆注册接口以及学生接口。

collagemapper(学院接口)

package com.student.mapper;
import com.student.pojo.collage;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface collagemapper {
    public List<collage> queryc();
    public boolean addc(int cid,String cname);
    public boolean updc(collage c);
    public boolean delc(int cid);
    public List<collage> qeuryByIdc(String cname);
}

cmapper.xml(学院.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.student.mapper.collagemapper">
    <insert id="addc">
        insert into collage(cid,cname) values(#{cid},#{cname})
    </insert>
    <update id="updc">
        update collage set cid=#{cid},cname=#{cname} where cid=#{cid}
    </update>
    <delete id="delc">
        delete from collage where cid=#{cid}
    </delete>
    <select id="queryc" resultType="com.student.pojo.collage">
        select * from collage
    </select>
    <select id="qeuryByIdc" resultType="com.student.pojo.collage">
        select * from collage where cname=#{cname}
    </select>
</mapper>

dormmapper(公寓接口)

package com.student.mapper;
import com.student.pojo.dorm;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface dormmapper {
    List<dorm> queryd();
    boolean addd(dorm d);
    boolean updd(dorm d);
    boolean deld(int id);
    List<dorm> queryByIdd(String dname);
}

dmapper.xml(公寓.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.student.mapper.dormmapper">
    <insert id="addd">
        insert into dorm(did,dname) values(#{did},#{dname})
    </insert>
    <update id="updd">
        update dorm set did=#{did},dname=#{dname} where did=#{did}
    </update>
    <delete id="deld">
        delete from dorm where did=#{did}
    </delete>
    <select id="queryd" resultType="com.student.pojo.dorm">
        select * from dorm;
    </select>
    <select id="queryByIdd" resultType="com.student.pojo.dorm">
        select * from dorm where dname=#{dname}
    </select>
</mapper>

loginmapper(登陆接口)

package com.student.mapper;
import com.student.pojo.user;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface loginmapper {
    user login(String name,String pwd);
    boolean register(String name,String pwd);
    boolean updu(String name,String pwd);
}

loginmapper.xml(登陆.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.student.mapper.loginmapper">
    <insert id="register">
        insert into user(name,pwd) values(#{name},#{pwd})
    </insert>
    <update id="updu">
        update user set name=#{name},pwd=#{pwd} where name=#{name}
    </update>
    <select id="login" resultType="com.student.pojo.user">
        select * from user where name=#{name} and pwd=#{pwd}
    </select>
</mapper>

stumapper(学生接口)

package com.student.mapper;
import com.student.pojo.student;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface stumapper {
    public List<student> querystu();
    public boolean addstu(student stu);
    public boolean updstu(student stu);
    public boolean delstu(int id);
    public student querystuById(int id);
}

mapper.xml(学生.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.student.mapper.stumapper">
    <insert id="addstu" parameterType="com.student.pojo.student">
        INSERT INTO student(id,sno,name,collage,dorm,class1) VALUES (#{id},#{sno},#{name},#{collage},#{dorm},#{class1})
    </insert>
    <update id="updstu">
        update student set id=#{id},name=#{name},sno=#{sno},collage=#{collage},dorm=#{dorm},class1=#{class1} where id=#{id}
    </update>
    <delete id="delstu">
        delete from student where id=#{id}
    </delete>
    <select id="querystu" resultType="com.student.pojo.student">
        select student.id,student.sno,student.name,collage.cname,dorm.dname,student.class1 from student join collage on student.collage=collage.cid join dorm on student.dorm=dorm.did
    </select>
    <select id="querystuById" resultType="com.student.pojo.student">
 select student.id,student.sno,student.name,collage.cname,dorm.dname,student.class1 from student join collage on student.collage=collage.cid join dorm on student.dorm=dorm.did
 where student.id=#{id}
    </select>
    <select id="login" resultType="java.lang.String">
        select * from user
    </select>
</mapper>

service和serviceimpl实现类

service和serviceimpl实现类我就各自写一个。

service

package com.student.service;
import com.student.pojo.collage;
import com.student.pojo.dorm;
import com.student.pojo.student;
import com.student.pojo.user;
import java.util.List;
public interface service {
    List<student> querystu();
    boolean addstu(student stu);
    boolean updstu(student stu);
    boolean delstu(int id);
    student querystuById(int id);
    user login(String name,String pwd);
    boolean register(String name,String pwd);
    List<collage> queryc();
    boolean addc(int cid,String cname);
    boolean updc(collage c);
    boolean delc(int id);
    List<collage> queryByIdc(String name);
    List<dorm> queryd();
    boolean updu(String name,String pwd);
    boolean addd(dorm d);
    boolean updd(dorm d);
    boolean deld(int id);
    List<dorm> queryByIdd(String dname);
}

serviceImpl

package com.student.service;
import com.student.mapper.collagemapper;
import com.student.mapper.dormmapper;
import com.student.mapper.loginmapper;
import com.student.mapper.stumapper;
import com.student.pojo.collage;
import com.student.pojo.dorm;
import com.student.pojo.student;
import com.student.pojo.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@SuppressWarnings("all")
@Service
public class serviceImpl implements service {
    @Autowired
    stumapper m;
    @Autowired
    loginmapper lm;
    @Autowired
    collagemapper cm;
    @Autowired
    dormmapper dm;
    @Override
    public List<student> querystu()
    {
        return m.querystu();
    }
    @Override
    public boolean addstu(student stu){
        return m.addstu(stu);
    }
    @Override
    public boolean updstu(student stu)
    {
        return m.updstu(stu);
    }
    @Override
    public boolean delstu(int id)
    {
        return m.delstu(id);
    }
    @Override
    public student querystuById(int id)
    {
        return m.querystuById(id);
    }
    @Override
    public user login(String name,String pwd)
    {
        return lm.login(name,pwd);
    }
    @Override
    public boolean register(String name,String pwd)
    {
        return lm.register(name,pwd);
    }
    @Override
    public List<collage> queryc()
    {
        return cm.queryc();
    }
    @Override
    public boolean addc(int cid,String cname){
        return cm.addc(cid,cname);
    }
    @Override
    public boolean updc(collage c)
    {
        return cm.updc(c);
    }
    @Override
    public boolean delc(int id)
    {
        return cm.delc(id);
    }
    @Override
    public List<collage> queryByIdc(String cname)
    {
        return cm.qeuryByIdc(cname);
    }
    @Override
    public List<dorm> queryd(){return dm.queryd();}
    @Override
    public boolean updu(String name,String pwd){return lm.updu(name,pwd);}
    @Override
    public boolean addd(dorm d){return dm.addd(d);}
    @Override
    public boolean updd(dorm d){return dm.updd(d);}
    @Override
    public boolean deld(int id){return dm.deld(id);}
    @Override
    public List<dorm> queryByIdd(String dname){return dm.queryByIdd(dname);}
}

Controller控制层

controller层我写两个，一个@RestController是用来装接口的，另外一个@Controller用来装视图。

controller(接口)

package com.student.controller;
import com.student.pojo.collage;
import com.student.pojo.dorm;
import com.student.pojo.student;
import com.student.pojo.user;
import com.student.service.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@RestController
public class controller {
    @Autowired
    service s;
    @RequestMapping("querystu")
    public List<student> querystu()
    {
        return s.querystu();
    }
    @RequestMapping("addstu")
    public boolean addstu(student stu)
    {
        return s.addstu(stu);
    }
    @RequestMapping("updstu")
    public boolean updstu(student stu)
    {
        return s.updstu(stu);
    }
    @RequestMapping("delstu")
    public boolean delstu(int id)
    {
        return s.delstu(id);
    }
    @RequestMapping("querystuById")
    public Object querystuById(int id)
    {
        student stu=s.querystuById(id);
        if(stu==null)
        {
            return false;
        }
        else{
            return s.querystuById(id);
        }
    }
    @RequestMapping("login")
    public String login(String name, String pwd)
    {
        user u=s.login(name,pwd);
        if(u!=null)
        {
            return "true";
        }
        else
        {
            return "false";
        }
    }
    @RequestMapping("register")
    public Object registers(String name,String pwd)
    {
        user u=s.login(name,pwd);
        if(u!=null||(name==""||pwd==""))
        {
            return false;
        }
        else {
            boolean T= s.register(name,pwd);
            return T;
        }
    }
    @RequestMapping("queryc")
    public List<collage> queryc(){return s.queryc();}
    @RequestMapping("addc")
    public boolean addc(int cid,String cname)
    {return s.addc(cid,cname);}
    @RequestMapping("updc")
    public boolean updc(collage c)
    {
        return s.updc(c);
    }
    @RequestMapping("delc")
    public boolean delc(int cid)
    {return s.delc(cid);}
    @RequestMapping("queryByIdc")
    public List<collage> queryByIdc(String cname){return s.queryByIdc(cname);}
    @RequestMapping("queryd")
    public List<dorm> queryd(){return s.queryd();}
    @RequestMapping("updu")
    public boolean updu(String name,String pwd){return s.updu(name,pwd);}
    @RequestMapping("addd")
    public boolean addd(dorm d){return s.addd(d);}
    @RequestMapping("updd")
    public boolean updd(dorm d){return s.updd(d);}
    @RequestMapping("deld")
    public boolean deld(int did){return s.deld(did);}
    @RequestMapping("queryByIdd")
    public List<dorm> queryByIdd(String dname)
    {return s.queryByIdd(dname);}
}

Controller(视图)

package com.student.controller;
import com.student.pojo.user;
import com.student.service.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class Controllers {
    @Autowired
    service s;
    @RequestMapping("/")
    public String login(){
        return "student";
    }
    @RequestMapping("/querystu.html")
    public String query(){
        return "querystu";
    }
    @RequestMapping("/collage.html")
    public String collage(){
        return "collage";
    }
    @RequestMapping("/dorm.html")
    public String dorm(){
        return "dorm";
    }
    @RequestMapping("/user.html")
    public String user(){
        return "user";
    }
}

前端样式以及数据交互

前端

一共五个html页面，分别为student(登陆)、querystu(首页以及学生管理)、collage（学院管理）、dorm（公寓管理）、user（个人信息）

student

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 400px;
            margin: 0 auto 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        .tabs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px;
            border-radius: 3px;
            border: none;
            background-color: #eee;
            color: #333;
            cursor: pointer;
        }
        .tab.active {
            background-color: #007bff;
            color: #fff;
        }
        form {
            margin-top: 20px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            color: #666;
        }
        input[type="text"], input[type="password"] {
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #ddd;
            width: 100%;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #0069d9;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>学生管理系统</h1>
    <div class="tabs">
        <button class="tab active"  onclick="showLogin()">登录</button>
        <button class="tab" onclick="showSignup()">注册</button>
    </div>
    <form id="loginForm" action="">
        <label>用户名：</label>
        <input type="text" id="loginUsername" name="username" value="">
        <label>密码：</label>
        <input type="password" id="loginPassword" name="password" value="">
        <div onclick="login(event)">
            <button type="submit">登录</button>
        </div>
    </form>
    <form id="signupForm" action="" style="display: none;">
        <label for="signupUsername">用户名：</label>
        <input type="text" id="signupUsername" name="username">
        <label>密码：</label>
        <input type="password" id="signupPassword" name="password">
        <button type="submit" onclick="register(event)">注册</button>
    </form>
</div>
<script>
    function login(event)
    {
        event.preventDefault();
        const name=document.getElementById('loginUsername').value;
        const pwd=document.getElementById('loginPassword').value;
        console.log(name+pwd)
        $.ajax({
            url:`http://localhost:8080/login?name=${name}&pwd=${pwd}`,
            method:"GET",
            success(res){
                if(res=="true")
                {
                    localStorage.setItem('username', name);
                    localStorage.setItem('password', pwd);
                    window.location.href="http://localhost:8080/querystu.html";
                    console.log(res);
                }
                else
                {
                    alert("用户名或密码错误")
                    window.open("/", "_blank");
                }
            }
        })
    }
    function register(event)
    {
        event.preventDefault();
        const name=document.getElementById('signupUsername').value;
        const pwd=document.getElementById('signupPassword').value;
        $.ajax({
            url: `http://localhost:8080/register?name=${name}&pwd=${pwd}`,
            method:"POST",
            success(res) {
                console.log(res);
                if(res==true)
                {
                    alert("注册成功");
                    window.open("/", "_blank");
                }
                else if(name==""||pwd==""){
                    alert("用户名或密码不能被空");
                }
                else{
                    alert("用户名被占用");
                }
            }
        })
    }
    const loginForm = document.getElementById('loginForm');
    const signupForm = document.getElementById('signupForm');
    function showLogin() {
        loginForm.style.display = 'block';
        signupForm.style.display = 'none';
        document.querySelector('.tabs .active').classList.remove('active');
        document.querySelectorAll('.tabs button')[0].classList.add('active');
    }
    function showSignup() {
        loginForm.style.display = 'none';
        signupForm.style.display = 'block';
        document.querySelector('.tabs .active').classList.remove('active');
        document.querySelectorAll('.tabs button')[1].classList.add('active');
    }
</script>
</body>
</html>

querystu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f5f5f5;
        }
        tr:nth-child(even) td {
            background-color: #fafafa;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        input[type="text"] {
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
            margin-right: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group button {
            margin-left: 0;
        }
        nav {
            position: absolute;
            left:8px;
            top:95px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width:150px;
            height: 200px; /* 设置高度 */
            background-color: #6b6b6b;
        }
        nav a {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            border-top: 1px solid #ccc;
            font-size: 16px;
            color:white;
        }
        nav a:first-child {
            border-top: none;
        }
        nav a:hover {
            background-color: #007bff;
            color: white;
        }
        .popup{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup1{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }
        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }
        select option {
            color: #555;
        }
    </style>
</head>
<body>
<div>
    <div>
        <h2 href="#" style="display: flex; justify-content: space-between; /* 让标题和按钮之间保持均匀间距 */ align-items: center; /* 垂直居中 */ background: #333333; color: white;height: 75px; line-height: 50px; padding-left: 20px;">学生管理系统 <p style="position: fixed;right:120px;font-size:15px;">管理员：<text id="t">123</text></p> <button onclick="exits()" style="float:right;margin-right:20px;">退出登录</button></h2>
    </div>
    <nav>
        <a href="querystu.html">学生管理</a>
        <a href="collage.html" >学院管理</a>
        <a href="dorm.html" >公寓管理</a>
        <a href="user.html">个人信息</a>
    </nav>
</div>
<div class="container">
    <h3 style="text-align: center">学生管理</h3>
    <div class="form-group">
        <input type="text" value="" placeholder="请输入查询id" id="InputById"/>
        <button onclick="query()">搜索</button>
        <button onclick="btn()" style="float: right;margin-left:10px;">刷新</button>
        <button onclick="addopen()" style="float: right;">添加</button>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <form>
            <label>学号：</label>
            <input type="text" id="addsno" value="" placeholder="请输入学号"/><br><br>
            <label>姓名：</label>
            <input type="text" id="addname" value="" placeholder="请输入姓名"/><br><br>
            <label>学院：</label>
            <select id="addc">
                <option value="1" selected>软件学院</option>
                <option value="2">商学院</option>
                <option value="3">艺术学院</option>
            </select><br><br>
            <label>公寓：</label>
            <select id="addd">
                <option value="1" selected>一公寓</option>
                <option value="2">二公寓</option>
                <option value="3">三公寓</option>
                <option value="4">四公寓</option>
                <option value="5">五公寓</option>
            </select><br><br>
            <label>班级：</label>
            <input type="text" id="addclass" value="" placeholder="请输入班级"/><br><br>
            <button onclick="addclose()">关闭</button>
            <button type="submit" onclick="add(event)">提交</button>
        </form>
    </div>
    <div class="popup1" id="popupp">
        <form>
            <label>序号：</label>
            <input type="text" id="updid" value="" placeholder="请输入id" disabled/><br><br>
            <label>学号：</label>
            <input type="text" id="updsno" value="" placeholder="请输入学号" disabled/><br><br>
            <label>姓名：</label>
            <input type="text" id="updname" value="" placeholder="请输入姓名"/><br><br>
            <label>学院：</label>
            <select id="updc">
                <option value="1" selected>软件学院</option>
                <option value="2">商学院</option>
                <option value="3">艺术学院</option>
            </select><br><br>
            <label>公寓：</label>
            <select id="updd">
                <option value="1" selected>一公寓</option>
                <option value="2">二公寓</option>
                <option value="3">三公寓</option>
                <option value="4">四公寓</option>
                <option value="5">五公寓</option>
            </select><br><br>
            <label>班级：</label>
            <input type="text" id="updclass" value="" placeholder="请输入班级"/><br><br>
            <button onclick="upd(event)">提交</button>
            <button onclick="addclose()">关闭</button>
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <th>学生Id</th>
            <th>学号</th>
            <th>学生名称</th>
            <th>所在学院</th>
            <th>所在公寓</th>
            <th>所在班级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tt">
        </tbody>
    </table>
</div>
<script>
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    document.getElementById('t').textContent=username;
    console.log("-------------------------");
    console.log(username+"-"+password);
    console.log("---------------------");
    queryData()
    function btn()
    {
        window.open("/querystu.html", "_blank");
    }
    // 在这里放置你原来的 JS 代码
    function queryData() {
        // 发送 AJAX 请求
        $.ajax({
            url: 'http://localhost:8080/querystu',
            type: 'GET',
            dataType: 'json',
            success(res){
                var html='';
                for(var i =0;i<res.length;i++)
                {
                    html+='<tr><td>'+res[i].id+'</td>'+'<td>'+res[i].sno+'</td>'+'<td>'+res[i].name+'</td>'+'<td>'+res[i].cname+'</td>' +'<td>'+res[i].dname+'</td>'+'<td>'+res[i].class1+'</td>'+'<td><button type="submit" style="margin-right:10px;" data-id="'+res[i].id+'" data-sno="'+res[i].sno+'" onclick="updopen(event)">修改</button><button onclick="del('+res[i].id+')">删除</button></td></tr>';
                }
                $('#tt').html(html);
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function add(event){
        // event.preventDefault();
        const sno=document.getElementById('addsno').value;
        const name=document.getElementById('addname').value;
        const collage=document.getElementById('addc').value;
        const dorm=document.getElementById('addd').value;
        const class1=document.getElementById('addclass').value;
        $.ajax({
            url: `http://localhost:8080/addstu?sno=${sno}&name=${name}&collage=${collage}&dorm=${dorm}&class1=${class1}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
            document.getElementById('addsno').value='',
            document.getElementById('addname').value='';
            document.getElementById('addc').value="",
            document.getElementById('addd').value='',
            document.getElementById('dorm').value=''
    }
    function addopen(){
        popup.style.display='block';
        overlay.style.display='block';
    }
    function addclose(){
        popup.style.display='none';
        overlay.style.display='none';
    }
    function updopen(event){
        let button=event.target;
        let id=button.getAttribute("data-id");
        let sno=button.getAttribute("data-sno");
        document.getElementById('updid').value=id;
        document.getElementById('updsno').value=sno;
        popupp.style.display='block';
        overlay.style.display='block';
    }
    function query(){
        const id=document.getElementById('InputById').value;
        if(id=="")
        {
            queryData()
        }
        else{
            $.ajax({
                url: `http://localhost:8080/querystuById?id=${id}`,
                type: 'get',
                dataType: 'json',
                success: function(res) {
                    if(res==false)
                    {
                        alert("没有该ID")
                    }
                    else{
                        console.log(res);
                        let html='';
                        html+='<tr><td>'+res.id+'</td>'+'<td>'+res.sno+'</td>'+'<td>'+res.name+'</td>'+'<td>'+res.cname+'</td>' +'<td>'+res.dname+'</td>'+'<td>'+res.class1+'</td>'+'<td><button type="submit" style="margin-right:10px;" data-id="'+res.id+'" data-sno="'+res.sno+'" onclick="updopen(event)">修改</button><button onclick="del('+res.id+')">删除</button></td></tr>';
                        console.log(html);
                        $('#tt').html(html);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error); // 处理错误情况
                }
            });
        }
    }
    function upd(event){
        // event.preventDefault();
        const id=document.getElementById('updid').value;
        const sno=document.getElementById('updsno').value;
        const name=document.getElementById('updname').value;
        const collage=document.getElementById('updc').value;
        const dorm=document.getElementById('updd').value;
        const class1=document.getElementById('updclass').value;
        $.ajax({
            url: `http://localhost:8080/updstu?id=${id}&sno=${sno}&name=${name}&collage=${collage}&dorm=${dorm}&class1=${class1}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
        document.getElementById('updid').value='',
            document.getElementById('updsno').value='',
            document.getElementById('updname').value='',
            document.getElementById('updc').value='',
            document.getElementById('updd').value='',
            document.getElementById('updclass').value=''
    }
    function del(Id){
        const id=Id;
        $.ajax({
            url: `http://localhost:8080/delstu?id=${id}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function exits()
    {
        window.open("/", "_blank");
    }
</script>
</body>
</html>

collage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f5f5f5;
        }
        tr:nth-child(even) td {
            background-color: #fafafa;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        input[type="text"] {
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
            margin-right: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group button {
            margin-left: 0;
        }
        nav {
            position: absolute;
            left:8px;
            top:95px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width:150px;
            height: 200px; /* 设置高度 */
            background-color: #6b6b6b;
        }
        nav a {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            border-top: 1px solid #ccc;
            font-size: 16px;
            color:white;
        }
        nav a:first-child {
            border-top: none;
        }
        nav a:hover {
            background-color: #007bff;
            color: white;
        }
        .popup{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup1{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }
        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }
        select option {
            color: #555;
        }
    </style>
</head>
<body>
<div>
    <h2 href="#" style="display: flex; justify-content: space-between; /* 让标题和按钮之间保持均匀间距 */ align-items: center; /* 垂直居中 */ background: #333333; color: white;height: 75px; line-height: 50px; padding-left: 20px;">学生管理系统 <p style="position: fixed;right:120px;font-size:15px;">管理员：<text id="t">123</text></p> <button onclick="exits()" style="float:right;margin-right:20px;">退出登录</button></h2>
    <nav>
        <a href="querystu.html">学生管理</a>
        <a href="collage.html" >学院管理</a>
        <a href="dorm.html" >公寓管理</a>
        <a href="user.html">个人信息</a>
    </nav>
</div>
<div class="container">
    <h3 style="text-align: center">学院管理</h3>
    <div class="form-group">
        <input type="text" value="" placeholder="请输入学院名" id="InputById"/>
        <button onclick="query()">搜索</button>
        <button onclick="btn()" style="float: right;margin-left:10px;">刷新</button>
        <button onclick="addopen()" style="float: right;">添加</button>
        <!--        <button onclick="updopen()">修改</button>-->
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <form>
            <label>学院ID：</label>
            <input type="text" id="addcid" value="" placeholder="请输入学院ID"/><br><br>
            <label>学院名：</label>
            <input type="text" id="addcname" value="" placeholder="请输入学院名"/><br><br>
            <button onclick="addclose()">关闭</button>
            <button type="submit" onclick="add()">提交</button>
        </form>
    </div>
    <div class="popup1" id="popupp">
        <form>
            <label>学院ID：</label>
            <input type="text" id="upcid" value="" placeholder="请输入学院id" disabled/><br><br>
            <label>学院名：</label>
            <input type="text" id="updcname" value="" placeholder="请输入学院名"/><br><br>
            <button onclick="upd()">提交</button>
            <button onclick="addclose()">关闭</button>
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <th>学院ID</th>
            <th>学院名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tt">
        </tbody>
    </table>
</div>
<script>
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    document.getElementById('t').textContent=username;
    console.log(username+password);
    queryData()
    function btn()
    {
        window.open("/collage.html", "_blank");
    }
    // 在这里放置你原来的 JS 代码
    function queryData() {
        // 发送 AJAX 请求
        $.ajax({
            url: 'http://localhost:8080/queryc',
            type: 'GET',
            dataType: 'json',
            success(res){
                var html='';
                for(var i =0;i<res.length;i++)
                {
                    html+='<tr><td>'+res[i].cid+'</td><td>'+res[i].cname+'</td>+\'<td><button type="submit" style="margin-right:10px;" data-id="'+res[i].cid+'" onclick="updopen(event)">修改</button><button onclick="del('+res[i].cid+')">删除</button></tr>';
                }
                $('#tt').html(html);
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function add(){
        const cid=document.getElementById('addcid').value;
        const cname=document.getElementById('addcname').value;
        $.ajax({
            url: `http://localhost:8080/addc?cid=${cid}&cname=${cname}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
            document.getElementById('addcid').value='',
            document.getElementById('addcname').value='';
    }
    function addopen(){
        popup.style.display='block';
        overlay.style.display='block';
    }
    function addclose(){
        popup.style.display='none';
        overlay.style.display='none';
    }
    function updopen(event){
        let button=event.target;
        let cid=button.getAttribute("data-id");
        document.getElementById('upcid').value=cid;
        popupp.style.display='block';
        overlay.style.display='block';
    }
    function query(){
        const cname=document.getElementById('InputById').value;
        console.log(cname);
        if(cname=="")
        {
            queryData()
        }
        else{
            $.ajax({
                url: `http://localhost:8080/queryByIdc?cname=${cname}`,
                type: 'get',
                dataType: 'json',
                success: function(res) {
                    if(res==false)
                    {
                        alert("没有该ID")
                    }
                    else{
                        console.log(res)
                        let html='';
                        for(let i=0;i<res.length;i++)
                        {
                            html+='<tr><td>'+res[i].cid+'</td><td>'+res[i].cname+'</td>+\'<td><button type="submit" style="margin-right:10px;" data-id="'+res[i].cid+'" onclick="updopen(event)">修改</button><button onclick="del('+res[i].cid+')">删除</button></tr>';
                        }
                        console.log(html);
                        $('#tt').html(html);
                    }
                    // queryData()
                },
                error: function(xhr, status, error) {
                    console.error(error); // 处理错误情况
                }
            });
        }
    }
    function upd(event){
        // event.preventDefault();
        const cid=document.getElementById('upcid').value;
        const cname=document.getElementById('updcname').value;
        $.ajax({
            url: `http://localhost:8080/updc?cid=${cid}&cname=${cname}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
        document.getElementById('updcid').value='',
            document.getElementById('updcname').value='';
    }
    function del(Id){
        const cid=Id;
        console.log(cid);
        $.ajax({
            url: `http://localhost:8080/delc?cid=${cid}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function exits()
    {
        window.open("/", "_blank");
    }
</script>
</body>
</html>

dorm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f5f5f5;
        }
        tr:nth-child(even) td {
            background-color: #fafafa;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        input[type="text"] {
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
            margin-right: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group button {
            margin-left: 0;
        }
        nav {
            position: absolute;
            left:8px;
            top:95px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width:150px;
            height: 200px; /* 设置高度 */
            background-color: #6b6b6b;
        }
        nav a {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            border-top: 1px solid #ccc;
            font-size: 16px;
            color:white;
        }
        nav a:first-child {
            border-top: none;
        }
        nav a:hover {
            background-color: #007bff;
            color: white;
        }
        .popup{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup1{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }
        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }
        select option {
            color: #555;
        }
    </style>
</head>
<body>
<div>
    <h2 href="#" style="display: flex; justify-content: space-between; /* 让标题和按钮之间保持均匀间距 */ align-items: center; /* 垂直居中 */ background: #333333; color: white;height: 75px; line-height: 50px; padding-left: 20px;">学生管理系统 <p style="position: fixed;right:120px;font-size:15px;">管理员：<text id="t">123</text></p> <button onclick="exits()" style="float:right;margin-right:20px;">退出登录</button></h2>
    <nav>
        <a href="querystu.html">学生管理</a>
        <a href="collage.html" >学院管理</a>
        <a href="dorm.html" >公寓管理</a>
        <a href="user.html">个人信息</a>
    </nav>
</div>
<div class="container">
    <h3 style="text-align: center">公寓管理</h3>
    <div class="form-group">
        <input type="text" value="" placeholder="请输入公寓名" id="InputById"/>
        <button onclick="query()">搜索</button>
        <button onclick="btn()" style="float: right;margin-left:10px;">刷新</button>
        <button onclick="addopen()" style="float: right;">添加</button>
        <!--        <button onclick="updopen()">修改</button>-->
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <form>
            <label>公寓ID：</label>
            <input type="text" id="addcid" value="" placeholder="请输入公寓ID"/><br><br>
            <label>公寓名：</label>
            <input type="text" id="addcname" value="" placeholder="请输入公寓名"/><br><br>
            <button onclick="addclose()">关闭</button>
            <button type="submit" onclick="add()">提交</button>
        </form>
    </div>
    <div class="popup1" id="popupp">
        <form>
            <label>公寓ID：</label>
            <input type="text" id="upcid" value="" placeholder="请输入公寓ID" disabled/><br><br>
            <label>公寓名：</label>
            <input type="text" id="updcname" value="" placeholder="请输入公寓名"/><br><br>
            <button onclick="upd()">提交</button>
            <button onclick="addclose()">关闭</button>
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <th>公寓ID</th>
            <th>公寓名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tt">
        </tbody>
    </table>
</div>
<script>
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    document.getElementById('t').textContent=username;
    console.log(username+password);
    queryData()
    function btn()
    {
        window.open("/dorm.html", "_blank");
    }
    // 在这里放置你原来的 JS 代码
    function queryData() {
        // 发送 AJAX 请求
        $.ajax({
            url: 'http://localhost:8080/queryd',
            type: 'GET',
            dataType: 'json',
            success(res){
                var html='';
                for(var i =0;i<res.length;i++)
                {
                    html+='<tr><td>'+res[i].did+'</td><td>'+res[i].dname+'</td>+\'<td><button type="submit" style="margin-right:10px;" data-id="'+res[i].did+'" onclick="updopen(event)">修改</button><button onclick="del('+res[i].did+')">删除</button></tr>';
                }
                $('#tt').html(html);
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function add(){
        const cid=document.getElementById('addcid').value;
        const cname=document.getElementById('addcname').value;
        $.ajax({
            url: `http://localhost:8080/addd?did=${cid}&dname=${cname}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
        document.getElementById('addcid').value='',
            document.getElementById('addcname').value='';
    }
    function addopen(){
        popup.style.display='block';
        overlay.style.display='block';
    }
    function addclose(){
        popup.style.display='none';
        overlay.style.display='none';
    }
    function updopen(event){
        let button=event.target;
        let cid=button.getAttribute("data-id");
        document.getElementById('upcid').value=cid;
        popupp.style.display='block';
        overlay.style.display='block';
    }
    function query(){
        const dname=document.getElementById('InputById').value;
        console.log(dname);
        if(dname=="")
        {
            queryData()
        }
        else{
            $.ajax({
                url: `http://localhost:8080/queryByIdd?dname=${dname}`,
                type: 'get',
                dataType: 'json',
                success: function(res) {
                    if(res==false)
                    {
                        alert("没有该ID")
                    }
                    else{
                        console.log(res)
                        let html='';
                        for(let i=0;i<res.length;i++)
                        {
                            html+='<tr><td>'+res[i].did+'</td><td>'+res[i].dname+'</td>+\'<td><button type="submit" style="margin-right:10px;" data-id="'+res[i].cid+'" onclick="updopen(event)">修改</button><button onclick="del('+res[i].cid+')">删除</button></tr>';
                        }
                        console.log(html);
                        $('#tt').html(html);
                    }
                    // queryData()
                },
                error: function(xhr, status, error) {
                    console.error(error); // 处理错误情况
                }
            });
        }
    }
    function upd(event){
        // event.preventDefault();
        const cid=document.getElementById('upcid').value;
        const cname=document.getElementById('updcname').value;
        $.ajax({
            url: `http://localhost:8080/updd?did=${cid}&dname=${cname}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
        document.getElementById('updcid').value='',
            document.getElementById('updcname').value='';
    }
    function del(Id){
        const cid=Id;
        console.log(cid);
        $.ajax({
            url: `http://localhost:8080/deld?did=${cid}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                console.log(res); // 将响应数据输出到控制台
                queryData()
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
    }
    function exits()
    {
        window.open("/", "_blank");
    }
</script>
</body>
</html>
<!DOCTYPE html>

user

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f5f5f5;
        }
        tr:nth-child(even) td {
            background-color: #fafafa;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        input[type="text"] {
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
            margin-right: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group button {
            margin-left: 0;
        }
        nav {
            position: absolute;
            left:8px;
            top:95px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width:150px;
            height: 200px; /* 设置高度 */
            background-color: #6b6b6b;
        }
        nav a {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            border-top: 1px solid #ccc;
            font-size: 16px;
            color:white;
        }
        nav a:first-child {
            border-top: none;
        }
        nav a:hover {
            background-color: #007bff;
            color: white;
        }
        .popup{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup1{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }
        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }
        select option {
            color: #555;
        }
    </style>
</head>
<body>
<div>
    <h2 href="#" style="display: flex; justify-content: space-between; /* 让标题和按钮之间保持均匀间距 */ align-items: center; /* 垂直居中 */ background: #333333; color: white;height: 75px; line-height: 50px; padding-left: 20px;">学生管理系统 <p style="position: fixed;right:120px;font-size:15px;">管理员：<text id="t">123</text></p> <button onclick="exits()" style="float:right;margin-right:20px;">退出登录</button></h2>
    <nav>
        <a href="querystu.html">学生管理</a>
        <a href="collage.html" >学院管理</a>
        <a href="dorm.html" >公寓管理</a>
        <a href="user.html">个人信息</a>
    </nav>
</div>
<div class="container">
    <h3 style="text-align: center">个人信息</h3>
    <div class="form-group">
        <button onclick="btn()" style="float: right;margin-left:10px;margin-bottom:10px;">刷新</button>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup1" id="popupp">
        <form>
            <label>管理员名：</label>
            <input type="text" id="upcid" value="" placeholder="请输入用户名" disabled/><br><br>
            <label>管理员密码：</label>
            <input type="text" id="updcname" value="" placeholder="请输入密码"/><br><br>
            <button onclick="upd(event)">提交</button>
            <button onclick="addclose()">关闭</button>
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <th>管理员名</th>
            <th>管理员密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tt">
        </tbody>
    </table>
</div>
<script>
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    document.getElementById('t').textContent=username;
    queryData()
    function btn()
    {
        window.open("/user.html", "_blank");
    }
    // 在这里放置你原来的 JS 代码
    function queryData() {
        var html='';
        html+='<tr><td>'+username+'</td><td>'+password+'</td>+\'<td><button type="submit" style="margin-right:10px;" data-id="'+username+'" onclick="updopen(event)">修改</button></tr>';
        $('#tt').html(html);
        console.log(html);
    }
    function updopen(event){
        let button=event.target;
        let cid=button.getAttribute("data-id");
        document.getElementById('upcid').value=cid;
        popupp.style.display='block';
        overlay.style.display='block';
    }
    function upd(event){
        event.preventDefault();
        let name=document.getElementById('upcid').value;
        let pwd=document.getElementById('updcname').value;
        $.ajax({
            url: `http://localhost:8080/updu?name=${name}&pwd=${pwd}`,
            type: 'post',
            dataType: 'json',
            success: function(res) {
                alert("密码已修改，请重新登录");
                window.open("/", "_blank");
            },
            error: function(xhr, status, error) {
                console.error(error); // 处理错误情况
            }
        });
        // document.getElementById('updcid').value=null;
        // document.getElementById('updcname').value=null;
        popup.style.display='none';
        overlay.style.display='none';
    }
    function exits()
    {
        window.open("/", "_blank");
    }
</script>
</body>
</html>

以上的代码都放在templa文件夹中。

注意事项

数据脚本导入注：

我的脚本如果不能你的mysql数据库导入，就把脚本中所有带ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8的部分删除

idea注：

使用前需要换成你的maven路径并重新install。

在application.properties把你的mysql账号密码进行修改。

基于springboot的学生管理系统

实现截图

实现流程

实现目的

具体实现

数据库和数据表脚本

pom文件

application.properties和application.yml配置

pojo实体类

mapper接口以及mapper.xml

service和serviceimpl实现类

Controller控制层

前端样式以及数据交互

前端

注意事项

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

基于springboot的学生管理系统

实现截图

实现流程

实现目的

具体实现

数据库和数据表脚本

pom文件

application.properties和application.yml配置

pojo实体类

mapper接口以及mapper.xml

service和serviceimpl实现类

Controller控制层

前端样式以及数据交互

前端

注意事项

热门文章

最新文章

相关课程

相关电子书