使用Spring Boot開(kāi)發(fā)Web項(xiàng)目

發(fā)表時(shí)間：2016-12-21

發(fā)布人：葵宇科技

瀏覽次數(shù)：30

關(guān)注公眾號(hào)【江南一點(diǎn)雨】，專注于 Spring Boot+微服務(wù)以及前后端分離等全棧技術(shù)，定期視頻教程分享，關(guān)注后回復(fù) Java ，領(lǐng)取松哥為你精心準(zhǔn)備的 Java 干貨！

前面兩篇博客中我們簡(jiǎn)單介紹了Spring Boot項(xiàng)目的創(chuàng)建、并且也帶小伙伴們來(lái)DIY了一個(gè)Spring Boot自動(dòng)配置功能，那么這些東西說(shuō)到底最終還是要回歸到Web上才能體現(xiàn)出它的更大的價(jià)值，so，今天我們就來(lái)看一下如何使用Spring Boot來(lái)開(kāi)發(fā)Web項(xiàng)目。當(dāng)然，如果小伙伴對(duì)Spring Boot尚不熟悉的話，可以先參考一下這兩篇博客：

1.初識(shí)Spring Boot框架
2.初識(shí)Spring Boot框架(二)之DIY一個(gè)Spring Boot的自動(dòng)配置

Spring Boot 提供了spring-boot-starter-web來(lái)為Web開(kāi)發(fā)予以支持，spring-boot-starter-web為我們提供了嵌入的Tomcat以及SpringMVC的依賴，用起來(lái)很方便。另外，我們這里還要用到模板引擎，我們做web開(kāi)發(fā)可選的模板引擎還是挺多的，這里我主要使用Thymeleaf作為模板引擎，事實(shí)上，Spring Boot提供了大量的模板引擎，包括FreeMarker、Groovy、Thymeleaf、Velocity和Mustache，在提供的這么多中它推薦使用Thymeleaf。Thymeleaf在使用的過(guò)程中通過(guò)ThymeleafAutoConfiguration類(lèi)對(duì)集成所需要的Bean進(jìn)行自動(dòng)配置，通過(guò)ThymeleafProperties來(lái)配置Thymeleaf，包括前綴后綴什么的，我們可以查看ThymeleafProperties一段源碼：

@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，從這一段源碼中我們可以看到默認(rèn)的頁(yè)面后綴名為.html，前綴為classpath:/templates/，實(shí)際上也就是我們需要把html頁(yè)面放到resources文件夾下的templates文件夾中。同時(shí)我們也看到了要如何修改這個(gè)配置，在application.properties文件中以spring.thymeleaf為前綴來(lái)配置相關(guān)屬性。
關(guān)于Thymeleaf如果小伙伴們還不太了解可以先看看我在網(wǎng)上找到的這個(gè)資料Thymeleaf中文文檔最新版。OK，這些算是準(zhǔn)備工作了。接下來(lái)我們就從項(xiàng)目的創(chuàng)建開(kāi)始看起吧。
#創(chuàng)建Project
注意創(chuàng)建的時(shí)候要選擇Thymeleaf作為依賴，這樣創(chuàng)建成功的Project中將自動(dòng)包含spring-boot-starter-web，如下圖：
這里寫(xiě)圖片描述

#創(chuàng)建JavaBean
我一會(huì)要從后臺(tái)傳遞數(shù)據(jù)給前臺(tái)頁(yè)面，數(shù)據(jù)的載體就是這個(gè)JavaBean，如下：

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

#后臺(tái)數(shù)據(jù)構(gòu)造
在入口類(lèi)中添加如下代碼，由后臺(tái)向前臺(tái)頁(yè)面返回兩條數(shù)據(jù)，一個(gè)單個(gè)的Person對(duì)象，還有一個(gè)people對(duì)象是一個(gè)List集合，集合中放了3個(gè)Person對(duì)象，到時(shí)候我們直接將這兩條數(shù)據(jù)在html頁(yè)面上顯示出來(lái)，代碼如下：

@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";
	}

這里的代碼都很簡(jiǎn)單，不必我多說(shuō)了，就是返回給前臺(tái)頁(yè)面兩個(gè)對(duì)象，一個(gè)singlePerson，一個(gè)people，另外，我們的前臺(tái)頁(yè)面叫做index.html。
#引入相關(guān)的靜態(tài)文件
這里我使用到了Bootstrap和jQuery兩個(gè)庫(kù)，當(dāng)然這個(gè)并不是必須的，只是為了讓我們顯示的效果更好看一些,靜態(tài)文件我們要放在src/main/resources/static目錄下。

1.Bootstrap下載

2.jQuery下載
放置之后目錄如下：
這里寫(xiě)圖片描述
#前臺(tái)展示頁(yè)面
剛才小伙伴們都看到了，默認(rèn)情況下前臺(tái)頁(yè)面要放在src/main/resources/templates目錄下，so，我們?cè)谠撃夸浵滦陆ㄎ募徒衖ndex.html,如下：

