Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC
Thymeleaf的官方例子https://github.com/thymeleaf/thymeleafexamples-petclinic
(一)Thymeleaf基础知识
Thymeleaf是一个java类库,他是一个xml/xhtml/html5的模板引擎,且提供额外的模块与Spring MVC集成,可以作为MVC的Web应用的View层,取代jsp。
1.引入Thymeleaf
通过命名空间xmlns:th=http://www.thymeleaf.org,将静态页面转换为动态视图,th:前缀
2.访问Model的数据
通过“${}”访问model中的属性
3.Model中的数据迭代
与jsp类似
4.数据判断
e.g.<div th:if="${not # lists.isEmpty(people)}">
${not # lists.isEmpty(people)}表达式判断people是否为空
5.在JavaScript中访问model
<th:inline="javascript">
e.g.var single = [[${singlePerson}]];
[[${}]]格式获得实际的值
(二)Spring boot实例
1.创建项目时添加Thymeleaf依赖,会自动包含spring-boot-starter-web
2.JavaBean
Person.java
package com;
public class Person {
private String name;
private Integer age;
public Person(){
}
public Person(String name, Integer age) {
super();
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
3.演示页面
haha.html放置在src/main/resources/templates下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<div>
<span th:text="${singlePerson.name}"></span>
</div>
<div th:if="${not # lists.isEmpty(people)}">
<h3 >列表</h3>
</div>
<div>
<ul>
<li th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
<button th:onclick="'getName(\'' + ${person.name} + '\');'">获取名字</button>
</li>
</ul>
</div>
<script th:inline="javascript">
var single = [[${singlePerson}]];
alert(single.name +"/" + single.age);
function getName(name){
alert(name);
}
</script>
</body>
</html>
application.properties默认配置如下,根据需求修改
# THYMELEAF (ThymeleafAutoConfiguration)
spring.thymeleaf.cache=true # Enable template caching.
spring.thymeleaf.check-template=true # Check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Check that the templates location exists.
spring.thymeleaf.content-type=text/html # Content-Type value.
spring.thymeleaf.enabled=true # Enable MVC Thymeleaf view resolution.
spring.thymeleaf.encoding=UTF-8 # Template encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
5.数据及程序入口
ThymeleafdemoApplication.java
package com;
import java.util.ArrayList;
import java.util.List;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@SpringBootApplication
public class ThymeleafdemoApplication {
@RequestMapping("/")
public String index(Model model){
Person single = new Person("aa",11);
List<Person> people = new ArrayList<Person>();
people.add(new Person("xx",11));
people.add(new Person("yy",22));
people.add(new Person("zz",33));
model.addAttribute("people", people);
model.addAttribute("singlePerson", single);
return "haha";
}
public static void main(String[] args) {
SpringApplication.run(ThymeleafdemoApplication.class, args);
}
}
运行——结果
1.访问http://localhost:8080
2.弹出窗口,获取到single对象的属性(name,age)
3.单机获取名字,取得对应model的name