跳至主要內容

增删改查

学长敲代码原创大约 17 分钟教程javaweb

增删改查

注意点：

  • 如果代码在运行过程报错，如sql语句可能会书写错误，我们还需要学会通过调试、或者打印自定义日志排查问题。
  • 在写完每个接口，记得测试一下接口是否正常

提示：

如果文档里面有错误或者疑问，可以通过B站提醒我~

分页查询

PagerVO

/**
 * 分页工具
 */
public class PagerVO<T> {
    int current;
    int size;
    int total;
    List<T> list;

    //get set 函数略...
}

学生查询

StudentDao

public PagerVO<Student> page(int current, int size, String whereSql){
    PagerVO<Student> pagerVO = new PagerVO<>();
    pagerVO.setCurrent(current);
    pagerVO.setSize(size);
    JdbcHelper helper = new JdbcHelper();
    if(whereSql == null){
        whereSql = " ";
    }
    ResultSet resultSet;
    try {
        resultSet = helper.executeQuery("select count(1) from tb_student "+whereSql);
        resultSet.next();
        int total = resultSet.getInt(1);
        pagerVO.setTotal(total);

        resultSet = helper.executeQuery("select * from tb_student " + whereSql + " limit " + ((current-1)*size) + "," + size);
        List<Student> list = new ArrayList<>();
        while (resultSet.next()){
            Student e = toEntity(resultSet);
            list.add(e);
        }
        pagerVO.setList(list);
        return pagerVO;
    }catch (Exception e){
        e.printStackTrace();
    }finally {
        helper.closeDB();
    }
    return null;
}

StudentService

public PagerVO<Student> page(int current, int size,String sno,String name,String gender,String clazzno) {
        String whereSql = " where 1=1 ";
        if(name!=null){
            whereSql += " and name like '%" + name + "%'";
        }
        if(sno!=null){
            whereSql += " and sno like '%" + sno + "%'";
        }
        if(gender!=null){
            whereSql += " and gender = '" + gender + "'";
        }
        if(clazzno!=null){
            whereSql += " and clazzno = '" + clazzno + "'";
        }
        return dao.page(current,size,whereSql);
    }

班级查询

ClazzDao

public PagerVO<Clazz> page(int current, int size, String whereSql){
        PagerVO<Clazz> pagerVO = new PagerVO<>();
        pagerVO.setCurrent(current);
        pagerVO.setSize(size);
        JdbcHelper helper = new JdbcHelper();
        if(whereSql == null){
            whereSql = " ";
        }
        ResultSet resultSet;
        try {
            resultSet = helper.executeQuery("select count(1) from tb_clazz "+whereSql);
            resultSet.next();
            int total = resultSet.getInt(1);
            pagerVO.setTotal(total);

            resultSet = helper.executeQuery("select * from tb_clazz " + whereSql + " limit " + ((current-1)*size) + "," + size);
            List<Clazz> list = new ArrayList<>();
            while (resultSet.next()){
                Clazz e = new Clazz();
                e.setClazzno(resultSet.getString("clazzno"));
                e.setName(resultSet.getString("name"));
                list.add(e);
            }
            pagerVO.setList(list);
            return pagerVO;
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            helper.closeDB();
        }
        return null;
    }

ClazzService

public PagerVO<Clazz> page(int current, int size, String clazzno, String name) {
        String whereSql = " where 1=1 ";
        if(name!=null){
            whereSql += " and name like '%" + name + "%'";
        }
        if(clazzno!=null){
            whereSql += " and clazzno like '%" + clazzno + "%'";
        }
        return dao.page(current,size,whereSql);
    }

删除功能

删除学生

StudentDao

    public int delete(String sno){
        JdbcHelper helper = new JdbcHelper();
        int res = helper.executeUpdate("delete from tb_student where sno = ?",sno);
        helper.closeDB();
        return res;
    }

StudentService

    public void delete(String sno){
        dao.delete(sno);
    }

删除班级

如果班级有学生，则不允许删除，并且提示。

  • StudentDao添加count的重载方法，统计某个班级的人数