<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="stylesheet" />
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">訪問(wèn)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>

關(guān)于這一段html文件我簡(jiǎn)單介紹一下，首先通過(guò)xmlns:th="http://www.thymeleaf.org"導(dǎo)入命名空間，在后期時(shí)候的時(shí)候，由于html本身是靜態(tài)視圖，在使用相關(guān)屬性的時(shí)候加上th:前綴可以使之變?yōu)閯?dòng)態(tài)視圖。th:href="@{bootstrap/css/bootstrap.min.css}"表示引用Web靜態(tài)資源。OK，這是head部分。body部分整體上分為了兩大塊，第一塊顯示我那個(gè)單獨(dú)的Person對(duì)象，第二部分顯示List集合中的Person對(duì)象。div的樣式這個(gè)沒(méi)啥好說(shuō)的，照著B(niǎo)ootstrap的官網(wǎng)寫(xiě)就行了，th:text="${singlePerson.name}"表示訪問(wèn)model中singlePerson的name屬性，th:if="${not #lists.isEmpty(people)}"表示判斷model中的people集合是否為空，th:each="person:${people}"表示遍歷people中的元素，這個(gè)和java里的foreach差不多，person表示迭代元素。th:onclick="'getName(\''+${person.name}+'\');'"表示添加點(diǎn)擊事件，點(diǎn)擊事件由JavaScript來(lái)處理。th:inline="javascript"這樣添加到的script標(biāo)簽可以通過(guò)[[${singlePerson}]]訪問(wèn)model中的屬性。

如此之后，我們便可以運(yùn)行我們自己的項(xiàng)目了，然后在瀏覽器中訪問(wèn)，結(jié)果如下：
這里寫(xiě)圖片描述

點(diǎn)擊Button也可以在瀏覽器控制臺(tái)看到log輸出：

這里寫(xiě)圖片描述

OK，perfect！

#Tomcat相關(guān)配置
上面幾乎沒(méi)做什么特別的配置，大部分都使用了SpringBoot提供的默認(rèn)的配置方式。有的時(shí)候我們可能需要有一些自定義的配置，比如Tomcat的配置，很簡(jiǎn)單，和上上篇博客說(shuō)的基本一致，有兩種不同的配置方式：
##在application.properties中配置
直接在application.properties中進(jìn)行配置即可，如下：

server.port=8081#配置服務(wù)器端口，默認(rèn)為8080
server.session-timeout=1000000#用戶回話session過(guò)期時(shí)間，以秒為單位
server.context-path=/index#配置訪問(wèn)路徑，默認(rèn)為/
server.tomcat.uri-encoding=UTF-8#配置Tomcat編碼，默認(rèn)為UTF-8
server.tomcat.compression=on#Tomcat是否開(kāi)啟壓縮，默認(rèn)為關(guān)閉

##在代碼中進(jìn)行配置

@Component
public 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);
    }
}

自定義類(lèi)實(shí)現(xiàn)
EmbeddedServletContainerCustomizer接口，然后設(shè)置端口、設(shè)置錯(cuò)誤請(qǐng)求頁(yè)面、設(shè)置會(huì)話超時(shí)時(shí)間等，大家注意這里的404頁(yè)面放在src/main/resources/static文件夾下，有了這個(gè)之后，當(dāng)我訪問(wèn)一個(gè)不存在的頁(yè)面的時(shí)候就會(huì)跳轉(zhuǎn)到404.html頁(yè)面了。

#SpringMVC相關(guān)配置
雖然Spring Boot默認(rèn)的配置很多情況都可以滿足我們的項(xiàng)目需求，可是有的時(shí)候我們可能還是會(huì)需要更加靈活的SpringMVC配置，這個(gè)時(shí)候我們只需要自定義類(lèi)繼承自WebMvcConfigurerAdapter，然后使用@Configuration和@EnableWebMvc注解，這樣我們會(huì)完全屏蔽掉Spring Boot的默認(rèn)配置，但是正常情況下我們可能只是希望在Spring Boot已有默認(rèn)配置的基礎(chǔ)上再添加一些配置即Spring Boot提供的默認(rèn)配置和我自定義的配置并存的情況，這個(gè)也簡(jiǎn)單，只需要去掉@EnableWebMvc注解就行了。如下代碼：

@Configuration
//@EnableWebMvc//無(wú)需使用該注解，否則會(huì)覆蓋掉SpringBoot的默認(rèn)配置值
public class WebMVCConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/hello").setViewName("/hello");
    }

}

至于這個(gè)類(lèi)里邊的其他方法我就不再贅述了，有興趣的小伙伴可以查看我們之前的文章SpringMVC常用配置。

#自定義Favicon

想要自定義favicon很簡(jiǎn)單，只需要將自己的favicon.ico文件放置到src/main/resources目錄下即可，重新運(yùn)行項(xiàng)目，再看瀏覽器左上角圖標(biāo)就會(huì)變了。如下：
這里寫(xiě)圖片描述