web开发是开发中至关重要的一部分，大部分的项目以web开发为基础。本篇开始结合实例讲述Spring Boot的Web开发支持。
之前建项目的时候已经知道，Spring Boot提供了spring-boot-starter-web为Web开发予以支持，提供了内嵌了的Tomcat和Spring MVC依赖。接下来会详细描述Spring Boot是如何支持web开发的。
1.Thymeleaf模板引擎
如果有过Spring项目开发经验的开发人员应该会知道，传统的Spring MVC项目中使用 JSP页面 来完成前端界面。
其不方便之处为：
1.无法独立于后端进行直接的调试；
2.JSP部分语法与html语法完全不同，语法对于前端开发人员而言又是一项新的学习负担；
3.前后端串联需要一定的人力和时间进行整合。
而 Spring Boot 提供大量模板引擎，如FreeMarker,Groovy,Thymeleaf等，Spring Boot中推荐使用Thymeleaf作为模板引擎，它提供了完美的Spring MVC支持。
Thymeleaf
Thymeleaf是一个java类库，是一个xml/xhtml/html5模板引擎，可作为MVC的web项目的view层。Thymeleaf提供一整套的语法来方便前端获取后端的数据。示例代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<link th:src="@{bootstrap/css/bootstrap-theme.min.css}">
</head>
<body>
<span th:text="${title}">小标题<span>
<a href="#" th:href="@{'/myIndex'}">返回首页</a>
<li th:each="person:${people}">
<span th:text="${person.name}">名字<span>
</li>
<script th:inline="javascript">
var me = [[${myself}]];
console.log(me.name);
</script>
</body>
</html>
代码解释：
1.Thymeleaf在前端引入后非常方便调用，可通过"@{}"来引用静态资源，如<link th:src="@{bootstrap/css/bootstrap-theme.min.css}">；可通过"${}"来获取后端传来的model中的属性；也可以通过"[[${}]]"在js中获取model中的值。
2.我们注意到每处调值都是通过"th:"这样的语法实现，比如span中调取后端的值，我们使用<span th:text="${person.name}">名字<span>来将后端传来的peron.name的值替换掉span原来静态时的text内容“名字”。
3.这样，我们在开发时，在没有后端开发好接口的时候，可以直接在浏览器中运行该html页面，查看页面效果；开发开发好传来数值时直接用Thymeleaf语法可以快速实现对接，从而降低了前后端的耦合度，大大提高了开发效率。
Tips：Thymeleaf语法这里仅举例了小小一部分，日后会 新开一篇文章 详细讲述 Thymeleaf语法 ，熟悉常用的大部分Thymeleaf语法对于使用Spring Boot做web开发非常有帮助。
2.web运行示例
我们新建JavaBean，为Person：
public class Person {
private int id;
private String name;
private String sexy;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSexy() {
return sexy;
}
public void setSexy(String sexy) {
this.sexy = sexy;
}
}
新建Controller，名为PersonController，新建两个person，用于传入前端：
@Controller
@RequestMapping("/")
public class PersonController {
@RequestMapping("")
public String index(Model model) {
List<Person> people = new ArrayList<>();
Person boy = new Person();
boy.setId(1001);
boy.setName("weber");
boy.setSexy("男");
Person girl = new Person();
girl.setId(1002);
girl.setName("Alice");
girl.setSexy("女");
people.add(boy);
people.add(girl);
model.addAttribute("people", people);
return "index";
}
}
新建index.html，用于前端展示：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:src="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
</head>
<body>
<div style="text-align: center;margin:0 auto;width: 1000px; ">
<h1>demo index</h1>
<table width="100%" border="1" cellspacing="1" cellpadding="0">
<tr>
<td>id</td>
<td>name</td>
<td>sexy</td>
</tr>
<tr th:each="person : ${people}">
<td th:text="${person.id}">007</td>
<td th:text="${person.name}">weber</td>
<td th:text="${person.sexy}">男or女</td>
</tr>
</table>
</div>
</body>
</html>
在Application中，启动入口与上篇代码基本一致：
@SpringBootApplication
@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class,HibernateJpaAutoConfiguration.class})
public class DemoApplication {、
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
写完后代码的目录结构如图：
目录结构
我们运行入口
DemoApplication，打开网页输入：localhost:8080，运行结果如图所示：
页面效果
至此，使用spring boot+ thymeleaf 模板引擎的一个简单的web项目已经完成。
网友评论