ClazzDao

    public int delete(String clazzno){
        JdbcHelper helper = new JdbcHelper();
        int res = helper.executeUpdate("delete from tb_clazz where clazzno = ?",clazzno);
        helper.closeDB();
        return res;
    }

ClazzService

    StudentDao studentDao = new StudentDao();

    public String delete(String clazzno){
        int count = studentDao.count(" where clazzno = '" + clazzno + "'");
        if(count>0){
            return "删除失败，该班级已有"+count+"人";
        }
        dao.delete(clazzno);
        return null;
    }

新增、修改

写完每个功能记得测试一下

学生新增、修改

StudentDao

    //新增学生
    public int insert(Student student){
        JdbcHelper helper = new JdbcHelper();
        int res = helper.executeUpdate("insert into tb_student values(?,?,?,?,?,?,?,?,?)"
                ,student.getSno(),student.getPassword(),student.getName(),student.getTele()
                ,student.getEnterdate(),student.getAge(),student.getGender()
                ,student.getAddress(),student.getClazzno()
        );
        helper.closeDB();
        return res;
    }
    //修改学生
    public int update(Student student){
        JdbcHelper helper = new JdbcHelper();
        int res = 0;
        //为null的属性不做更新
        String sql = "update tb_student set ";
        List<Object> params = new ArrayList<>();
        if(student.getPassword()!=null){
            sql += "password = ?,";
            params.add(student.getPassword());
        }
        if(student.getName()!=null){
            sql += "name = ?,";
            params.add(student.getName());
        }
        if(student.getTele()!=null){
            sql += "tele = ?,";
            params.add(student.getTele());
        }
        if(student.getEnterdate()!=null){
            sql += "enterdate = ?,";
            params.add(student.getEnterdate());
        }
        if(student.getAge()!=null){
            sql += "age = ?,";
            params.add(student.getAge());
        }
        if(student.getGender()!=null){
            sql += "gender = ?,";
            params.add(student.getGender());
        }if(student.getAddress()!=null){
            sql += "address = ?,";
            params.add(student.getAddress());
        }
        if(student.getClazzno()!=null){
            sql += "clazzno = ?,";
            params.add(student.getClazzno());
        }
        sql = sql.substring(0,sql.length()-1);
        sql+=" where sno = '" + student.getSno() + "'";
        res = helper.executeUpdate(sql,params.toArray());
        helper.closeDB();
        return res;
    }

StudentService

    //新增学生
    public String insert(Student student){
        if(student.getSno() == null || student.getSno().equals("")){
            return "学生学号不可为空！";
        }if(student.getPassword() == null || student.getPassword().equals("")){
            return "密码不可为空！";
        }if(student.getName() == null || student.getName().equals("")){
            return "姓名不可为空！";
        }if(student.getClazzno() == null || student.getClazzno().equals("")){
            return "班级不可为空！";
        }
        //检查
        Student exists = dao.getBySno(student.getSno());
        if(exists!=null){
            return "学号已存在！";
        }
        dao.insert(student);
        return null;
    }
    //修改学生
    public String update(Student student){
        if(student.getSno() == null || student.getSno().equals("")){
            return "被修改学生学号不可为空！";
        }
        dao.update(student);
        return null;
    }

班级新增、修改

