备案控制台
开发者社区 开发与运维 文章 正文

基于springboot的学生管理系统

2023-11-27 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
简介： 基于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账号密码进行修改。



文章标签：
CDN
云数据库 RDS MySQL 版
Java
前端开发
数据格式
XML
数据库
关键词：
Spring Boot管理系统
Spring Boot学生管理系统
好名字0821
目录
相关文章
源码星辰
|
6天前
|
Web App开发 编解码 Java
B/S基层卫生健康云HIS医院管理系统源码 SaaS模式 、Springboot框架
基层卫生健康云HIS系统采用云端SaaS服务的方式提供，使用用户通过浏览器即能访问，无需关注系统的部署、维护、升级等问题，系统充分考虑了模板化、配置化、智能化、扩展化等设计方法，覆盖了基层医疗机构的主要工作流程，能够与监管系统有序对接，并能满足未来系统扩展的需要。
源码星辰
56 4
zhishijike
|
6天前
|
安全 前端开发 Java
基于springboot的微信公众号管理系统（支持多公众号接入）
基于springboot的微信公众号管理系统（支持多公众号接入）
zhishijike
47 2
源码星辰
|
6天前
|
运维 监控 安全
云HIS医疗管理系统源码——技术栈【SpringBoot+Angular+MySQL+MyBatis】
云HIS系统采用主流成熟技术，软件结构简洁、代码规范易阅读，SaaS应用，全浏览器访问前后端分离，多服务协同，服务可拆分，功能易扩展；支持多样化灵活配置，提取大量公共参数，无需修改代码即可满足不同客户需求；服务组织合理，功能高内聚，服务间通信简练。
源码星辰
40 4
一瓢源码甘甜水
|
6天前
|
存储 前端开发 Java
基于springboot的助农管理系统的设计与实现
基于springboot的助农管理系统的设计与实现
一瓢源码甘甜水
106 3
源码宝
|
1天前
|
监控 NoSQL Java
java云MES 系统源码Java+ springboot+ mysql 一款基于云计算技术的企业级生产管理系统
MES系统是生产企业对制造执行系统实施的重点在智能制造执行管理领域，而MES系统特点中的可伸缩、信息精确、开放、承接、安全等也传递出：MES在此管理领域中无可替代的“王者之尊”。MES制造执行系统特点集可伸缩性、精确性、开放性、承接性、经济性与安全性于一体，帮助企业解决生产中遇到的实际问题，降低运营成本，快速适应企业不断的制造执行管理需求，使得企业已有基础设施与一切可用资源实现高度集成，提升企业投资的有效性。
源码宝
27 5
源码宝
|
3天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力，建立一个全面的、集成的、稳定的制造物流质量控制体系；对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进，满足精细化、透明化、自动化、实时化、数据化、一体化管理，实现企业柔性化制造管理。
源码宝
24 3
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
小蜗牛耶
51 4
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
小蜗牛耶
42 2
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的设备故障报修管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的设备故障报修管理系统的详细设计和实现
小蜗牛耶
31 1
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
小蜗牛耶
36 0

热门文章

最新文章

  • 1
    Java语言开发的AI智慧导诊系统源码springboot+redis 3D互联网智导诊系统源码
  • 2
    [AIGC] 在Spring Boot中指定请求体格式
  • 3
    Spring Boot整合canal实现数据一致性解决方案解析-部署+实战
  • 4
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
  • 5
    SpringBoot之三层架构的详细解析
  • 6
    SpringBoot自动装配原理之@Import注解解析
  • 7
    【Spring Boot系列】通过OpenAPI规范构建微服务服务接口
  • 8
    基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
  • 9
    B/S基层卫生健康云HIS医院管理系统源码 SaaS模式 、Springboot框架
  • 10
    【SpringBoot系列】微服务监测（常用指标及自定义指标）
  • 1
    SpringBoot启动后出现Please sign in页面
    59
  • 2
    Spring Boot的定时任务与异步任务
    59
  • 3
    SpringBoot整合Mybatis连接Oracle数据库
    84
  • 4
    通用Shell脚本执行Spring Boot项目Jar包
    42
  • 5
    【SpringBoot系列】SpringBoot集成Fast Mybatis
    183
  • 6
    Spring Boot集成Redis启动失败【Caused by: java.lang.ClassNotFoundException: org.apache.commons.pool2.impl.G】
    96
  • 7
    【二十二】springboot整合拦截器实战并对比过滤器
    40
  • 8
    【二十一】springboot整合过滤器实战
    20
  • 9
    【二十】springboot整合ElasticSearch实战（万字篇）
    245
  • 10
    【十八】springboot实现自定义全局异常处理
    39

    • 相关课程

    更多
  • 微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移
  • Spring Boot 2.5.x开发实战

    • 相关电子书

    更多
  • 使用Spring.Initializr定制工程脚手架
  • 陈曦：使用Spring.Initializr定制工程脚手架
  • Java Spring Boot开发实战系列课程【第6讲】：Spring Boot 2.0实战MyBatis与优化(Java面试题)

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考