图书管理系统_在图书管理界面中,点击导航栏中的场馆,会显示阅读场馆界面,阅读场馆界面以列表的-CSDN博客

本文链接：https://blog.csdn.net/qq_39497997/article/details/117092408

文章目录

1. 管理员账号的注册
2. 管理员登录功能
3. 设计表结构
4. 创建Maven项目,初始化项目
5. 表单提交的方式
- 5.1 同步提交表单
- 5.2 异步提交表单
6 工具类、过滤器、
7 登录注册
8 学生
9 院系
10 前端

1. 管理员账号的注册

管理账号的注册,我们只需要写好接口即可;

2. 管理员登录功能

管理员输入自己的用户名和密码,就可以进入图书管理系统了

3. 设计表结构

管理员表

create table if not exists user(
		id int primary key auto_increment comment '主键',
		username varchar(32) not null unique comment '用户名',
		password char(32) not null comment '密码',
		gmt_create datetime default current_timestamp comment '创建时间'
) comment '用户表';

学生表

-- 学生表
CREATE TABLE student(
	id INT AUTO_INCREMENT COMMENT '学生id',
	NAME VARCHAR(64) COMMENT '学生姓名',
	sex CHAR(1) COMMENT '性别',
	dep_id INT COMMENT '所属院系id',
	FULLTEXT KEY ftk_name(NAME) WITH PARSER ngram,
	PRIMARY KEY (id)
	
)COMMENT '学生表';

院系表

-- 院系表
CREATE TABLE department(
	id INT AUTO_INCREMENT COMMENT '院系id(主键)',
	NAME VARCHAR(32) COMMENT '院系名称',
	create_date DATE COMMENT '成立日期',
	PRIMARY KEY (id),
	FULLTEXT KEY ftk_name (NAME) WITH PARSER ngram
)COMMENT '院系';

账户表

-- 账户表
-- 数据库中存 金额 用分
CREATE TABLE account(
	id INT COMMENT '账户id，与student中的id一一对应',
	balance BIGINT DEFAULT 0 COMMENT '账户余额',
	PRIMARY KEY(id)
);

4. 创建Maven项目,初始化项目

5. 表单提交的方式

5.1 同步提交表单

优点: 写法简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录图书管理系统</title>

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        /*body{
            height: 600px;
        }*/
        .main-body{
            background-color: #00F7DE;
            text-align: center;
            /*height: 100%;*/
            margin-top: 200px;
        }
        .user-info{
            margin-top: 40px;
            background-color: #5FB878;
            font-size: 26px;
        }
        .user-info div{
            display: flex;
            background-color: pink;
            justify-content: center;
            margin-top: 10px;
        }

        .btn{
            width: 80px;
            height: 100%;
            font-size: 20px;
        }

    </style>
</head>
<body>

<div class="main-body">
    <h1>图书管理系统</h1>
    <form class="user-info" method="post" action="/register.action">
        <div><label>用户名：</label><input name="username" type="text" placeholder="请输入用户名"></div>
        <div><label>密码：</label><input name="password" type="text" placeholder="请输入密码"></div>
        <div><button class="btn" type="submit">登录</button></div>
    </form>
</div>
</body>
</html>

缺点: 用户体验不好,现在已经没有开发人员使用这种方式进行表单提交了;

5.2 异步提交表单

使用ajax进行表单的异步提交

<div class="main-body">
    <h1>图书管理系统</h1>
    <form class="user-info" onsubmit="return false">
        <div><label>用户名：</label><input autocomplete="off" name="username" type="text" placeholder="请输入用户名"></div>
        <div><label>密码：</label><input autocomplete="off" name="password" type="text" placeholder="请输入密码"></div>
        <div><button id="register-btn">注册</button></div>
    </form>

    <script>
        layui.use(['layer','jquery'], function (){
            var layer = layui.layer;
            var $ = layui.jquery;

            $("#register-btn").click(function (){
                //layer.msg("hello");
                let userInfo = $(".user-info").serialize();//序列化 表单格式

                $.ajax({
                    url: "/register.action",
                    type: "POST",
                    data: userInfo,
                    success: function (resp){
                        //console.log(resp)
                        if (resp.code == 6666){
                            //页面重定向
                            window.location.href = "./login.html"
                        }
                        if (resp.code == 8888){
                            layer.msg("注册失败，请重新输入用户名")
                        }
                    }
                });
            });
        });

    </script>
</div>
</body>

6 工具类、过滤器、

6.1 JdbcUtil

package com.tony.utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;
import org.apache.commons.dbutils.QueryRunner;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * QueryRunner单例化
 */
public class JdbcUtil {
    //私有化
    private JdbcUtil(){}

    private static QueryRunner queryRunner = new QueryRunner();

    private static DataSource dataSource;

