Spring Boot（四）Spring Boot的web項目開發

你好，【程序職場】專注於：Spring Boot ，微服務 和 前端APP開發，閒暇之餘一起聊聊職場規劃，個人成長，還能帶你一起探索 副業賺錢渠道，在提升技術的同時我們一起交流 敏捷流程 提高工作效率，從技術到管理一步步提升自我！
 
標籤：一個執着的職場程序員！

本文是Spring Boot系列的第四篇，瞭解前面的文章有助於更好的理解本文：

1.Spring Boot（一）初識Spring Boot框架
2.Spring Boot（二）Spring Boot基本配置
3.Spring Boot（三）Spring Boot自動配置的原理

---

 

前言

(一). Thymeleaf 模板引

(二). Spring MVC集成Thymeleaf 

(三). Spring Boot中模板引擎Thymeleaf 的使用

 

Web開發是開發中很重要的，目前BS架構的開發佔主流，Web開發的核心內容主要是 內嵌Servlet容器和SpringMVC

(一). Thymeleaf 模板引擎

Spring Boot提供了spring-boot-starter-web爲web開發予以支持，spring-boot-starter-web爲我們提供了嵌入的Tomcat以及Spring MVC的依賴。

Web相關的自動配置存儲在 spring-boot-autoconfigure.jar的org.springframework.boot.autoconfigure.web 包下，大家可以自行看源碼學習一下。

SpringBoot的強大之處是提供了大量的模板引擎，其中包括：FreeMarker，Groovy，Thymeleaf，Velocity和Mustache等，SpringBoot中推薦使用Thymeleaf作爲模板引擎，我也強烈推薦，簡單，完美，並且Thymeleaf提供了完美的Spring MVC的支持。

那麼什麼是Thymeleaf呢？

Thymeleaf是一個Java類庫，他是一個xml/xhtml/html5的模板引擎，可以作爲MVC的 WEB應用的view層，還提供了了額外的模板和Spring mvc集成，所以這樣可以完全替代了之前的jsp。

更多的Thymeleaf 知識，可以查看官網（http://www.thymeleaf.org）

 

(二). Spring MVC集成Thymeleaf

上面我們說到 Thymeleaf提供了完美的Spring MVC的支持，那麼怎麼集成Thymeleaf 的呢？

在SpringMVC中如果我們集成一個模板引擎需要定義ViewResolver而ViewResolver需要定義一個view，例如給jsp定義ViewResolver的代碼如下：

@Beanpublic InternalResourceViewResolver viewResolver(){InternalResourceViewResolver viewResolver = new InternalResourceViewResolver ();viewResolver.setPrefix("/WEB-INF/classes/views/");viewResolver.setSuffix(".jsp");viewResolver.setViewClass(JstView.class);return viewResolver;}

上面代碼可以看出使用了JsltView定義了一個InternalResourceViewResolver 因而使用Thymeleaf作爲模板引擎也需要做雷士的操作。針對這點，Thymeleaf已經爲我們定義好了 org.thymeleaf.spring4.view.ThymeleafView和org.thymeleaf.spring4.view.ThymeleafViewResolver(默認使用ThymeleafView作爲View)，並且Thymeleaf還提供了了模板類和通用的模板引擎（包括：前綴和後綴等）

代碼如下：

@Beanpublic TemplateResolver templateResolver(){TemplateResolver templateResolver = new ServletContextTemplateResolver();templateResolver.setPrefix("/WEB-INF/templates");templateResolver.setSuffix(".html");templateResolver.setTemplateMode("HTML5");return templateResolver;}
@Beanpublic SpringTemplateEngine templateEngine(){SpringTemplateEngine templateEngine = new SpringTemplateEngine();templateEngine.setTemplateResolver(templateResolver());return templateEngine;}
@Beanpublic TemplateViewResolver templateViewResolver(){TemplateViewResolver templateViewResolver = new TemplateViewResolver();templateViewResolver.setTemplateEngine(templateEngine());templateViewResolver.setViewClass(TemplateView.class);return templateViewResolver;}

 

ok ，這樣完成了Thymeleaf和SpringMVC的集成了，看起來也不難，但是還有更簡單的。

(三). Spring Boot中模板引擎Thymeleaf 的使用

Thymeleaf和SpringMVC的集成，目的是爲了大家理解 Thymeleaf和SpringMVC的集成的原理，然後和Spring Boot 集成 做對比。

看到上面的配置和代碼添加 在Spring Boot中是不需要的，Spring Boot通過org.springframeword.boot.autoconfigure.thymeleaf包對Thymeleaf進行了自動配置，配置信息在ThymeleafAutoConfiguration中。

通過ThymeleafProperties來配置Thymeleaf，我們可以看一下ThymeleafPropreties的主要源碼：
 

@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;    /**    前綴設置 Springboot默認模板，放置在classpath:/templates/目錄下    **/    private String prefix = "classpath:/templates/";    //後綴設置，默認是html    private String suffix = ".html";    //模板模式設置，默認爲HTML5    private String mode = "HTML5";     //模板編碼設置，默認爲UTF-8    private String encoding = "UTF-8";    ......}

好了，下面我們通過一個實例實現springboot的集成。

1. 新建項目
 

創建項目的時候 需要 選擇 Thymeleaf作爲依賴，這樣 spring-boot-starter-thymeleaf會自動包含spring-boot-starter-web。

2. 創建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;    }}

 

3.腳本靜態文件

這裏我們需要用到兩個前端庫，Bootstrap（https://v3.bootcss.com/getting-started/#download）和jQuery （https://jquery.com/download/）

可以通過上面的路徑 到官網下載，根據原則，這些腳本樣式和圖片需要放在 src/mian/resources/static下面。

4. 前端展示界面

頁面我們應該放在src/mian/resources/templates下面，新建一個文件index.html

代碼如下：

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8" />    <title>SpringBoot_4</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">訪問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>

 

5.數據構造

package org.cxzc.myyoung.springboot_4;import org.cxzc.myyoung.springboot_4.bean.Person;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;import java.util.List;@Controller@SpringBootApplicationpublic class Springboot4Application {
    public static void main(String[] args) {        SpringApplication.run(Springboot4Application.class, args);    }
    @RequestMapping("/")    public String index(Model model) {        Person single = new Person("公衆號   程序職場", 11);        List<Person> people = new ArrayList<Person>();        Person p1 = new Person("劉德華", 60);        Person p2 = new Person("張學友", 58);        Person p3 = new Person("吳奇隆", 55);        people.add(p1);        people.add(p2);        people.add(p3);        model.addAttribute("singlePerson", single);        model.addAttribute("people", people);        return "index";    }}

在入口類中添加代碼，由後臺向前臺頁面返回兩種數據，一個單個的Person對象，還有一個people對象是一個List集合，集合中放了3個Person對象，我們要直接將這兩條數據在html頁面上顯示出來

上面代碼 主要是 返回給前臺頁面兩個對象，一個singlePerson，一個people。

6.運行項目

訪問頁面，瀏覽器輸入

 

 

點擊獲取名字 可以獲取對應的名字信息。

ok，Spring Boot的web項目開發 到這裏就完成了web的效果，如果小夥伴還有疑問，可以 關注我，我們一起進步

本案例下載地址：

https://github.com/ProceduralZC/itcxzc/tree/master/springboot_4