ClazzDao

    public int insert(Clazz clazz){
        JdbcHelper helper = new JdbcHelper();
        int res = helper.executeUpdate("insert into tb_clazz values(?,?)",clazz.getClazzno(),clazz.getName());
        helper.closeDB();
        return res;
    }

    public int update(Clazz clazz){
        JdbcHelper helper = new JdbcHelper();
        int res = 0;
        //为null的属性不做更新
        String sql = "update tb_clazz set name = ? where clazzno = ? ";
        res = helper.executeUpdate(sql,clazz.getName(),clazz.getClazzno());
        helper.closeDB();
        return res;
    }

    public Clazz getByClazzno(String clazzno){
        JdbcHelper helper = new JdbcHelper();
        ResultSet resultSet = helper.executeQuery("select * from tb_clazz where clazzno = ?",clazzno);
        try {
            if(resultSet.next()){
                Clazz clazz = new Clazz();
                clazz.setName(resultSet.getString("name"));
                clazz.setClazzno(resultSet.getString("clazzno"));
                return clazz;
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            helper.closeDB();
        }
        return null;
    }

ClazzService

    public String insert(Clazz clazz){
        if(clazz.getClazzno() == null || clazz.getClazzno().equals("")){
            return "班级编号不可为空！";
        }
        if(clazz.getName() == null || clazz.getName().equals("")){
            return "班级名不可为空！";
        }
        //检查
        Clazz exists = dao.getByClazzno(clazz.getClazzno());
        if(exists!=null){
            return "班级编号已存在！";
        }
        dao.insert(clazz);
        return null;
    }
    public String update(Clazz clazz){
        if(clazz.getClazzno() == null || clazz.getClazzno().equals("")){
            return "班级编号不可为空！";
        }
        dao.update(clazz);
        return null;
    }

班级管理实现

权限问题咱们后面再管！先把功能实现了再说！

先创建一个ClazzServlet，然后创建clazz-list.jsp页面

ClazzServlet

import com.hello.entity.Clazz;
import com.hello.utils.vo.PagerVO;
import com.hello.service.ClazzService;
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;

@WebServlet("/clazz")
public class ClazzServlet extends HttpServlet {
    ClazzService clazzService = new ClazzService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");// 设置前端获取参数编码
        //查询
        String current = req.getParameter("current");
        if(current == null){
            current = "1";
        }
        String clazzno = req.getParameter("clazzno");
        String name = req.getParameter("name");
        PagerVO<Clazz> pagerVO = clazzService.page(Integer.parseInt(current),10,clazzno,name);

        req.setAttribute("clazzno",clazzno);
        req.setAttribute("name",name);
        req.setAttribute("pagerVO",pagerVO);
        req.getRequestDispatcher("/WEB-INF/views/clazz-list.jsp").forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
    }
}

修改左侧栏导航地址

现在我们已经知道了班级页面访问地址，还有首页的地址,可以先写上去了

${pageContext.request.contextPath}/index.jsp
${pageContext.request.contextPath}/clazz
${pageContext.request.contextPath}/student

clazz-list.jsp

接下来来构建一个班级列表页

  • 1 创建clazz-list.jsp，把index.jsp的框架复制过来
  • 2 在笔下光年的lyear_ui_tables.html里面找一个table表格的样式，复制过来
  • 3 查询条件：lyear_forms_elements里面有个内联表单，很适合用来做列表页的查询条件
  • 4 渲染数据 , 能显示数据就算本步骤成功完成
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>班级列表</title>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/favicon.ico" type="image/ico">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <jsp:include page="_aside_header.jsp"></jsp:include>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <form style="margin-bottom: 15px" class="form-inline" action="${pageContext.request.contextPath}/clazz" method="get">
                                    <input type="hidden" name="current" id="current" value="1">
                                    <div class="form-group">
                                        <label>班级编号</label>
                                        <input class="form-control" type="text" value="${clazzno}" name="clazzno" placeholder="请输入班级编号">
                                    </div>
                                    <div class="form-group">
                                        <label>班级名</label>
                                        <input class="form-control" type="text" value="${name}" name="name" placeholder="请输入班级名">
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-purple btn-round" type="submit">查询</button>
                                    </div>
                                </form>

                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>班级编号</th>
                                        <th>班级名称</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${ pagerVO.list }" var="i" varStatus="s">
                                    <tr>
                                        <th scope="row">${s.count}</th>
                                        <td>${i.clazzno}</td>
                                        <td>${i.name}</td>
                                    </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/main.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(e) {

    });
</script>
</body>
</html>

前端分页功能

在笔下光年的lyear_ui_pagination.html里面找一个分页组件复制过来，然后结合后端渲染页码