    static {
        Properties properties = new Properties();
        try {
            properties.load(JdbcUtil.class.getClassLoader().getResourceAsStream("db.properties"));
            dataSource = DruidDataSourceFactory.createDataSource(properties);
            queryRunner = new QueryRunner(dataSource);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static Connection getConnection(){
        try {
            return dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    public static QueryRunner getQueryRunner(){
        return queryRunner;
    }
}

6.2 Md5Util

package com.tony.utils;

import java.io.UnsupportedEncodingException;
import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class Md5Util {
    private Md5Util() {
    }

    public static String genMd5String(String originStr) {
        try {
            //MessageDigest为应用程序提供信息摘要算法，简单说就是用于生成散列表
            MessageDigest messageDigest = MessageDigest.getInstance("md5");
            byte[] bytes = messageDigest.digest(originStr.getBytes("utf8"));
            BigInteger bigInteger = new BigInteger(1, bytes);
            String str = bigInteger.toString(16);
            return str;
        } catch (NoSuchAlgorithmException | UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

6.3 过滤器

package com.tony.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter(urlPatterns = "*.action")
public class ContentTypeFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        //解决POST类型的请求数据的乱码
        request.setCharacterEncoding("utf-8");
        //响应数据的类型和编码
        response.setContentType("application/json;charset=utf8");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

6.4 实体类

Account
Department
PageResponse
Response
Student
StuInfo
User

package com.tony.entity;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Account {
    private Integer id;//账户id，对应的就是学生id
    private Long balance;//账户余额(单位: 分)
}

package com.tony.entity;

public class Department {
    private Integer id;//院系id
    private String name;//院系名称
    private String create_date;//成立日期

    @Override
    public String toString() {
        return "Department{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", create_date='" + create_date + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCreate_date() {
        return create_date;
    }

    public void setCreate_date(String create_date) {
        this.create_date = create_date;
    }
}

package com.tony.entity;

/**
 * 封装用于分页的Response
 */
public class PageResponse {
    private Integer code;//响应码
    private String msg;//响应信息
    private Long count;//总条数
    private Object data;//数据

    @Override
    public String toString() {
        return "PageResponse{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Long getCount() {
        return count;
    }

    public void setCount(Long count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

package com.tony.entity;

import com.tony.constant.ResponseCode;

/**
 * 封装响应信息，统一定义格式
 */
public class Response {
    private Integer code = ResponseCode.SUCCESS;
    private String msg = "OK";
    private Object data;

    public Integer getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }

    public Object getData() {
        return data;
    }

    public Response code(Integer code) {
        this.code = code;
        return this;
    }

    public Response msg(String msg) {
        this.msg = msg;
        return this;
    }

    public Response data(Object data) {
        this.data = data;
        return this;
    }
}

package com.tony.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class Student {
    private Integer id;
    private String name;
    private String sex;
    private String phone;
    private Integer dep_id;
}

package com.tony.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class StuInfo {
    private Integer stuId;//学生id
    private String stuName;//学生姓名
    private String stuSex;//学生性别
    private String depName;//学生所属院系
    private Double balance;//学生余额
}

package com.tony.entity;

import java.util.Date;

public class User {
    private Integer id;//用户Id
    private String username;//用户名
    private String password;//密码
    private Date gmt_create;//创建时间

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", gmt_create=" + gmt_create +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Date getGmt_create() {
        return gmt_create;
    }

    public void setGmt_create(Date gmt_create) {
        this.gmt_create = gmt_create;
    }
}

6.5 配置文件db.properties

driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/tony?serverTimezone=Asia/Shanghai
username=root
password=123456
initialSize=5

7 登录注册

7.1 UserDao

package com.tony.dao;

import com.tony.entity.User;
import com.tony.utils.JdbcUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import java.sql.SQLException;

public class UserDao {
    /**
     * 添加用户
     * @param user 用户
     * @throws SQLException
     */
    public void insertUser(User user) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "insert into user(username,password) values(?,?)";
        String[] params = {user.getUsername(), user.getPassword()};
        // 增删改用execute  查询用Query
        // queryRunner.insert(sql, new ScalarHandler<>(), params);
        queryRunner.execute(sql, params);
    }

    /**
     * 查询用户, 实现登录
     *
     * @param username 用户名
     * @param password 密码
     * @return 查询到的用户  为null则代表没有此用户
     */
    public User selectBy(String username, String password) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "select * from user where username=? and password=?";
        String[] param = {username, password};
        User user = queryRunner.query(sql, new BeanHandler<>(User.class), param);
        return user;
    }
}

7.2 UserService

package com.tony.service;

import com.tony.dao.UserDao;
import com.tony.entity.User;

import java.sql.SQLException;

public class UserService {
    private UserDao userDao = new UserDao();

    /**
     * 添加用户
     *
     * @param username
     * @param password
     * @return
     */
    public void addUser(String username, String password) throws SQLException {
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        userDao.insertUser(user);
    }

    /**
     * 查找用户 find
     * @param username 用户名
     * @param password 密码
     * @return 查询到的用户, 返回null, 代表没有此用户
     */
    public User findBy(String username, String password) throws SQLException {
        User user = userDao.selectBy(username, password);
        return user;
    }
}

7.3 RegisterController和LoginController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Response;
import com.tony.service.UserService;
import com.tony.utils.Md5Util;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/register.action")
public class RegisterController extends HttpServlet {

    private UserService userService = new UserService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = Md5Util.genMd5String(req.getParameter("password"));
        Response r = new Response();
        try {
            userService.addUser(username, password);
            r.code(ResponseCode.SUCCESS).msg("注册成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("注册失败" + e.getMessage());
        }
        //给客户端返回json字符串
        resp.getWriter().write(JSON.toJSONString(r));
    }
}

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Response;
import com.tony.entity.User;
import com.tony.service.UserService;
import com.tony.utils.Md5Util;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/login.action")
public class LoginController extends HttpServlet {
    private UserService userService = new UserService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //resp.setContentType("application/json;charset=utf8");
        String username = req.getParameter("username");
        String password = Md5Util.genMd5String(req.getParameter("password"));
        Response r = new Response();
        try {
            User user = userService.findBy(username, password);
            //执行到此说明sql没有出异常
            if(user == null){
                //虽然没有出异常,但是没有查询到用户
                r.code(ResponseCode.ERROR).msg("登录失败，没有查询到用户");
            } else{
                r.code(ResponseCode.SUCCESS).msg("登录成功").data(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.SUCCESS).msg("登录失败，非法的输入");
        }
        resp.getWriter().write(JSON.toJSONString(r));
    }
}

8 学生

8.1 StudentDao

package com.tony.dao;

import com.alibaba.druid.util.StringUtils;
import com.tony.entity.Department;
import com.tony.entity.Student;
import com.tony.utils.JdbcUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.math.BigInteger;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

public class StudentDao {
    /**
     * 添加学生 包含两部分 学生表添加数据  账户表添加数据
     * 都成功或者都失败  用事务解决
     *
     * @param stu 学生
     * @throws SQLException
     */
    public void insert(Student stu) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        Connection connection = JdbcUtil.getConnection();
        //开启事务，就是关闭事务的自动提交
        connection.setAutoCommit(false);

        //1. 给学生表添加数据
        String createStuSql = "insert into student(name,sex,phone,dep_id) values(?,?,?,?)";
        Object[] params1 = {stu.getName(), stu.getSex(), stu.getPhone(), stu.getDep_id()};
        BigInteger stuId = queryRunner.insert(connection, createStuSql, new ScalarHandler<>(1), params1);
        //2. 给账户表添加数据 并 学生id和账户id是一一对应的
        String createAccountSql = "insert into account(id, balance) values(?,?)";
        Object[] params2 = {stuId.intValue(), 0L};
        queryRunner.execute(connection, createAccountSql, params2);

        //手动提交
        connection.commit();
    }

    /**
     * 查询全部学生
     *
     * @param start 开始位置
     * @param len   长度
     * @param name  名字
     * @return
     * @throws SQLException
     */
    public List<Student> selectAll(Integer start, Integer len, String name) throws SQLException {
        //定义基本的sql
        String baseSql = "select * from student";
        if (!StringUtils.isEmpty(name)) {
            baseSql += " where match(name) against('" + name + "')";
        }
        baseSql += " limit ?,? ";
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        //String sql = "select * from department limit ?,?";
        Integer[] params = {start, len};
        List<Student> stuList = queryRunner.query(baseSql, new BeanListHandler<Student>(Student.class), params);
        return stuList;
    }

    /**
     * 查询记录的总条数
     *
     * @return
     * @throws SQLException
     */
    public Long count(String name) throws SQLException {
        String baseSql = "select count(*) from student";

        if (!StringUtils.isEmpty(name)) {
            baseSql += " where match(name) against('" + name + "')";
        }

        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        //ScalarHandler 查一列的
        Long count = queryRunner.query(baseSql, new ScalarHandler<>());
        return count;
    }

    /**
     * 删除学生  注意: 删除学生的同时还需要删除学生关联的账户
     *
     * @param id
     */
    public void deleteById(Integer id) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();

        //1. 获取一个连接对象
        Connection conn = JdbcUtil.getConnection();

        //注意:::::  我们下面的步骤需要开启事务
        conn.setAutoCommit(false);

        //2. 删除学生表中的记录
        String sql1 = "delete from student where id=?";
        Integer[] params = {id};
        queryRunner.execute(conn, sql1, params);

        //3. 删除账户表中的记录
        String sql2 = "delete from account where id=?";
        queryRunner.execute(conn, sql2, params);

        //4. 提交事务
        conn.commit();
    }

    /**
     * 查询学生
     * @param id 学生id
     * @return
     * @throws SQLException
     */
    public Student selectById(Integer id) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "select * from student where id=?";
        Integer param = id;
        Student student = queryRunner.query(sql, new BeanHandler<Student>(Student.class), param);
        return student;
    }

    /**
     * 编辑学生信息
     * @param student 学生
     * @throws SQLException
     */
    public void updateById(Student student) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "update student set name=?, sex=?, depId=? where id=?";
        Object[] params = {student.getName(), student.getSex(), student.getDep_id(), student.getDep_id()};
        queryRunner.execute(sql, params);
    }
}

8.2 StudentService

package com.tony.service;

import com.tony.dao.AccountDao;
import com.tony.dao.DepartmentDao;
import com.tony.dao.StudentDao;
import com.tony.entity.Account;
import com.tony.entity.Department;
import com.tony.entity.StuInfo;
import com.tony.entity.Student;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class StudentService {
    private StudentDao studentDao = new StudentDao();
    private DepartmentDao departmentDao = new DepartmentDao();
    private AccountDao accountDao = new AccountDao();

    /**
     * 添加学生
     *
     * @param name  姓名
     * @param sex   性别
     * @param phone 手机号码
     * @param depId 所属院系id
     * @throws SQLException
     */
    public void add(String name, String sex, String phone, Integer depId) throws SQLException {
        Student student = new Student();
        student.setName(name);
        student.setSex(sex);
        student.setPhone(phone);
        student.setDep_id(depId);
        studentDao.insert(student);
    }

    /**
     * 查询分页数据
     *
     * @param page  当前页码
     * @param limit 每页条数
     * @param name  学生姓名
     * @return
     * @throws SQLException
     */
    public List<StuInfo> listAll(Integer page, Integer limit, String name) throws SQLException {

        //0. 创建一个List
        List<StuInfo> stuInfoList = new ArrayList<>();

        //1. 查询符合条件的所有学生
        Integer start = (page - 1) * limit;
        List<Student> studentList = studentDao.selectAll(start, limit, name);

        //2.根据学生id查询查询学生所属院系
        for (Student student : studentList) {
            StuInfo stuInfo = new StuInfo();
            stuInfo.setStuId(student.getId());
            stuInfo.setStuName(student.getName());
            stuInfo.setStuSex(student.getSex());

            //3.获取学生所属院系id
            Integer depId = student.getDep_id();

            //4.根据院系id获取院系名称
            Department department = departmentDao.selectById(depId);
            stuInfo.setDepName(department.getName());

            //5.根据用户id(账户id),来查询账户详情
            Account account = accountDao.selectById(student.getId());
            Long balance = account.getBalance();

            stuInfo.setBalance(balance * 1.0 / 100);

            //6.给集合封装数据
            stuInfoList.add(stuInfo);
        }
        return stuInfoList;
    }

    public void update(Integer id, String name, String sex,Integer depId) throws SQLException {
        Student student = new Student();
        student.setId(id);
        student.setName(name);
        student.setSex(sex);
        student.setDep_id(depId);
        studentDao.updateById(student);
    }
}

8.3 增删改查

8.3.1 AddStudentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Response;
import com.tony.service.StudentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/add-stu.action")
public class AddStudentController extends HttpServlet {
    private StudentService studentService = new StudentService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取前端传来的参数
        String name = req.getParameter("name");
        String sex = req.getParameter("sex");
        String phone = req.getParameter("phone");
        Integer depId = Integer.valueOf(req.getParameter("dep-id"));
        Response r = new Response();
        try {
            studentService.add(name, sex, phone, depId);
            r.code(ResponseCode.SUCCESS).msg("添加学生成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("添加学生失败"+e.getMessage());
        }

        resp.getWriter().write(JSON.toJSONString(r));
    }
}

8.3.2 DeleteStudentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.dao.StudentDao;
import com.tony.entity.Response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/del-stu.action")
public class DeleteStudentController extends HttpServlet {
    private StudentDao studentDao = new StudentDao();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取客户端传递的学生id
        Integer stuId = Integer.valueOf(req.getParameter("id"));

        //删除学生和其关联的账号
        Response r = new Response();
        try {
            studentDao.deleteById(stuId);
            r.code(ResponseCode.SUCCESS).msg("删除学生成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("删除学生失败");
        }
        resp.getWriter().write(JSON.toJSONString(r));
    }
}

8.3.3 ModifyStudentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Response;
import com.tony.service.StudentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/modify-stu.action")
public class ModifyStudentController extends HttpServlet {
    StudentService studentService = new StudentService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取客户端传来的参数
        Integer id = Integer.valueOf(req.getParameter("id"));
        String name = req.getParameter("name");
        String sex = req.getParameter("sex");
        Integer depId = Integer.valueOf(req.getParameter("depId"));

        Response r = new Response();
        try {
            studentService.update(id, name, sex, depId);
            r.code(ResponseCode.SUCCESS).msg("修改成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("修改失败:" + e.getMessage());
        }

        resp.getWriter().write(JSON.toJSONString(r));

    }
}

8.3.4 ListStudentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.dao.StudentDao;
import com.tony.entity.PageResponse;
import com.tony.entity.StuInfo;
import com.tony.service.StudentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet(urlPatterns = "/list-stu.action")
public class ListStudentController extends HttpServlet {
    private StudentService studentService = new StudentService();
    private StudentDao studentDao = new StudentDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            //获取当前页码
            Integer page = Integer.valueOf(req.getParameter("page"));
            //获取每页多少条
            Integer limit = Integer.valueOf(req.getParameter("limit"));
            //获取查询条件的参数
            String name = req.getParameter("name");//院系名称

            List<StuInfo> stuInfoList = studentService.listAll(page, limit, name);
            PageResponse pageResponse = new PageResponse();
            pageResponse.setCode(ResponseCode.SUCCESS);
            pageResponse.setMsg("OK");
            pageResponse.setCount(studentDao.count(name));
            pageResponse.setData(stuInfoList);
            resp.getWriter().write(JSON.toJSONString(pageResponse));
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

9 院系

9.1 DepartmentDao

package com.tony.dao;

import com.alibaba.druid.util.StringUtils;
import com.tony.entity.Department;
import com.tony.utils.JdbcUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.SQLException;
import java.util.List;

public class DepartmentDao {
    /**
     * 添加院系
     *
     * @param dep
     * @throws SQLException
     */
    public void insert(Department dep) throws SQLException {
        String sql = "insert into department(name,create_date) values(?,?)";
        String[] params = {dep.getName(), dep.getCreate_date()};
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        queryRunner.execute(sql, params);
    }


    /**
     * 查询
     *
     * @param start      起始页
     * @param len        长度
     * @param name       院系名称
     * @param createDate 院系成立时间
     * @return
     * @throws SQLException
     */
    public List<Department> selectAll(Integer start, Integer len, String name, String createDate) throws SQLException {
        //定义基本的sql
        String baseSql = "select * from department";
        //定义标志位
        boolean isAnd = false;
        if (!StringUtils.isEmpty(name) || !StringUtils.isEmpty(createDate)) {
            baseSql += " where ";
            if (!StringUtils.isEmpty(name)) {
                String andStr = isAnd ? " and " : " ";
                isAnd = true;
                baseSql += andStr + "match(name) against('" + name + "')";
            }
            if (!StringUtils.isEmpty(createDate)) {
                String andStr = isAnd ? " and " : " ";
                isAnd = true;
                baseSql += andStr + "create_date='" + createDate + "'";
            }
        }
        baseSql += " limit ?,? ";


        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        //String sql = "select * from department limit ?,?";
        Integer[] params = {start, len};
        List<Department> depList = queryRunner.query(baseSql, new BeanListHandler<>(Department.class), params);
        return depList;
    }

    /**
     * 查询记录的总条数
     *
     * @return
     * @throws SQLException
     */
    public Long count(String name, String createDate) throws SQLException {
        String baseSql = "select count(*) from department";
        //定义标志位
        Boolean isAnd = false;
        if (!StringUtils.isEmpty(name) || !StringUtils.isEmpty(createDate)) {
            baseSql += " where ";

            if (!StringUtils.isEmpty(name)) {
                String andStr = isAnd ? " and  " : " ";
                isAnd = true;

                baseSql += andStr + "match(name) against('" + name + "')";
            }

            if (!StringUtils.isEmpty(createDate)) {
                String andStr = isAnd ? " and  " : " ";
                isAnd = true;
                baseSql += andStr + "create_date='" + createDate + "'";
            }
        }
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        //ScalarHandler 查一列的
        Long count = queryRunner.query(baseSql, new ScalarHandler<>());
        return count;
    }

    /**
     * 删除指定行
     *
     * @param id 院系id
     * @throws SQLException
     */
    public void delete(Integer id) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "DELETE FROM department WHERE id=?;";
        Integer param = id;
        queryRunner.execute(sql, param);
    }

    /**
     * 查找院系详细信息
     * @param id 院系id
     * @return 院系的详细信息
     */
    public Department selectById(Integer id) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "select * from department where id=?";
        Integer param = id;
        Department department = queryRunner.query(sql, new BeanHandler<Department>(Department.class), param);
        return department;
    }


    /**
     * 修改院系信息
     *
     * @param dep
     */
    public void updateById(Department dep) throws SQLException {
        QueryRunner queryRunner = JdbcUtil.getQueryRunner();
        String sql = "update department set name=?, create_date=? where id=?";
        Object[] params = {dep.getName(), dep.getCreate_date(), dep.getId()};
        queryRunner.execute(sql, params);
    }

}

9.2 DepartmentService

package com.tony.service;

import com.tony.dao.DepartmentDao;
import com.tony.entity.Department;

import java.sql.SQLException;
import java.util.List;

public class DepartmentService {
    private DepartmentDao departmentDao = new DepartmentDao();

