SpringBoot入門教程(七)整合themeleaf+bootstrap

時間 2019-11-07

標籤 springboot 入門教程整合 themeleaf+bootstrap themeleaf bootstrap 欄目 Spring 简体版

原文原文鏈接

Thymeleaf是用於Web和獨立環境的現代服務器端Java模板引擎。Thymeleaf的主要目標是將優雅的天然模板帶到您的開發工做流程中—HTML可以在瀏覽器中正確顯示，而且能夠做爲靜態原型，從而在開發團隊中實現更強大的協做。Thymeleaf可以處理HTML，XML，JavaScript，CSS甚至純文本。javascript

Spring-boot-starter-web集成了Tomcat以及Spring MVC，會自動配置相關東西，Thymeleaf是用的比較普遍的模板引擎.css

v更新pom.xml

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

v更新application.properties

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5

v建立Controller

之因此新建Controller，而不是複用以前的IndexController，是由於IndexController使用的是@RESTController註解的方式。html

1. 使用@Controller 註解，在對應的方法上，視圖解析器能夠解析return 的jsp,html頁面，而且跳轉到相應頁面。若返回json等內容到頁面，則須要加@ResponseBody註解java

2. @RestController註解，至關於@Controller+@ResponseBody兩個註解的結合，返回json數據不須要在方法前面加@ResponseBody註解了，但使用@RestController這個註解，就不能返回jsp,html頁面，視圖解析器沒法解析jsp,html頁面jquery

新建UserController:git

package com.demo.controller;

import com.demo.pojo.UserPosition;
import com.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.math.BigDecimal;
import java.util.List;

/**
 * Created by toutou on 2018/10/20.
 */
@Controller
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping(value = "/mynearby")
    public String myNearby(Model model, double lon, double lat)
    {
        double r = 6371;//地球半徑公里
        double dis = 2; //半徑 單位:km
        double dlng =  2*Math.asin(Math.sin(dis/(2*r))/Math.cos(lat*Math.PI/180));
        dlng = dlng*180/Math.PI;//角度轉爲弧度
        double dlat = dis/r;
        dlat = dlat*180/Math.PI;
        double minlat =lat-dlat;
        double maxlat = lat+dlat;
        double minlng = lon -dlng;
        double maxlng = lon + dlng;

        List<UserPosition> list = userService.getVicinity(BigDecimal.valueOf(minlng), BigDecimal.valueOf(maxlng), BigDecimal.valueOf(minlat), BigDecimal.valueOf(maxlat));
        model.addAttribute("myinfo",list);
        return "mynearby";
    }
}

v建立頁面

/src/main/resources/templates/mynearby.htmlgithub

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<html lang="en">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <title>附近的小區</title>
</head>
<body>
<br/>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">個人座標</h3>
    </div>
    <div class="panel-body">
        <span>116.31064,40.062658</span>
    </div>
    <br/>
    <div th:if="${not #lists.isEmpty(myinfo)}">
        <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="item : ${myinfo}">
                        <span th:text="${item.id}"></span>
                        <span th:text="${item.city}"></span>
                        <span th:text="${item.position}"></span>
                        <span th:text="${item.longitude}"></span>
                        <span th:text="${item.latitude}"></span>
                        <button class="btn">刪除</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:inline="javascript">
//    var single = [[${singlePerson}]];
//    console.log(single.name+"/"+single.age);
    $(function(){
        $(".btn").click(function(){
           alert("刪除功能完善中...");
        });
    });
</script>
</body>
</html>

xmlns:th="http://www.thymeleaf.org"命名空間，將鏡頭轉化爲動態的視圖，須要進行動態處理的元素使用「th:」前綴；兩個link引入bootstrap框架，經過@{}引入web靜態資源（括號裏面是資源路徑）訪問model中的數據經過${}訪問.web

運行效果：spring

目錄結構：json

v源碼地址

https://github.com/toutouge/javademosecond/tree/master/hellospringboot

做　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於做者：專一於基礎平臺的項目開發。若有問題或建議，請多多賜教！
版權聲明：本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
特此聲明：全部評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：若是您以爲文章對您有幫助，能夠點擊文章右下角【推薦】一下。您的鼓勵是做者堅持原創和持續寫做的最大動力！