thymeleaf

最新推荐文章于 2022-07-11 10:50:19 发布

cww299

最新推荐文章于 2022-07-11 10:50:19 发布

阅读量148

点赞数

文章标签： thymeleaf springboot

本文链接：https://blog.csdn.net/erjiujiu/article/details/102777030

版权

springboot集成thymeleaf

添加依赖
在这里插入图片描述

    <!-- thmyeleaf -->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>	
	</dependency>

配置thymeleaf application.properties文件
在这里插入图片描述

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false
spring.thymeleaf.cache=false

编写接口
在这里插入图片描述

	/*
	 * 登录页面
	 */
	@RequestMapping("/toLogin")
	public String toLogin(Model m){
		return "login";
	}

编写thymeleaf页面 login.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>login</title>
    <script type="text/javascript" th:src="@{/jquery-3.4.1-min.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    	body{
    		text-align:center;
    	}
    </style>
</head>
<body>
	<table>
		<tr>
			<td>账号：</td>
			<td><input type="text" id="username" /></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" id="password" /></td>
		</tr>
		<tr>
			<td colspan="2"><button id="login">登录</button></td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	$('#login').click(function(){
		$.ajax({
			url:'http://localhost:8080/login',
			data:{
				username: $('#username').val(),
				password: $('#password').val(),
			},
			success:function(r){
				alert(r);
			}
		})
	})
</script>
</html>