要渲染页码内容，需要知道当前是第几页、一共有几页、是否可以点击上一页和下一页，这些可以在后端进行计算。

分页组件PagerVO添加功能并测试，测试完毕记得在Servlet里面调用!

    int totalPages;
    boolean showLeft;
    boolean showRight;
    int[] pageNums;

    public void init(){
        //计算页数
        totalPages = total / size;
        if(total % size > 0){
            totalPages ++;
        }
        //向左向右
        if(current == 1){
            showLeft = false;
        }else{
            showLeft = true;
        }
        if(current == totalPages){
            showRight = false;
        }else{
            showRight = true;
        }

        //计算起始页码和结束页码
        int min = current - 5;
        int max = current + 5;
        if(min < 1){
            min = 1;
        }
        if (max > totalPages){
            max = totalPages;
        }
        int length = max - min + 1;
        pageNums = new int[length];
        for (int i = 0; i < length; i++) {
            pageNums[i] = i + min;
        }
    }

渲染分页组件

<nav style="width: 100%;height: 80px">
    <ul class="pagination" style="float: right">
        <li id="pagesTip">
            <a style="border: none">共${pagerVO.total}条、${pagerVO.totalPages}页</a>
        </li>
        <li <c:if test="${pagerVO.showLeft}">class="disabled"</c:if> >
            <a href="javascript:gotoPage(${pagerVO.current-1})">
                <span><i class="mdi mdi-chevron-left"></i></span>
            </a>
        </li>
        <c:forEach items="${ pagerVO.pageNums }" var="i" varStatus="s">
            <li <c:if test="${i == pagerVO.current}">class="active"</c:if> >
                <a href="javascript:gotoPage(${i})">${i}</a>
            </li>
        </c:forEach>
        <li <c:if test="${pagerVO.showRight}">class="disabled"</c:if>>
            <a href="javascript:gotoPage(${pagerVO.current+1})">
                <span><i class="mdi mdi-chevron-right"></i></span>
            </a>
        </li>
    </ul>
</nav>
<!--头部加上点击事件，记得给form表单加上 id="form" -->
<script>
    function gotoPage(page) {
        $("#current").val(page)
        $("#form").submit()
    }
</script>

抽取分页组件,让学生页面也能用 _pager.jsp

班级增删改-servlet

ClazzServlet的doPost方法实现如下，实现了增删改的接口功能

别忘了doGet方法还要加请求新增页、编辑页的get请求！


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");// 设置编码，否则从前端获取参数乱码
        resp.setContentType("application/json; charset=utf-8");
        //请求类型
        String r = req.getParameter("r");
        if("add".equals(r) || "edit".equals(r)){
            String clazzno = req.getParameter("clazzno");
            String name = req.getParameter("name");
            Clazz clazz = new Clazz();
            clazz.setName(name);
            clazz.setClazzno(clazzno);
            if("add".equals(r)){
                String msg = clazzService.insert(clazz);
                if(msg!=null){
                    resp.getWriter().write(ApiResult.json(false,msg));
                    return;
                }else{
                    resp.getWriter().write(ApiResult.json(true,"保存成功"));
                    return;
                }
            }else{
                String msg = clazzService.update(clazz);
                if(msg!=null){
                    resp.getWriter().write(ApiResult.json(false,msg));
                    return;
                }else{
                    resp.getWriter().write(ApiResult.json(true,"保存成功"));
                    return;
                }
            }
        }
        if("del".equals(r)){
            //删除
            String clazzno = req.getParameter("clazzno");
            String msg = clazzService.delete(clazzno);
            if(msg!=null){
                resp.getWriter().write(ApiResult.json(false,msg));
                return;
            }else{
                resp.getWriter().write(ApiResult.json(true,"删除成功"));
                return;
            }
        }
    }

班级增删改-页面

clazz-add.jsp核心代码

<div class="card">
    <div class="card-header"><h4>新增班级</h4></div>
    <div class="card-body">
        <form id="myForm" action="${pageContext.request.contextPath}/clazz?r=add" method="post">
            <div class="form-group">
                <label >班级编号</label>
                <input class="form-control" type="text" name="clazzno">
            </div>
            <div class="form-group">
                <label >班级名</label>
                <input class="form-control" type="text" name="name">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </form>
    </div>
