前面两篇博客中我们简单介绍了spring boot项目的创建、并且也带小伙伴们来diy了一个spring boot自动配置功能，那么这些东西说到底最终还是要回归到web上才能体现出它的更大的价值，so，今天我们就来看一下如何使用spring boot来开发web项目。当然，如果小伙伴对spring boot尚不熟悉的话，可以先参考一下这两篇博客：
2.初识spring boot框架(二)之diy一个spring boot的自动配置
spring boot 提供了spring-boot-starter-web来为web开发予以支持，spring-boot-starter-web为我们提供了嵌入的tomcat以及springmvc的依赖，用起来很方便。另外，我们这里还要用到模板引擎，我们做web开发可选的模板引擎还是挺多的，这里我主要使用thymeleaf作为模板引擎，事实上，spring boot提供了大量的模板引擎，包括freemarker、groovy、thymeleaf、velocity和mustache，在 提供的这么多中它推荐使用thymeleaf。thymeleaf在使用的过程中通过thymeleafautoconfiguration类对集成所需要的bean进行自动配置，通过thymeleafproperties来配置thymeleaf，包括前缀后缀什么的，我们可以查看thymeleafproperties一段源码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@configurationproperties("spring.thymeleaf")public class thymeleafproperties { private static final charset default_encoding = charset.forname("utf-8"); private static final mimetype default_content_type = mimetype.valueof("text/html"); public static final string default_prefix = "classpath:/templates/"; public static final string default_suffix = ".html"; private boolean checktemplate = true; private boolean checktemplatelocation = true; private string prefix = "classpath:/templates/"; private string suffix = ".html"; private string mode = "html5"; ...... ...... ......} |
ok，从这一段源码中我们可以看到默认的页面后缀名为.html，前缀为classpath:/templates/，实际上也就是我们需要把html页面放到resources文件夹下的templates文件夹中。同时我们也看到了要如何修改这个配置，在application.properties文件中以spring.thymeleaf为前缀来配置相关属性。
创建project
注意创建的时候要选择thymeleaf作为依赖，这样创建成功的project中将自动包含spring-boot-starter-web，如下图：
创建javabean
我一会要从后台传递数据给前台页面，数据的载体就是这个javabean，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
public class person { private string name; private integer age; public person() { super(); } 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; }} |
后台数据构造
在入口类中添加如下代码，由后台向前台页面返回两条数据，一个单个的person对象，还有一个people对象是一个list集合，集合中放了3个person对象，到时候我们直接将这两条数据在html页面上显示出来，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@requestmapping("/") public string index(model model) { person single = new person("aa", 11); list<person> people = new arraylist<>(); person p1 = new person("zhangsan", 11); person p2 = new person("lisi", 22); person p3 = new person("wangwu", 33); people.add(p1); people.add(p2); people.add(p3); model.addattribute("singleperson", single); model.addattribute("people", people); return "index"; } |
这里的代码都很简单，不必我多说了，就是返回给前台页面两个对象，一个singleperson，一个people，另外，我们的前台页面叫做index.html。
引入相关的静态文件
这里我使用到了bootstrap和jquery两个库，当然这个并不是必须的，只是为了让我们显示的效果更好看一些,静态文件我们要放在src/main/resources/static目录下。
放置之后目录如下：
前台展示页面
刚才小伙伴们都看到了，默认情况下前台页面要放在src/main/resources/templates目录下，so，我们在该目录下新建文件就叫index.html,如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8" /> <title>test20</title> <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" /> <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="external nofollow" rel="stylesheet" /></head><body><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><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:src="@{jquery-3.1.1.js}" type="text/javascript"></script><script th:src="@{bootstrap/js/bootstrap.min.js}" type="text/javascript"></script><script th:inline="javascript"> var single = [[${singleperson}]]; console.log(single.name+"/"+single.age); function getname(name) { console.log(name); }</script></body></html> |
关于这一段html文件我简单介绍一下，首先通过xmlns:th="http://www.thymeleaf.org"导入命名空间，在后期时候的时候，由于html本身是静态视图，在使用相关属性的时候加上th:前缀可以使之变为动态视图。th:href="@{bootstrap/css/bootstrap.min.css}" rel="external nofollow" rel="external nofollow" 表示引用web静态资源。ok，这是head部分。body部分整体上分为了两大块，第一块显示我那个单独的person对象，第二部分显示list集合中的person对象。div的样式这个没啥好说的，照着bootstrap的官网写就行了，th:text="${singleperson.name}"表示访问model中singleperson的name属性，th:if="${not #lists.isempty(people)}"表示判断model中的people集合是否为空，th:each="person:${people}"表示遍历people中的元素，这个和java里的foreach差不多，person表示迭代元素。th:onclick="'getname(\''+${person.name}+'\');'"表示添加点击事件，点击事件由javascript来处理。th:inline="javascript"这样添加到的script标签可以通过[[${singleperson}]]访问model中的属性。
如此之后，我们便可以运行我们自己的项目了，然后在浏览器中访问，结果如下：
点击button也可以在浏览器控制台看到log输出：
ok，perfect！
tomcat相关配置
上面几乎没做什么特别的配置，大部分都使用了springboot提供的默认的配置方式。有的时候我们可能需要有一些自定义的配置，比如tomcat的配置，很简单，和说的基本一致，有两种不同的配置方式：
在application.properties中配置
直接在application.properties中进行配置即可，如下：
|
1
2
3
4
5
|
server.port=8081#配置服务器端口，默认为8080server.session-timeout=1000000#用户回话session过期时间，以秒为单位server.context-path=/index#配置访问路径，默认为/server.tomcat.uri-encoding=utf-8#配置tomcat编码，默认为utf-8server.tomcat.compression=on#tomcat是否开启压缩，默认为关闭 |
在代码中进行配置
|
1
2
3
4
5
6
7
8
9
|
@componentpublic class customservletcontainer implements embeddedservletcontainercustomizer { @override public void customize(configurableembeddedservletcontainer container) { container.setport(8080); container.adderrorpages(new errorpage(httpstatus.not_found,"/404.html")); container.setsessiontimeout(10, timeunit.minutes); }} |
自定义类实现
embeddedservletcontainercustomizer接口，然后设置端口、设置错误请求页面、设置会话超时时间等，大家注意这里的404页面放在src/main/resources/static文件夹下，有了这个之后，当我访问一个不存在的页面的时候就会跳转到404.html页面了。
springmvc相关配置
虽然spring boot默认的配置很多情况都可以满足我们的项目需求，可是有的时候我们可能还是会需要更加灵活的springmvc配置，这个时候我们只需要自定义类继承自webmvcconfigureradapter，然后使用@configuration和@enablewebmvc注解，这样我们会完全屏蔽掉spring boot的默认配置，但是正常情况下我们可能只是希望在spring boot已有默认配置的基础上再添加一些配置即spring boot提供的默认配置和我自定义的配置并存的情况，这个也简单，只需要去掉@enablewebmvc注解就行了。如下代码：
|
1
2
3
4
5
6
7
8
9
|
@configuration//@enablewebmvc//无需使用该注解，否则会覆盖掉springboot的默认配置值public class webmvcconfig extends webmvcconfigureradapter { @override public void addviewcontrollers(viewcontrollerregistry registry) { registry.addviewcontroller("/hello").setviewname("/hello"); }} |
自定义favicon
想要自定义favicon很简单，只需要将自己的favicon.ico文件放置到src/main/resources目录下即可，重新运行项目，再看浏览器左上角图标就会变了。如下：
本案例下载地址： 本案例github地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://blog.csdn.net/u012702547/article/details/53784992
