1.添加Thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.代码目录结构
QQ图片20180908140947.png
resources下static文件夹存放images、css、js等静态资源
templates存放Thymeleaf模板页面
3.Controller层代码
package com.niit.quickstart.controller;
import com.niit.quickstart.bean.Test1;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import javax.annotation.Resource;
@Controller
public class IndexController {
@Resource
private Test1 test1;
@RequestMapping(value = "/index",method = RequestMethod.GET)
public String index(ModelMap map){
test1.setName("张康宁");
test1.setAge(20);
test1.setMale("男");
map.addAttribute("test1",test1);
return "index";
}
}
4. html页面头部添加thymeleaf名称空间声明
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
</head>
<body>
<h2>Hello world</h2>
<h5>哇咔咔咔</h5>
<div class="alert alert-success">
<p th:text="${test1.name}"></p>
</div>
</body>
</html>
5. 通过Webjars引用静态资源
Java Web前端通常需要使用JS或CSS技术，例如jQuery, Backbone.js，Twitter Bootstrap等等。以前我都是将这些Web资源拷贝到Java Web项目的Webapp相应目录下，这种通过人工方式拷贝可能会产生版本误差，拷贝版本错误，漏拷等现象，前端页面就无法正确展示。
WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包，这样在Java Web开发中我们可以借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
index.html
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
</head>
<body>
<h2>Hello world</h2>
<h5>哇咔咔咔</h5>
<div class="alert alert-success">
<p th:text="${test1.name}"></p>
</div>
</body>
</html>
网友评论