</div>

为了防止提交表单后，提示不够友好，我们应该使用ajax去提交数据


<!--消息提示-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/lightyear.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#myForm').on('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            lightyear.loading('show');
            // 序列化表单数据
            var formData = $(this).serialize();
            // 使用AJAX发送数据
            $.ajax({
                type: 'POST',
                url: $(this).attr("action"),
                data: formData,
                success: function(response) {
                    // 处理返回结果
                    if(response.success){
                        //成功
                        lightyear.loading('hide');
                        lightyear.url('clazz');
                        lightyear.notify(response.message, 'success', 500);
                    }else{
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'danger', 5000);
                    }
                },
                error: function(xhr, status, error) {
                    lightyear.loading('hide');
                    lightyear.notify("请求失败", 'danger', 5000);
                }
            });
        });
    });
</script>

在list.jsp里面添加操作列，添加编辑和删除按钮

编辑功能和新增功能非常相似，创建clazz-edit.jsp，修改表单内的几个关键代码，包括请求路径，被修改的数据渲染

删除功能核心代码


<!--消息提示-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/lightyear.js"></script>
<script type="text/javascript">
    function del(clazzno) {
        $.ajax({
            type: 'POST',
            url: 'clazz?r=del',
            data: {clazzno},
            success: function(response) {
                // 处理返回结果
                if(response.success){
                    //成功
                    lightyear.loading('hide');
                    lightyear.url('clazz');
                    lightyear.notify(response.message, 'success', 500);
                }else{
                    lightyear.loading('hide');
                    lightyear.notify(response.message, 'danger', 5000);
                }
            },
            error: function(xhr, status, error) {
                lightyear.loading('hide');
                lightyear.notify("请求失败", 'danger', 5000);
            }
        });
    }
</script>

学生管理实现

有了班级管理的经验，学生信息管理的操作大都和班级管理差不多，都可以直接copy过来，让我们一起化身CRUD工程师吧！

首先创建时间操作工具MyUtils,在获取入学时间的参数的转换需要用到

package com.hello.utils;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 时间操作工具
 */
