Servlet、Thymeleaf、HTML、CSS结合实现：增删改查与分页-CFANZ编程社区

主页面

【index.html】

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/index.css">
  <script charset="GBK" language="JavaScript" type="text/javascript" src="js/index.js" >
  </script>
</head>
<body>
<div id="div_container">
  <div id="div_fruit_list">
    <p class="center f30">欢迎使用水果库存后台管理系统</p>
    <div style="border:0px solid red;width:60%;margin-left:20%;text-align: right;">
      <!-- 关键字查询功能：启动页面以及未输入关键字直接点击搜索按钮时，都是直接显示所有列表信息 -->
      <form th:action="@{/index}" method="post" style="float: left;">
        <input type="hidden" name="operate" value="search"/>
        请输入查询关键字：<input type="text" name="keyword" th:value="${session.keyword}">
        <input type="submit" value="查询" class="btn">
      </form>
      <!-- 添加数据链接 -->
      <a th:href="@{/add.html}" style="border:0px solid blue;margin-bottom:4px;">添加库存记录</a>
    </div>
    <!-- 列表显示 -->
    <table id="tbl_fruit">
      <tr>
        <th class="w20">名称</th>
        <th class="w20">单价</th>
        <th class="w20">库存</th>
        <th>操作</th>
      </tr>
      <!-- 查询列表为空的情况 -->
      <tr th:if="${#lists.isEmpty(session.fruitList)}">
        <td colspan="4">对不起，库存为空！</td>
      </tr>
      <!-- 点击进入editServlet,将需要修改的内容传至编辑页面 -->
      <tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}">
        <!--<td><a  th:text="${fruit.fname}" th:href="@{'/edit.do?fid=' + ${fruit.fid}}"> 苹果 </a></td>
       -->
       <!-- 查询列表不为空的情况 -->
        <td><a  th:text="${fruit.fname}" th:href="@{/edit.do(fid=${fruit.fid})}"> 苹果 </a></td>
        <td th:text="${fruit.price}">5</td>
        <td th:text="${fruit.fcount}">20</td>
        <!--<td><img src="imgs/deleteIcon.jpg" class="deleteImg" th:οnclick="'delFruit('+${fruit.fid}+')'"/></td>
       -->
        <!-- 删除操作 -->
        <td><img src="imgs/deleteIcon.jpg" class="deleteImg" th:onclick="|delFruit(${fruit.fid})|"/></td>
      </tr>
    </table>
    <!--分页功能-->
    <div style="width:60%;margin-left:20%;padding-top: 4px;" class="center">
      <input type="button" value="首 页" class="btn" th:onclick="|page(1)|" th:disabled="${session.pageNum==1}">
      <input type="button" value="上一页" class="btn" th:onclick="|page(${session.pageNum-1})|" th:disabled="${session.pageNum==1}">
      <input type="button" value="下一页" class="btn" th:onclick="|page(${session.pageNum+1})|" th:disabled="${session.pageNum==session.pageCount}">
      <input type="button" value="尾 页" class="btn" th:onclick="|page(${session.pageCount})|" th:disabled="${session.pageNum==session.pageCount}">
    </div>
  </div>
</div>
</body>
</html>

主页面对应的CSS

【index.css】

*{
	color:threeddarkshadow;
}

a{
	text-decoration: none;
}

body{
	margin:0;
	padding:0;
	background-color:#808080;
}
div{
	position:relative;
	float:left;
}
#div_container{
	width:80%;
	height:100%;
	border:0px solid blue;
	margin-left:10%;
	float:left;
	background-color:honeydew;
	/*设置边框轮廓为圆角*/
	border-radius:25px;
}
#div_fruit_list{
    width:100%;
	border:0px solid red;
}
#tbl_fruit{
    /*设置表格宽度：页面宽度的60%*/
	width:60%;
	/*设置每行单元格高度*/
	line-height:28px;
	/*设置表格和页面边框上方的距离*/
	margin-top:20px;
	/*设置表格和页面边框左边的距离*/
	margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    border:1px solid gray;
    /*单元格边界合并*/
	border-collapse:collapse;
    /*单元格文字居中*/
	text-align:center;
    /*设置单元格文字样式*/
	font-size:16px;
	font-family:"楷体";
	font-weight:lighter;
	color:threeddarkshadow;
}
.w20{
    width:20%;
}
.deleteImg{
    width:24px;
	height:24px;
}

#add_friut_div{
    border:0px solid red;
	width:40%;
	margin-left:30%;

}

