Web模块：spring-boot-starter-web

1. spring-boot-autoconfigure-1.5.1.RELEASE.jar!/org/springframework/boot/autoconfigure/web

上述jar的web包下，编写了自动配置Web项的逻辑

 

下面列举常用的几个类

ServerPropertiesAutoConfiguration和ServerProperties，自动配置内嵌Servlet容器

HttpEncodingAutoConfiguration和HttpEncodingProperties，自动配置http编码，默认utf-8

MultipartAutoConfiguration和MultipartProperties，自动配置文件上传

JacksonHttpMessageConvertersConfiguration，自动配置MappingJackson2HttpMessageConverterConfiguration与MappingJackson2XmlHttpMessageConverterConfiguration

WebMvcAutoConfiguration和WebMvcProperties，自动配置Spring MVC

 

Spring Boot推荐使用Thymeleaf作为模板引擎，其提供了完美的Spring MVC支持、

内嵌Tomcat、Jetty无法执行jar形式的jsp；Undertow不支持JSP

• Thymeleaf页面基本样式

1. <!DOCTYPE html>
2. <html xmlns:th="http://www.thymeleaf.org">
3. <head>
4. <meta charset="UTF-8">
5. <title>首页</title>
6. <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
7. <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
8. <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script>
9. <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
11. </head>
12. <body>
13. Hello World
14. </body>
15. </html>

xmlns:th="http://www.thymeleaf.org" 引入Thymeleaf命名空间，将静态页面转化成动态页面。需要动态处理的元素将使用 th: 作为前缀

@{bootstrap/js/bootstrap.min.js} 引入Web静态资源

 

• 访问model中元素属性

1. <div class="panel panel-primary">
2. <div class="panel-heading">
3. <h3 class="panel-title">访问model</h3>
4. </div>
5. <div class="panel-body">
6. <span th:text="${singlePerson.name}"></span>
7. </div>
8. </div>

访问model中singlePerson的name属性。这里需要为text属性添加th:前缀

 

• 迭代元素

1. <ul class="list-group">
2. <li class="list-group-item" th:each="person:${people}">
3. <span th:text="${person.name}"></span>
4. <span th:text="${person.age}"></span>
5. <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>
6. </li>
7. </ul>

th:each做循环迭代person作为迭代元素，${person}访问model中元素

 

• 空判断

1. <div th:if="${not #lists.isEmpty(people)}">
2. </div>

判断person是否为空，Thymeleaf支持>、<、>=、<=、==、!=、SpEL表达式

 

• JavaScript中访问model中元素

1. <script th:inline="javascript">
2. var single = [[${singlePerson}]];
3. console.log(single.name+"/"+single.age)
5. function getName(name){
6. console.log(name);
7. }
8. </script>

使用[[${modelName}]]获取model中的元素值

 

 

• Thymeleaf与Spring MVC集成

pom

1. <dependency>
2. <groupId>org.springframework.boot</groupId>
3. <artifactId>spring-boot-starter-thymeleaf</artifactId>
4. </dependency>

引入默认静态文件

静态文件包括 脚本、样式、图片，默认在src/main/resources/static下

 

编写Thymeleaf模板

默认位置在  templates

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>测试页面</title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
    <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

</head>
<body>
Hello World<br/>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">访问model</h3>
    </div>
    <div class="panel-body">
        <!--/*@thymesVar id="singlePerson" type=""*/-->
        <span th:text="${singlePerson.name}"></span>
    </div>
</div>

<div th:if="${not #lists.isEmpty(people)}">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">列表</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="person:${people}">
                    <span th:text="${person.name}"></span>
                    <span th:text="${person.age}"></span>
                    <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var single = [[${singlePerson}]];
    console.log(single.name + "/" + single.age);

    function getName(name) {
        console.log(name);
    }
</script>

</body>
</html>