public class MyUtils {
    /**
     * 字符串转日期
     */
    public static Date strToDate(String str){
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        try {
            return format.parse(str);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }

}

StudentServlet

package com.hello.servlet;

import com.hello.entity.Student;
import com.hello.service.StudentService;
import com.hello.utils.ApiResult;
import com.hello.utils.MyUtils;
import com.hello.utils.vo.PagerVO;

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;

@WebServlet("/student")
public class StudentServlet extends HttpServlet {
    StudentService studentService = new StudentService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");// 设置编码，否则从前端获取参数乱码
        //查询
        String r = req.getParameter("r");
        if(r == null){
            String current = req.getParameter("current");
            if(current == null){
                current = "1";
            }
            String sno = req.getParameter("sno");
            String gender = req.getParameter("gender");
            String name = req.getParameter("name");
            String clazzno = req.getParameter("clazzno");
            PagerVO<Student> pagerVO = studentService.page(Integer.parseInt(current),10,sno,name,gender,clazzno);
            pagerVO.init();

            req.setAttribute("sno",sno);
            req.setAttribute("gender",gender);
            req.setAttribute("clazzno",clazzno);
            req.setAttribute("name",name);
            req.setAttribute("pagerVO",pagerVO);
            req.getRequestDispatcher("/WEB-INF/views/student-list.jsp").forward(req, resp);
            return;
        }
        if("add".equals(r)){
            req.getRequestDispatcher("/WEB-INF/views/student-add.jsp").forward(req, resp);
            return;
        }
        if("edit".equals(r)){
            String sno = req.getParameter("sno");
            Student student = studentService.getBySno(sno);
            req.setAttribute("entity",student);
            req.getRequestDispatcher("/WEB-INF/views/student-edit.jsp").forward(req, resp);
            return;
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");// 设置编码，否则从前端获取参数乱码
        resp.setContentType("application/json; charset=utf-8");
        //请求类型
        String r = req.getParameter("r");
        if("add".equals(r) || "edit".equals(r)){
            Student student = new Student();
            student.setSno(req.getParameter("sno"));
            student.setPassword(req.getParameter("password"));
            student.setName(req.getParameter("name"));
            student.setTele(req.getParameter("tele"));
            student.setGender(req.getParameter("gender"));
            student.setAddress(req.getParameter("address"));
            student.setClazzno(req.getParameter("clazzno"));
            String enterdate = req.getParameter("enterdate");
            student.setEnterdate(MyUtils.strToDate(enterdate));
            String age = req.getParameter("age");
            student.setAge(Integer.parseInt(age));

            if("add".equals(r)){
                String msg = studentService.insert(student);
                if(msg!=null){
                    resp.getWriter().write(ApiResult.json(false,msg));
                    return;
                }else{
                    resp.getWriter().write(ApiResult.json(true,"保存成功"));
                    return;
                }
            }else{
                String msg = studentService.update(student);
                if(msg!=null){
                    resp.getWriter().write(ApiResult.json(false,msg));
                    return;
                }else{
                    resp.getWriter().write(ApiResult.json(true,"保存成功"));
                    return;
                }
            }
        }
        if("del".equals(r)){
            //删除
            String sno = req.getParameter("sno");
            studentService.delete(sno);
            resp.getWriter().write(ApiResult.json(true,"删除成功"));
            return;
        }
    }
}

student-list.jsp

复制clazz-list.jsp，修改查询条件、请求地址，总之和clazz相关的都要改成学生的。

写完代码不要忘记测试一下！

student-list.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>学生列表</title>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/favicon.ico" type="image/ico">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <jsp:include page="_aside_header.jsp"></jsp:include>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <form id="form" style="margin-bottom: 15px" class="form-inline" action="${pageContext.request.contextPath}/student" method="get">
                                    <input type="hidden" name="current" id="current" value="1">
                                    <div class="form-group">
                                        <label>学号</label>
                                        <input class="form-control" type="text" value="${sno}" name="sno" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <label>性别</label>
                                        <select class="form-control" name="gender" size="1">
                                            <option value="">请选择</option>
                                            <option <c:if test="${gender == 'm'}">selected</c:if> value="m">男</option>
                                            <option <c:if test="${gender == 'w'}">selected</c:if> value="w">女</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>班级编号</label>
                                        <input class="form-control" type="text" value="${clazzno}" name="clazzno" placeholder="请输入班级编号">
                                    </div>
                                    <div class="form-group">
                                        <label>姓名</label>
                                        <input class="form-control" type="text" value="${name}" name="name" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-purple btn-round" type="submit">查询</button>
                                        <button class="btn btn-success btn-round"
                                                onclick="location.href='${pageContext.request.contextPath}/student?r=add'"
                                                type="button">新增</button>
                                    </div>
                                </form>

                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>电话</th>
                                        <th>性别</th>
                                        <th>入学时间</th>
                                        <th>年龄</th>
                                        <th>电话</th>
                                        <th>班级</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${ pagerVO.list }" var="i" varStatus="s">
                                    <tr>
                                        <th scope="row">${s.count}</th>
                                        <td>${i.sno}</td>
                                        <td>${i.name}</td>
                                        <td>${i.tele}</td>
                                        <td>${i.gender == 'm' ? '男' : (i.gender == 'w'?'女':'')}</td>
                                        <td><fmt:formatDate value="${i.enterdate}" pattern="yyyy-MM-dd" /></td>
                                        <td>${i.age}</td>
                                        <td>${i.tele}</td>
                                        <td>${i.clazzno}</td>
                                        <td>
                                            <a class="btn btn-xs btn-purple" href="student?r=edit&sno=${i.sno}">编辑</a>
                                            <button class="btn btn-xs btn-danger" onclick="del('${i.sno}')">删除</button>
                                        </td>
                                    </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <jsp:include page="_pager.jsp"></jsp:include>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/main.min.js"></script>

<!--消息提示-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/lightyear.js"></script>
<script type="text/javascript">
    function del(sno) {
        $.ajax({
            type: 'POST',
            url: 'student?r=del',
            data: {sno},
            success: function(response) {
                // 处理返回结果
                if(response.success){
                    //成功
                    lightyear.loading('hide');
                    lightyear.url('student');
                    lightyear.notify(response.message, 'success', 500);
                }else{
                    lightyear.loading('hide');
                    lightyear.notify(response.message, 'danger', 5000);
                }
            },
            error: function(xhr, status, error) {
                lightyear.loading('hide');
                lightyear.notify("请求失败", 'danger', 5000);
            }
        });
    }
</script>
</body>
</html>

student-add.jsp

新增学生时候要为学生设置班级，那肯定不可能手动输入班级编号，需要在进入新增页面之前，从后端查询出班级数据，然后用下拉框去选择班级

在StudentServlet里面，改造一下新增编辑页的内容：

if("add".equals(r)){
    List<Clazz> clazzes = clazzService.listAll();
    req.setAttribute("clazzes",clazzes);
    req.getRequestDispatcher("/WEB-INF/views/student-add.jsp").forward(req, resp);
    return;
}
if("edit".equals(r)){
    List<Clazz> clazzes = clazzService.listAll();
    String sno = req.getParameter("sno");
    Student student = studentService.getBySno(sno);
    req.setAttribute("entity",student);
    req.setAttribute("clazzes",clazzes);
    req.getRequestDispatcher("/WEB-INF/views/student-edit.jsp").forward(req, resp);
    return;
}

student-add.jsp：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>新增学生</title>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/favicon.ico" type="image/ico">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.min.css" rel="stylesheet">
    <!--日期选择插件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <jsp:include page="_aside_header.jsp"></jsp:include>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="card">
                    <div class="card-header"><h4>新增学生</h4></div>
                    <div class="card-body">
                        <form id="myForm" action="${pageContext.request.contextPath}/student?r=add" method="post">
                            <div class="form-group">
                                <label >学号</label>
                                <input required class="form-control" type="text" name="sno">
                            </div>
                            <div class="form-group">
                                <label >密码</label>
                                <input required class="form-control" type="text" name="password">
                            </div>
                            <div class="form-group">
                                <label >姓名</label>
                                <input required class="form-control" type="text" name="name">
                            </div>
                            <div class="form-group">
                                <label >电话</label>
                                <input maxlength="11" class="form-control" type="number" name="tele">
                            </div>
                            <div class="form-group">
                                <label >入学时间</label>
                                <input class="form-control js-datepicker m-b-10" type="text"  name="enterdate" placeholder="yyyy-mm-dd"
                                       value="" data-date-format="yyyy-mm-dd" />
                            </div>
                            <div class="form-group">
                                <label >年龄</label>
                                <input class="form-control" type="number" name="age">
                            </div>
                            <div class="form-group">
                                <label >性别</label>
                                <div class="col-xs-12">
                                    <div class="radio">
                                        <label for="example-radio1">
                                            <input type="radio" id="example-radio1" name="gender" value="m">男
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label for="example-radio2">
                                            <input type="radio" id="example-radio2" name="gender" value="w">女
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label >班级编号</label>
                                <select class="form-control" name="clazzno" size="1">
                                    <option value="">请选择</option>
                                    <c:forEach items="${ clazzes }" var="i" varStatus="s">
                                        <option value="${i.clazzno}">${i.clazzno} / ${i.name}</option>
                                    </c:forEach>
                                </select>