    /**
     * 添加院系
     *
     * @param dep
     * @throws SQLException
     */
    public void add(Department dep) throws SQLException {
        departmentDao.insert(dep);
    }

    /**
     * 查询分页数据
     *
     * @param page  当前页码
     * @param limit 每页条数
     * @return
     * @throws SQLException
     */
    public List<Department> listAll(Integer page, Integer limit, String name, String createDate) throws SQLException {
        //开始位置的计算   start = （page - 1）* limit
        Integer start = (page - 1) * limit;
        List<Department> departments = departmentDao.selectAll(start, limit, name, createDate);
        return departments;
    }

    /**
     * 删除指定行
     *
     * @param id
     * @throws SQLException
     */
    public void delete(Integer id) throws SQLException {
        departmentDao.delete(id);
    }

    /**
     * 修改院系
     *
     * @param id         院系id 修改条件
     * @param name       院系名称
     * @param createDate 成立时间
     */
    public void update(Integer id, String name, String createDate) throws SQLException {
        Department dep = new Department();
        dep.setId(id);
        dep.setName(name);
        dep.setCreate_date(createDate);
        departmentDao.updateById(dep);
    }
}

9.3 增删改查

9.3.1 AddDepartmentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Department;
import com.tony.entity.Response;
import com.tony.service.DepartmentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/add-dep.action")
public class AddDepartmentController extends HttpServlet {
    //创建service层对应的对象
    private DepartmentService departmentService = new DepartmentService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");//院系名称
        String createDate = req.getParameter("create-date");//院系的成立日期
        Department dep = new Department();
        dep.setName(name);
        dep.setCreate_date(createDate);
        Response r = new Response();
        try {
            departmentService.add(dep);
            //在这不出异常则代表添加成功
            r.code(ResponseCode.SUCCESS).msg("添加院系成功");

        } catch (SQLException throwables) {
            throwables.printStackTrace();
            r.code(ResponseCode.ERROR).msg("添加院系失败");
        }
        resp.getWriter().write(JSON.toJSONString(r));//给客户端响应内容
    }
}