#add_friut_table{

    margin-top:32px;
	width:80%;
	/*设置每行单元格高度*/
	line-height:28px;
	
	margin-left:10%;
	/*单元格边界合并*/
	border-collapse:collapse;
	
}

#add_friut_table,#add_friut_table tr,#add_friut_table td{
    border:1px solid lightgrey;
	
	/*单元格文字居中*/
	text-align:center;
    /*设置单元格文字样式*/
	font-size:16px;
	font-family:"楷体";
	font-weight:lighter;
	color:threeddarkshadow;
}

.btn{
    border:1px solid lightgrey;
	width:100px;
}
.w30{
    width:30%;
}
.input{
    padding-left:4px;
    border:1px solid lightgrey;
	width:80%;
}

.center{
	text-align: center;
}

.f30{
	font-size: 30px;
}

主页面对应的JS

【index.js】

function delFruit(fid) {
    if (confirm('是否确认删除？')) {
        window.location.href='del.do?fid=' + fid;
    }
}

function page(pageNum) {
    window.location.href="index?pageNum=" + pageNum;
}

主页面对应的Servlet(查询与分页)

【indexServlet.java】

//servlet从3.0版本开始支持注解方式的注册
@WebServlet("/index")
public class indexServlet extends ViewBaseServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        HttpSession session = request.getSession();

        //设置当前页：默认值为1
        int pageNum = 1;
        //
        String operate = request.getParameter("operate");
        //如果operate!=null，说明：通过表单的查询按钮点击过来的
        //如果operate==null，说明：不是通过表单的查询按钮点击过来的

        String keyword = null;
        if (StringUtil.isNotEmpty(operate) && "search".equals(operate)) {
            //说明是点击表单查询发送过来的请求
            //此时，pageNum应该还原为1，keyword应该从请求参数中获取
            pageNum = 1;
            keyword = request.getParameter("keyword");
            //如果keyword为null，需要设置为""，否则查询时会拼接成 %null%，我们期望的是 %%
            if (StringUtil.isEmpty(keyword)) {
                keyword = "";
            }
            //将keyword把偶才能（覆盖）到session中
            session.setAttribute("keyword",keyword);
        }else {
            //说明此处不是是点击表单查询发送过来的请求，比如点击上一页，下一页或者直接在地址栏输入网址
            //此时keyword 应该从session的作用域获取
            String pageNumStr = request.getParameter("pageNum");
            if(StringUtil.isNotEmpty(pageNumStr)) {
                //如果从请求中读取到pageNum，则类型转换，否则默认为1
                pageNum = Integer.parseInt(pageNumStr);
            }
            //如果不是点击的查询按钮，那么查询是基于session中保存的现有keyword进行查询
            Object keywordObj = session.getAttribute("keyword");
            if (keywordObj != null) {
                keyword = (String) keywordObj;
            }else {
                keyword = "";
            }
        }

        //重新更新当前页的值
        session.setAttribute("pageNum",pageNum);

        FruitDAO fruitDAO = new FruitDAOImpl();
        //List<Fruit> fruitList = fruitDAO.getFruitList();

        List<Fruit> fruitList = fruitDAO.getFruitList(keyword,pageNum);
       // System.out.println(fruitList);

        //保存到session作用域
        session.setAttribute("fruitList", fruitList);

        int count = fruitDAO.getFruitCount(keyword);
        int pageCount = (count + 5 - 1) / 5;
        /*
            总记录条数  总页数
            1          1
            5          1
            6          2
            10         2
            11         3
            count     (count + 5 -1)%5
         */
        session.setAttribute("pageCount", pageCount);

        //此处的视图名称是 index
        //那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图名称 上去
        //逻辑视图名称：index
        //物理视图名称：view-prefix + 逻辑视图名称 + view-suffix
        //所以真实的视图名称：/index.html
        super.processTemplate("index",request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request,response);
    }
}

添加页面

【add.html】

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/add.css">
  <!--<script type="text/javascript" src="js/demo09.js">-->
  </script>
</head>
<body>
<div id="div_container">
  <div id="div_fruit_list">
    <p class="center f30">编辑库存信息1</p>
    <!--<form th:action = "@{/add.do}" method="post">-->
    <form action="add.do" method="post">

      <table id="tbl_fruit" >
         <tr>
          <th class="w20">名称</th>
          <!--<td><input type="text" name="fname" th:value="${fruit.fname}"/></td>-->
          <td><input type="text" name="fname"/></td>
        </tr>

        <tr>
          <th class="w20">单价</th>
          <td><input type="text" name="price"/></td>
        </tr>

        <tr>
          <th class="w20">库存</th>
          <td><input type="text" name="fcount"/></td>
        </tr>

        <tr>
          <th class="w20">备注</th>
          <td><input type="text" name="remark"/></td>
        </tr>

        <tr>
          <th colspan="2">
            <input type="submit" value="添加"/>
          </th>
        </tr>
      </table>
    </form>
  </div>