                            </div>
                            <div class="form-group">
                                <label >详细地址</label>
                                <textarea class="form-control" name="address"></textarea>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/main.min.js"></script>
<!--日期选择插件-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--消息提示-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/lightyear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#myForm').on('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            lightyear.loading('show');
            // 序列化表单数据
            var formData = $(this).serialize();
            // 使用AJAX发送数据
            $.ajax({
                type: 'POST',
                url: $(this).attr("action"),
                data: formData,
                success: function(response) {
                    // 处理返回结果
                    if(response.success){
                        //成功
                        lightyear.loading('hide');
                        lightyear.url('student');
                        lightyear.notify(response.message, 'success', 500);
                    }else{
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'danger', 5000);
                    }
                },
                error: function(xhr, status, error) {
                    lightyear.loading('hide');
                    lightyear.notify("请求失败", 'danger', 5000);
                }
            });
        });
    });
</script>
</body>
</html>

student-edit.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>编辑学生</title>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/favicon.ico" type="image/ico">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.min.css" rel="stylesheet">
    <!--日期选择插件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <jsp:include page="_aside_header.jsp"></jsp:include>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="card">
                    <div class="card-header"><h4>编辑学生</h4></div>
                    <div class="card-body">
                        <form id="myForm" action="${pageContext.request.contextPath}/student?r=edit" method="post">
                            <div class="form-group">
                                <label >学号</label>
                                <input required readonly class="form-control" type="text" name="sno" value="${entity.sno}">
                            </div>
                            <div class="form-group">
                                <label >密码</label>
                                <input required class="form-control" type="password" name="password" value="${entity.password}">
                            </div>
                            <div class="form-group">
                                <label >姓名</label>
                                <input required class="form-control" type="text" name="name" value="${entity.name}">
                            </div>
                            <div class="form-group">
                                <label >电话</label>
                                <input maxlength="11" class="form-control" type="number" name="tele" value="${entity.tele}">
                            </div>
                            <div class="form-group">
                                <label >入学时间</label>
                                <input class="form-control js-datepicker m-b-10" type="text"  name="enterdate" placeholder="yyyy-mm-dd"
                                       value="${entity.enterdate}" data-date-format="yyyy-mm-dd" />
                            </div>
                            <div class="form-group">
                                <label >年龄</label>
                                <input class="form-control" type="number" name="age" value="${entity.age}">
                            </div>
                            <div class="form-group">
                                <label >性别</label>
                                <div class="col-xs-12">
                                    <div class="radio">
                                        <label for="example-radio1">
                                            <input <c:if test="${entity.gender=='m'}">checked</c:if> type="radio" id="example-radio1" name="gender" value="m">男
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label for="example-radio2">
                                            <input <c:if test="${entity.gender=='w'}">checked</c:if> type="radio" id="example-radio2" name="gender" value="w">女
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label >班级编号</label>
                                <select class="form-control" name="clazzno" size="1">
                                    <option value="">请选择</option>
                                    <c:forEach items="${ clazzes }" var="i" varStatus="s">
                                        <option <c:if test="${entity.clazzno== i.clazzno}">selected</c:if> value="${i.clazzno}">${i.clazzno} / ${i.name}</option>
                                    </c:forEach>
                                </select>

                            </div>
                            <div class="form-group">
                                <label >详细地址</label>
                                <textarea class="form-control" name="address">${entity.address}</textarea>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/main.min.js"></script>
<!--日期选择插件-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--消息提示-->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/lightyear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#myForm').on('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            lightyear.loading('show');
            // 序列化表单数据
            var formData = $(this).serialize();
            // 使用AJAX发送数据
            $.ajax({
                type: 'POST',
                url: $(this).attr("action"),
                data: formData,
                success: function(response) {
                    // 处理返回结果
                    if(response.success){
                        //成功
                        lightyear.loading('hide');
                        lightyear.url('student');
                        lightyear.notify(response.message, 'success', 500);
                    }else{
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'danger', 5000);
                    }
                },
                error: function(xhr, status, error) {
                    lightyear.loading('hide');
                    lightyear.notify("请求失败", 'danger', 5000);
                }
            });
        });
    });
</script>
</body>
</html>
联系学长 可订做Java、C#、C++、数据库、Vue、SpringBoot、SSM
Copyright © 2025 学长敲代码