9.3.2 DeleteDepartmentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Department;
import com.tony.entity.Response;
import com.tony.service.DepartmentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/del-dep.action")
public class DeleteDepartmentController extends HttpServlet {
    private DepartmentService departmentService = new DepartmentService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取客户端传递的id
        Integer id = Integer.valueOf(req.getParameter("id"));

        Response r = new Response();
        try {
            departmentService.delete(id);
            //在这不出异常则代表删除成功
            r.code(ResponseCode.SUCCESS).msg("删除院系成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("删除院系失败" + e.getMessage());
        }
        resp.getWriter().write(JSON.toJSONString(r));//给客户端响应内容
    }
}

9.3.3 ModifyDepartmentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.entity.Response;
import com.tony.service.DepartmentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/modify-dep.action")
public class ModifyDepartmentController extends HttpServlet {
    DepartmentService departmentService = new DepartmentService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取客户端传来的参数
        Integer depId = Integer.valueOf(req.getParameter("id"));
        String name = req.getParameter("name");
        String createDate = req.getParameter("create-date");

        Response r = new Response();
        try {
            departmentService.update(depId, name, createDate);
            r.code(ResponseCode.SUCCESS).msg("修改成功");
        } catch (SQLException e) {
            e.printStackTrace();
            r.code(ResponseCode.ERROR).msg("修改失败:" + e.getMessage());
        }

