阿凡达

未来可期

285篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

thymeleaf - java web页面模板引擎介绍（下篇）

阿凡达2018-07-20 14:08

--thymeleaf提交form表单

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link th:src="@{/css/main.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/ydaq.js}" ></script>
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
    <p>Id: <input type="text" th:field="*{id}" /></p>
    <p>Message: <input type="text" th:field="*{content}" /></p>
    <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</body>
</html>
    @PostMapping("/greeting")
    public String greetingSubmit(@ModelAttribute Greeting greeting) {
        return "result";
    }
thymeleaf对form表单做了很好的支持，GreetingController方法中的post参数为Greeting对象，form中action=“#”表示为根路径， th:action="@{/greeting}"代表post请求的地址， th:object="${greeting}"为定义的一个对象值，method=“post”指定为post协议。form表单中的 th:field="*{id}"或 th:text="*{id}"方法表示引用对象的值。这样就完成了一个form表单的提交。
--thymeleaf for循环遍历list集合
上面例子中Attribute中返回allDbsource对应的为一个List<MserverDatasource>数组，前端遍历对象并显示在select框中。首先使用th:each="dbsource,dbsourceStat : allDbsource"语法获取到allDbsource数组并定义取到的数组中单个对象为dbsource名，后面th:text="{dbsource.name}+ dbsource.ip+′:′+{dbsource.port}"则引用单个对象中的属性并赋值为text属性，这样展示的结果便为：

对于thymeleaf的标签使用可以在网上找到中文api做参照联系。最后再介绍一个比较常用的场景thymeleaf的分页查询的实现。
四、thymeleaf、 pagehelper与mybatis实现分页查询功能
1、首先需要pom引入pagehelper的依赖 
                <!--分页插件 -->
		<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
        <!--通用Mapper -->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper</artifactId>
            <version>3.3.9</version>
        </dependency>
2、控制器实现pageInfo构造,需要返回pageInfo对象。对象默认配置可以更改 
	@GetMapping("/showAllDb")
    public String showParams(Model model,@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5")Integer pageSize) {
		
		PageInfo pageInfo =  mserverDbserverService.findAll(pageNum, pageSize);
		//获得当前页
        model.addAttribute("pageNum", pageInfo.getPageNum());
        //获得一页显示的条数
        model.addAttribute("pageSize", pageInfo.getPageSize());
        //是否是第一页
        model.addAttribute("isFirstPage", pageInfo.isIsFirstPage());
        //获得总页数
        model.addAttribute("totalPages", pageInfo.getPages());
        //是否是最后一页
        model.addAttribute("isLastPage", pageInfo.isIsLastPage());
        model.addAttribute("mserverDbserverList", pageInfo.getList());	
        return "dbshow";
    }
3、html支持分页功能， th:href="@{${'/showAllDb'}为数据源的请求url，这样即实现了显示共多少页数据，以及点击展示确定页数的数据功能。 
<div >
	<nav>
		<ul >
			<li><a href="">&laquo;</a></li>
			<li><a th:if="${not isFirstPage}"
				th:href="@{${'/showAllDb'}(pageNum=${pageNum-1},pageSize=${pageSize},type=2)}">Previous</a>
				<a th:if="${isFirstPagee}" href="javascript:void(0);">Previous</a>
			</li>

			<li th:each="pageNo:${#numbers.sequence(1, totalPages)}">
				<a th:if="${pageNum eq pageNo}" href="javascript:void(0);">
					<span th:text="${pageNo}"></span>
			</a> <a th:if="${not (pageNum eq pageNo)}"
				th:href="@{${'/showAllDb'}(pageNum=${pageNo},size=${pageSize},type=2)}">
					<span th:text="${pageNo}"></span>
			</a>
			</li>
			<li><a th:if="${not isLastPage}"
				th:href="@{${'/showAllDb'}(pageNum=${pageNum+1},size=${pageSize},type=2)}">Next</a>
				<a th:if="${isLastPage}" href="javascript:void(0);">Next</a>
			</li>
			<li><a href="#">&raquo;</a></li>
		</ul>
	</nav>
</div>


相关阅读：thymeleaf - java web页面模板引擎介绍（上篇）

本文来自网易实践者社区，经作者王海鹏授权发布。


推荐博客