</div>
</body>
</html>

注：add.css与index.css一致

添加页面对应的Servlet

【addServlet.java】

@WebServlet("/add.do")
public class AddServlet extends ViewBaseServlet {
    private FruitDAO fruitDAO = new FruitDAOImpl();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");

        String fname = request.getParameter("fname");
        int price = Integer.parseInt(request.getParameter("price"));
        String remark = request.getParameter("remark");
        int fcount = Integer.parseInt(request.getParameter("fcount"));

        Fruit fruit = new Fruit(fname,price,fcount,remark);
        System.out.println(fruit);
        fruitDAO.addFruit(fruit);
        
        response.sendRedirect("index");
    }
}

编辑（修改）页面对应的Servlet

【edit.html】

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/edit.css">
  <!--<script type="text/javascript" src="js/demo09.js">-->
  </script>
</head>
<body>
<div id="div_container">
  <div id="div_fruit_list">
    <p class="center f30">编辑库存信息2</p>
    <form th:action = "@{/update.do}" method="post" th:object="${fruit}">
      <!--隐藏域：功能类似于文本框，它的值会随着表单的发送也会发送给服务器，但是界面上用户看不到-->
      <input type="hidden" name="fid" th:value="*{fid}"/>
      <table id="tbl_fruit" >
         <tr>
          <th class="w20">名称</th>
          <!--<td><input type="text" name="fname" th:value="${fruit.fname}"/></td>-->
          <td><input type="text" name="fname" th:value="*{fname}"/></td>
        </tr>

        <tr>
          <th class="w20">单价</th>
          <td><input type="text" name="price" th:value="*{price}"/></td>
        </tr>

        <tr>
          <th class="w20">库存</th>
          <td><input type="text" name="fcount" th:value="*{fcount}"/></td>
        </tr>

        <tr>
          <th class="w20">备注</th>
          <td><input type="text" name="remark" th:value="*{remark}"/></td>
        </tr>

        <tr>
          <th colspan="2"><input type="submit" value="提交"/></th>
        </tr>
      </table>
    </form>
  </div>
</div>
</body>
</html>

注：edit.css与index.css一致

编辑（修改）页面对应的Servlet

【EditServlet.java】

@WebServlet("/edit.do")
public class EditServlet extends ViewBaseServlet {

    private FruitDAO fruitDAO = new FruitDAOImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String strId = request.getParameter("fid");
        //当fid不为空时，将对应的fruit信息传至edit.html页面
        if (StringUtil.isNotEmpty(strId)) {
            int fid = Integer.parseInt(strId);
            Fruit fruit = fruitDAO.getFruitByFid(fid);
            request.setAttribute("fruit", fruit);
            super.processTemplate("edit", request,response);
        }
    }
}

【UpdateServlet.java】

@WebServlet("/update.do")
public class UpdateServlet extends ViewBaseServlet {
    private FruitDAO fruitDAO = new FruitDAOImpl();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.设置编码
        request.setCharacterEncoding("UTF-8");

        //2.获取参数
        String fname = request.getParameter("fname");
        String priceStr = request.getParameter("price");
        int price = Integer.parseInt(priceStr);
        String countStr = request.getParameter("fcount");
        int fcount = Integer.parseInt(countStr);
        String remark = request.getParameter("remark");

        String FidStr = request.getParameter("fid");
        int fid = Integer.parseInt(FidStr);

        //3.执行更新
        Fruit fruit = new Fruit(fid, fname,price,fcount,remark);
        fruitDAO.updateFruit(fruit);

        //4.资源跳转
        //super.processTemplate("index",request,response);
        //相当于request.getRequestDispatcher("index.html").forward(request,response);
        //此处需要重定向，目的是重新给IndexServlet发请求，重新获取fruitList,然后覆盖到session中，这样index.html页面显示的session的数据才是最新的
        response.sendRedirect("index");
    }
}

删除操作对应的Servlet

【deleteServlet.java】

@WebServlet("/del.do")
public class DelServlet extends ViewBaseServlet {
    private FruitDAO fruitDAO = new FruitDAOImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String fidStr = request.getParameter("fid");
        if (StringUtil.isNotEmpty(fidStr)) {
            int fid = Integer.parseInt(fidStr);
            fruitDAO.delFruit(fid);
            response.sendRedirect("index");
        }
    }
}