        resp.getWriter().write(JSON.toJSONString(r));
    }
}

9.3.4 ListDepartmentController

package com.tony.controller;

import com.alibaba.fastjson.JSON;
import com.tony.constant.ResponseCode;
import com.tony.dao.DepartmentDao;
import com.tony.entity.Department;
import com.tony.entity.PageResponse;
import com.tony.service.DepartmentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

/**
 * 部门列表
 */
@WebServlet(urlPatterns = "/list-dep.action")
public class ListDepartmentController extends HttpServlet {
    private DepartmentService departmentService = new DepartmentService();
    private DepartmentDao departmentDao = new DepartmentDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            //获取当前页码
            Integer page = Integer.valueOf(req.getParameter("page"));
            //获取每页多少条
            Integer limit = Integer.valueOf(req.getParameter("limit"));

            //获取查询条件的参数
            String name = req.getParameter("name");//院系名称
            String createDate = req.getParameter("create-date");//院系成立时间

            //获取数据总数
            Long count = departmentDao.count(name, createDate);

            List<Department> departments = departmentService.listAll(page, limit, name, createDate);
            PageResponse pageResponse = new PageResponse();
            pageResponse.setCode(ResponseCode.SUCCESS);
            pageResponse.setMsg("OK");
            //这里改的只是下边的总数
            pageResponse.setCount(count);
            pageResponse.setData(departments);
            resp.getWriter().write(JSON.toJSONString(pageResponse));
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
}

