使用HTML、Thymeleaf和Servlet实现增删查改功能

本文将介绍如何使用HTML、Thymeleaf和Servlet技术创建一个简单的Web页面，实现对'水果'数据的增删查改操作。以下将展示三个页面的代码示例：查询页面 (index.html)、添加页面 (add.html) 和编辑页面 (edit.html)。

**1. 查询页面 (index.html):**html

水果列表

<form action='/index' method='get'>        <input type='text' name='keyword' placeholder='输入关键字查询'>        <button type='submit'>查询</button>    </form>

<table>        <tr>            <th>编号</th>            <th>名称</th>            <!-- 其他列 -->            <th>操作</th>        </tr>        <tr th:each='fruit : ${searchResult}'>            <td th:text='${fruit.id}'></td>            <td th:text='${fruit.name}'></td>            <!-- 其他列 -->            <td>                <a th:href='@{/edit?id=${fruit.id}}'>编辑</a>                <a th:href='@{/delete?id=${fruit.id}}'>删除</a>            </td>        </tr>    </table>

<a href='/add'>添加水果</a></body></html>

• 该页面展示了水果列表，并提供了一个搜索框用于根据关键字查询。* 表格中每一行数据都包含编辑和删除操作的链接。* 页面底部提供了一个添加水果的链接。

**2. 添加页面 (add.html):**html

添加水果

<form action='/add' method='post'>        <label for='name'>名称：</label>        <input type='text' id='name' name='name' required>

    <!-- 其他表单字段 -->

    <button type='submit'>添加</button>    </form></body></html>

• 该页面提供了一个表单用于添加新的水果信息。* 表单提交后，数据将被发送到后端进行处理。

**3. 编辑页面 (edit.html):**html

编辑水果

<form action='/edit' method='post'>        <input type='hidden' name='id' th:value='${fruit.id}'>

    <label for='name'>名称：</label>        <input type='text' id='name' name='name' th:value='${fruit.name}' required>

    <!-- 其他表单字段 -->

    <button type='submit'>保存</button>    </form></body></html>

• 该页面用于编辑已有水果的信息。* 表单中包含一个隐藏字段用于传递水果的ID。* 表单提交后，更新后的数据将被发送到后端进行处理。

注意：

• 以上代码示例使用了Thymeleaf模板引擎来简化页面开发。* 你需要根据实际情况修改代码中的URL路径和数据字段。* 确保已在项目中正确引入Thymeleaf依赖，并配置好Servlet和数据处理逻辑。

希望这篇简短的教程能够帮助你理解如何使用HTML、Thymeleaf和Servlet实现增删查改功能。