Web模块：spring-boot-starter-web

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页面基本样式

<!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
</body>
</html>

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

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

访问model中元素属性

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

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

迭代元素

<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>

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

空判断

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

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

JavaScript中访问model中元素

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

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

Thymeleaf与Spring MVC集成

pom

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</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>

posted @ 2017-02-20 15:05 csnmd 阅读(21920) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

KoKo

Web模块：spring-boot-starter-web

公告