10 前端

10.1 pom.xml

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>bookmanagement</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>commons-dbutils</groupId>
            <artifactId>commons-dbutils</artifactId>
            <version>1.7</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.22</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.10</version>
        </dependency>

    </dependencies>

</project>

10.2 页面

10.2.1 注册 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <link type="text/css" rel="stylesheet" href="css/user.css">
    <link type="text/css" rel="stylesheet" href="font/iconfont.css">
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css">

    <script src="layui/layui.js"></script>
</head>
<body>
<div class="main-body">
    <div class="user-info">
        <img src="./images/logo.png">
        <form class="user-form" action="#" onsubmit="return false">
            <div class="username-box">
                <label class="iconfont icon-yonghu"></label>
                <input autocomplete="off" class="username" name="username" placeholder="手机/用户名/UUID/邮箱"/>
            </div>
            <div class="password-box">
                <label class="iconfont icon-mima"></label>
                <input autocomplete="off" type="password" class="password" name="password" placeholder="请输入密码"/>
            </div>
            <div class="btn-box">
                <button class="btn">注册</button>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        //根据输入框的内容改变按钮的背景及其字体颜色
        $("input").keyup(function () {
            // console.log(this.value)
            // console.log($(this).val())
            if ($(".username").val() != "" && $(".password").val() != "") {
                $("button").addClass("btn-bg-change")
            }
            if ($(".username").val() == "" || $(".password").val() == "") {
                $("button").removeClass("btn-bg-change")
            }
        })

        //异步提交表单
        $("button").click(function () {
            const data = $(".user-form").serialize();
            var dataType = "json";//骚写法  es6中的新增语法
            //发送ajax进行注册
            $.ajax({
                url: "/register.action",
                type: "POST",
                data,
                dataType,
                success: function (resp) {
                    if (resp.code == 6666) {
                        layer.msg("注册成功", {icon: 1})
                    } else {
                        layer.msg("注册失败", {icon: 2})
                    }
                }
            })

        })
    });

</script>

</body>
</html>

10.2.2 登录 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <link rel="stylesheet" href="css/user.css" type="text/css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>
<div class="main-body">
    <div class="user-info">
        <img src="images/logo.png">
        <form action="#" class="user-form" onsubmit="return false;">
            <div class="username-box">
                <label class="iconfont icon-yonghu"></label>
                <input autocomplete="off" class="username" name="username" placeholder="手机号/用户名/UUID/邮箱"/>
            </div>
            <div class="password-box">
                <label class="iconfont icon-mima"></label>
                <input autocomplete="off" type="password" class="password" name="password" placeholder="请输入密码"/>
            </div>
            <div class="btn-box">
                <button>登录</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="layui/layui.js"></script>

<script>

    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        //根据输入框的内容改变按钮的背景及其字体颜色
        $("input").keyup(function () {
            if ($(".username").val() != "" && $(".password").val() != "") {
                $("button").addClass("btn-bg-change")
            }
            if ($(".username").val() == "" || $(".password").val() == "") {
                $("button").removeClass("btn-bg-change")
            }
        })

        //异步提交登录请求
        $("button").click(function () {
            //把表单数据格式化
            const data = $(".user-form").serialize()
            //发送ajax请求
            $.ajax({
                url: "/login.action",
                type: "POST",
                data,
                dataType: "json",
                success: function (resp) {
                    if (resp.code == 6666) {
                        //浏览器端有个非常强大的功能: localStorage  sessionStorage
                        sessionStorage.setItem("username", resp.data.username)
                        layer.msg("登陆成功", {icon: 1})
                        setTimeout(function () {
                            window.location.href = "index.html"
                        }, 500)

                    } else {
                        layer.msg("登陆失败", {icon: 2})
                    }
                }
            });
        });
    });
</script>

</body>
</html>

10.2.3 主页 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .main-body {
            width: 100%;
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
        }
    </style>


</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">图书管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">图书管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">图书入库</a></dd>
                        <dd><a href="javascript:;">删除图书</a></dd>
                        <dd><a href="javascript:;">修改图书</a></dd>
                        <dd><a href="">查询图书</a></dd>
                        <dd><a href="">借书</a></dd>
                        <dd><a href="">还书</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a href="javascript:;">院系管理</a>
                    <dl class="layui-nav-child">
                        <dd class="add-dep"><a href="javascript:;">添加院系</a></dd>
                        <dd class="list-dep"><a href="javascript:;">院系列表</a></dd>
                    </dl>
                </li>


                <li class="layui-nav-item ">
                    <a href="javascript:;">学生管理</a>
                    <dl class="layui-nav-child">
                        <dd class="add-stu"><a href="javascript:;">添加学生</a></dd>
                        <dd class="list-stu"><a href="javascript:;">学生列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="main-body" style="padding: 0px;">
            <iframe src="login.html" frameborder="none" scrolling="no"></iframe>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        @自动化128Tony提供技术支持
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
        var layer = layui.layer
        var util = layui.util
        var $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });


        //添加院系
        $(".add-dep").click(function () {
            $("iframe").attr("src", "add-department.html")
        });

        //查询院系
        $(".list-dep").click(function () {
            $("iframe").attr("src", "list-department.html")
        });

        //添加学生
        $(".add-stu").click(function (){
            $("iframe").attr("src", "add-student.html")
        });

        //查询学生列表
        $(".list-stu").click(function (){
            $("iframe").attr("src", "list-student.html")
        })
    });
</script>
</body>
</html>

10.2.4 学生

增 add-student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <link rel="stylesheet" href="./layui/css/layui.css">


    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f9f9f9;
        }

        .stu-form {
            width: 500px;
            height: 200px;
            margin: 50px auto;
        }


        .add {
            display: block;
            width: 300px;
        }

        .layui-form-item {
            width: 400px;
            margin: 20px auto;
        }
    </style>

