持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

项目实战

Thymeleaf入门到吃灰 - 鞋破露脚尖儿 - 博客园 (cnblogs.com)

编辑修改仓库信息

将之前的html拿过来，这里想通过点击水果的链接获取fid并跳转到对应的修改页面，有两种链接方式：

<-- 字符串拼接 -->
<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>

这样当我们点击链接时便会跳转到/edit.do?fid=fruit.fid的页面，所以需要设置一个/edit.do路径

@WebServlet("/edit.do")
public class EditServlet extends ViewBaseServlet {
    private FruitDao fruitDao=new FruitDaoImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String fidStr = req.getParameter("fid");
        if (fidStr!=null && !"".equals(fidStr)){
            int fid = Integer.parseInt(fidStr);
            Fruit fruit = fruitDao.getFruitByFid(fid);
            req.setAttribute("fruit",fruit);
            super.processTemplate("edit",req,resp);
        }
    }
}

访问/edit.do时会获取fid信息，若不为空，则会赋值给fruit，并跳转到edit.html页面，也就是修改页面

所以此时要写一个修改的页面

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <div id="div">
        <div id="div_list">
            <table id="tbl_list" th:object="${fruit}">
                <p class="p">欢迎来到水果售货系统3！</p>
                <tr>
                    <th>名称:</th>
<!--                    <td><input type="text" name="fname" th:value="${fruit.fname}"></td>-->
                    <td><input type="text" name="fname""></td>
                </tr>
                <tr>
                    <th>单价:</th>
                    <td><input type="text" name="price""></td>
                </tr>
                <tr>
                    <th>库存:</th>
                    <td><input type="text" name="fcount""></td>
                </tr>
                <tr>
                    <th>备注:</th>
                    <td><input type="text" name="remark""></td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="修改">
                    </th>
                </tr>
            </table>
    </div>
    </div>
</body>
</html>

设置默认值

<td><input type="text" name="fname" th:value="${fruit.fname}"></td>
<td><input type="text" name="price" th:value="${fruit.price}"></td>
......

这种方式前边都有fruit重用写过高，所以可以换成<th:object="${fruit}"> 和*{属性}的形式来降低重用

此时当点击链接后，则会跳转到对应的页面，并且上边会有默认的值

但此时的修改按钮还没有给任何的值，所以并没有修改功能，所以在table外添加一个表单，当点击提交时，则会通过post的方式将值发送给/update.do

<form th:action="@{/update.do}" method="post" th:object="${fruit}">

这就需要写一个接受/update.do的类

@WebServlet("/update.do")
public class UpdateServlet extends ViewBaseServlet {
    private FruitDao fruitDao=new FruitDaoImpl();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、设置编码
        req.setCharacterEncoding("UTF-8");
        //2、获取参数
        String fidStr = req.getParameter("fid");
        int fid = Integer.parseInt(fidStr);
        String fname = req.getParameter("fname");
        String priceStr = req.getParameter("price");
        int price = Integer.parseInt(priceStr);
        String fcountStr = req.getParameter("fcount");
        int fcount = Integer.parseInt(fcountStr);
        String remark = req.getParameter("remark");

        //3、执行更新
        fruitDao.updateFruit(new Fruit(fid,fname,price,fcount,remark));

        //4、资源跳转
        //super.processTemplate("index",req,resp);
        resp.sendRedirect("index");
    }
}

获取各个参数，并执行updateFruit方法，最终跳转到index.html查看修改后信息

Thymeleaf项目实战(一)

项目实战

编辑修改仓库信息