实现流程

创建数据库=》创建数据表=》配置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.didwhere 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 {@Autowiredstumapper m;@Autowiredloginmapper lm;@Autowiredcollagemapper cm;@Autowireddormmapper dm;@Overridepublic List<student> querystu(){return m.querystu();}@Overridepublic boolean addstu(student stu){return m.addstu(stu);}@Overridepublic boolean updstu(student stu){return m.updstu(stu);}@Overridepublic boolean delstu(int id){return m.delstu(id);}@Overridepublic student querystuById(int id){return m.querystuById(id);}@Overridepublic user login(String name,String pwd){return lm.login(name,pwd);}@Overridepublic boolean register(String name,String pwd){return lm.register(name,pwd);}@Overridepublic List<collage> queryc(){return cm.queryc();}@Overridepublic boolean addc(int cid,String cname){return cm.addc(cid,cname);}@Overridepublic boolean updc(collage c){return cm.updc(c);}@Overridepublic boolean delc(int id){return cm.delc(id);}@Overridepublic List<collage> queryByIdc(String cname){return cm.qeuryByIdc(cname);}@Overridepublic List<dorm> queryd(){return dm.queryd();}@Overridepublic boolean updu(String name,String pwd){return lm.updu(name,pwd);}@Overridepublic boolean addd(dorm d){return dm.addd(d);}@Overridepublic boolean updd(dorm d){return dm.updd(d);}@Overridepublic boolean deld(int id){return dm.deld(id);}@Overridepublic 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 {@Autowiredservice 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 {@Autowiredservice 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>

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的学生管理系统相关推荐

基于springboot的学生选课管理系统
1.项目介绍基于springboot的学生选课管理系统4拥有三种角色,分别为管理员.教师.学生管理员:院系管理.班级管理.课程管理.教师管理.学生管理.修改密码教师:授课管理.成绩管理学生:选 ...
基于SpringBoot的毕业论文管理系统的设计与实现（开题报告）
基于Spring Boot的毕业论文管理系统研究的背景与意义随着信息化时代的到来,高校的管理工作也面临着信息化改革.目前,各大高校纷纷引入教务管理信息系统来加强和改善对学生.教师以及各种教务信息的 ...
基于SpringBoot的实习管理系统
末尾获取源码开发语言:Java Java开发工具:JDK1.8 后端框架:SpringBoot 前端:Vue.HTML 数据库:MySQL5.7和Navicat管理工具结合服务器:Tomcat8. ...
基于springboot实现人事管理系统演示【附项目源码】
基于springboot实现人事管理系统演示开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat1 ...
【毕业设计专栏】基于SpringBoot+Vue学生综合测评系统【源码+论文+演示PPT视频】
目录 1.效果演示 2.系统介绍 3. 系统的详细设计与展示 3.1 学生后台管理模块 3.2管理员功能模块 4.系统分析与设计 4.1可行性分析 4.1.1 技术可行性分析 4.1.2 经济可行性分 ...
基于springboot高校学生健康打卡系统021009
基于springboot 高校学生健康打卡系统摘要 2019年12月19号中国武汉发生第一例新冠病毒的到来,大家都在听从政府的号召在居家隔离,不管是在城市还是在乡镇.农村,这引起我的注目,设计一套 ...
[附源码]计算机毕业设计基于SpringBoot的党务管理系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
若依(基于SpringBoot的权限管理系统)集成MobileIMSDK实现IM服务端的搭建
场景若依(基于SpringBoot的权限管理系统)的快速搭建: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/111030441 ...
若依(基于SpringBoot的权限管理系统)的快速搭建
场景若依管理系统基于SpringBoot的权限管理系统官网地址: http://www.ruoyi.vip/ 下载地址: https://gitee.com/y_project/RuoYi 注: ...

基于springboot的学生管理系统

目录