</head>

<body>
<form class="stu-form layui-form layui-form-pane" action="#" onsubmit="return false;">
    <div class="layui-form-item">
        <label class="layui-form-label">学生姓名:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="填写学生姓名"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">学生性别:</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请填写手机号码"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属院系</label>
        <div class="layui-input-inline">
            <select class="stu-list-select" name="dep-id" lay-verify="required" lay-search=""></select>
        </div>
    </div>

    <div class="layui-form-item">
        <button type="button" class="layui-btn add">添加学生</button>
    </div>
</form>
</body>


<script type="text/javascript" src="layui/layui.js"></script>
<script>
    layui.use(["jquery", "form"], function () {
        var $ = layui.jquery;
        var form = layui.form;

        //发送ajax,获取院系列表,进行select的渲染
        $.ajax({
            url: "/list-dep.action?page=1&limit=10000",
            type: "GET",
            dataType: "JSON",
            success: function (resp) {
                if (resp.code == 6666) {
                    $(".stu-list-select").append("<option value=''>请选择所属院系</option>");
                    for (let index in resp.data) {
                        let dep = resp.data[index];
                        //把ajax获取过来的院系列表数据渲染到select中
                        /*<option value="">直接选择或搜索选择</option>
                        <option value="1">layer</option>*/
                        $(".stu-list-select").append("<option value='" + dep.id + "'>" + dep.name + "</option>")
                        //layui进行表单数据渲染
                        form.render("select");
                    }
                } else {
                    layer.msg("添加学生失败", {icon: 2})
                }
            }
        });

        //添加学生
        $("button").click(function () {
            console.log("...", $(".stu-form ").serialize())
            //调用后端添加学生的接口,进行学生的添加
            $.ajax({
                url: "/add-stu.action",
                type: "post",
                data: $(".stu-form ").serialize(),
                dataType: "json",
                success: function (resp) {
                    if (resp.code == 6666) {
                        layer.msg("添加学生成功", {icon: 1})
                        $(".stu-form ")[0].reset();
                    } else {
                        layer.msg("添加学生失败", {icon: 2})
                    }
                }
            });
        })
    });

</script>


</html>

改 edit-student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑学生</title>
    <link rel="stylesheet" href="./layui/css/layui.css">


    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f9f9f9;
        }

        .stu-form {
            width: 500px;
            height: 200px;
            margin: 50px auto;
        }


        .edit {
            display: block;
            width: 300px;
        }

        .layui-form-item {
            width: 400px;
            margin: 20px auto;
        }
    </style>

</head>

<body>
<form class="stu-form layui-form layui-form-pane" action="#" onsubmit="return false;">
    <div class="layui-form-item">
        <label class="layui-form-label">学生姓名:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="填写学生姓名"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">学生性别:</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>

<!--    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请填写手机号码"
                   class="layui-input">
        </div>
    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">所属院系</label>
        <div class="layui-input-inline">
            <select class="stu-list-select" name="dep-id" lay-verify="required" lay-search=""></select>
        </div>
    </div>

    <div class="layui-form-item">
        <button type="button" class="layui-btn edit">确认修改</button>
    </div>
</form>
</body>


<script type="text/javascript" src="layui/layui.js"></script>
<script>
    let $;//jquery对象
    let stuId;//学生id

    //定义一个函数,给父页面来打开此iframe弹窗的时候进行调用
    function start(id) {
        //根据父页面传来的院系id，进行查询此院系的详细信息
        stuId = id
        $.ajax({
            url: "/find-stu.action?id=" + stuId,
            type: "get",
            dataType: "json",
            success: function (resp) {
                console.log(resp)
                if (resp.code == 6666) {
                    const name = resp.data.stuName
                    const sex = resp.data.stuSex
                    const depName = resp.data.depName
                    $("input[name='name']").val(name)
                    $("input[name='sex']").val(sex)
                    $("input[name='depName']").val(depName)
                }
            }
        })
    }

    layui.use(["jquery", "form"], function () {
        $ = layui.jquery;
        var form = layui.form;

        //发送ajax,获取学生列表,进行select的渲染
        $.ajax({
            url: "/list-stu.action?page=1&limit=10000",
            type: "GET",
            dataType: "JSON",
            success: function (resp) {
                if (resp.code == 6666) {
                    $(".stu-list-select").append("<option value=''>请选择所属院系</option>");
                    for (let index in resp.data) {
                        let dep = resp.data[index];
                        //把ajax获取过来的院系列表数据渲染到select中
                        /*<option value="">直接选择或搜索选择</option>
                        <option value="1">layer</option>*/
                        $(".stu-list-select").append("<option value='" + dep.id + "'>" + dep.name + "</option>")
                        //layui进行表单数据渲染
                        form.render("select");
                    }
                } else {
                    layer.msg("添加学生失败", {icon: 2})
                }
            }
        });

        //编辑学生
        $("button").click(function () {
            console.log("...", $(".stu-form ").serialize())
            //调用后端编辑学生的接口,进行学生的编辑
            $.ajax({
                url: "/modify-stu.action",
                type: "post",
                data: $(".stu-form ").serialize(),
                dataType: "json",
                success: function (resp) {
                    if (resp.code == 6666) {
                        layer.msg("编辑学生成功", {icon: 1})
                        $(".stu-form ")[0].reset();
                    } else {
                        layer.msg("编辑学生失败", {icon: 2})
                    }
                }
            });
        })
    });

</script>


</html>

查 list-student.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>查询学生列表</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>


<form class="layui-form layui-form-pane dep-info-form" action="" onsubmit="return false">

    <div class="layui-inline">
        <label class="layui-form-label">学生姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入学生姓名"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <button type="button" class="layui-btn query-btn">查询学生</button>
</form>


<table id="stu-list-id" lay-filter="stu-list-table-filter"></table>


<script src="layui/layui.js"></script>

<script type="text/html" id="stu-toolbar">
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="recharge">图书卡充值</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑学生</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除学生</a>
</script>

<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.jquery;

        //第一个实例
        var tableIns = table.render({
            elem: '#stu-list-id',
            height: 550,
            url: '/list-stu.action', //数据接口
            //toolbar: 'default',
            page: true, //开启分页
            cols: [[ //表头
                {field: 'stuId', title: 'ID', width: "5%", sort: true, fixed: 'left', align: "center"},
                {field: 'stuName', title: '学生姓名', width: "15%", align: "center"},
                {field: 'stuSex', title: '性别', width: "15%", align: "center"},
                {field: 'depName', title: '所属院系', width: "20%", align: "center"},
                {field: 'balance', title: '账户金额(元)', width: "20%", sort: true, align: "center"},
                {fixed: 'right', width: "25%", title: '操作', align: 'center', toolbar: '#stu-toolbar'} //这里的toolbar值是模板元素的选择器
            ]],
            // 借助 response 参数来重新设定返回的数据格式
            response: {
                statusCode: 6666 //规定成功的状态码，默认：0
                /*,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data*/
            },
        });

        //给查询按钮添加点击事件
        $(".query-btn").click(function () {
            console.log(".....")
            tableIns.reload({
                //设定异步数据接口的额外参数，任意设
                where: {
                    name: $("input[name='name']").val()
                },
                page: {
                    curr: 1 // 重新从1开始
                }
            })
        });

        //给查询按钮绑定上回车键
        $(function () {
            $(document).keyup(function (e) {
                if (e.keyCode == 13) {
                    //回车键的keyCode=13
                    $(".query-btn").click();
                }
            });
        });

        //监听行工具事件,给table工具条添加点击事件
        table.on('tool(stu-list-table-filter)', function (obj) {
            var data = obj.data;//获取当前行数据
            var layEvent = obj.event;//获取设置的lay-event的值
            let id = data.id;

            switch (layEvent) {
                case "recharge":
                    //点击了"图书卡充值"功能
                    //iframe层
                    layer.open({
                        type: 2,//2 就是iframe
                        title: '图书卡充值',
                        shadeClose: true,
                        shade: 0.6,
                        area: ['560px', '85%'],
                        content: 'chongzhi-student.html', //iframe的url
                        //iframe打开时的回调函数
                        success: function (layer, index) {//index是打开弹窗的索引 第一个是参数，随便写
                            //获取打开iframe弹窗的页面的对象
                            const iframeObj = window['layui-layer-iframe' + index]//layui提供的
                            // console.log(iframeObj);
                            //调用子页面中的start方法
                            iframeObj.start(id)
                        },
                        //iframe关闭时的回调函数
                        end: function () {
                            //重新渲染表格数据
                            tableIns.reload({
                                //设定异步数据接口的额外参数，任意设
                                where: {
                                    name: $("input[name='name']").val()
                                },
                                page: {
                                    curr: $(".layui-laypage-em").next().text() //获取当前所在页
                                }
                            })
                        }
                    });
                    break;
                case "edit":
                    //点击了"编辑学生"功能
                    //iframe层
                    layer.open({
                        type: 2,//2 就是iframe
                        title: '编辑学生',
                        shadeClose: true,
                        shade: 0.6,
                        area: ['560px', '85%'],
                        content: 'edit-student.html', //iframe的url
                        //iframe打开时的回调函数
                        success: function (layer, index) {//index是打开弹窗的索引 第一个是参数，随便写
                            //获取打开iframe弹窗的页面的对象
                            const iframeObj = window['layui-layer-iframe' + index]//layui提供的
                            // console.log(iframeObj);
                            //调用子页面中的start方法
                            iframeObj.start(id)
                        },
                        //iframe关闭时的回调函数
                        end: function () {
                            //重新渲染表格数据
                            tableIns.reload({
                                //设定异步数据接口的额外参数，任意设
                                where: {
                                    name: $("input[name='name']").val()
                                },
                                page: {
                                    curr: $(".layui-laypage-em").next().text() //获取当前所在页
                                }
                            })
                        }
                    });

                    break;
                case "del":
                    //点击了"删除院系"功能
                    
                    console.log(data)
                    layer.confirm('真的删除么', function (index) {
                        //向服务端发送删除指令
                        $.ajax({
                            url: '/del-stu.action',
                            type: 'post',
                            data: {'id': data.stuId},//向服务端发送删除的id
                            dataType: "json",
                            success: function (resp) {
                                if (resp.code == 6666) {
                                    //重新渲染表格数据
                                    tableIns.reload({
                                        /*
                                        //设定异步数据接口的额外参数，任意设
                                        where: {
                                            name: $("input[name='name']").val(),
                                            "create-date": $("input[name='create-date']").val()
                                        },*/
                                        page: {
                                            curr: $(".layui-laypage-em").next().text() // 从当前页
                                        }
                                    })
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);//关闭当前层（可以不要）
                                    layer.msg("删除成功", {icon: 1});
                                } else {
                                    layer.msg("删除失败", {icon: 2});
                                }
                            }
                        });
                        layer.close(index);
                    });
                    break;
            }

            /*if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/del-dep.action',
                        type: 'post',
                        data: {'id': id},//向服务端发送删除的id
                        dataType: "json",
                        success: function (resp) {
                            if (resp.code == 6666) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功", {icon: 1});
                            } else {
                                layer.msg("删除失败", {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });

            } else if (layEvent === 'edit') {
                layer.prompt({
                    formType: 2 //输入框类型，支持0（文本）默认1（密码）2（多行文本）
                    , value: data.name //初始时的值，默认空字符
                }, function (value, index) {
                    obj.update({
                        name: value
                    });
                    layer.close(index);
                });
            }*/
        });

    });
</script>

</body>
</html>