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

时间：2022-06-04 11:23:50

Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。

Spring-boot-starter-web集成了Tomcat以及Spring MVC，会自动配置相关东西，Thymeleaf是用的比较广泛的模板引擎.

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注解的方式。

1. 使用@Controller 注解，在对应的方法上，视图解析器可以解析return 的jsp,html页面，并且跳转到相应页面。若返回json等内容到页面，则需要加@ResponseBody注解

2. @RestController注解，相当于@Controller+@ResponseBody两个注解的结合，返回json数据不需要在方法前面加@ResponseBody注解了，但使用@RestController这个注解，就不能返回jsp,html页面，视图解析器无法解析jsp,html页面

新建UserController:

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

<!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中的数据通过${}访问.

运行效果：

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

目录结构：

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

v源码地址

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

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

SpringBoot入门教程(七)整合themeleaf+bootstrap的更多相关文章

  1. SpringBoot进阶教程&lpar;七十一&rpar;详解Prometheus&plus;Grafana

    随着容器技术的迅速发展,Kubernetes已然成为大家追捧的容器集群管理系统.Prometheus作为生态圈Cloud Native Computing Foundation(简称:CNCF)中的重 ...

  2. 无废话ExtJs 入门教程七&lbrack;登陆窗体Demo：Login&rsqb;

    无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...

  3. SpringBoot入门教程&lpar;二&rpar;CentOS部署SpringBoot项目从0到1

    在之前的博文<详解intellij idea搭建SpringBoot>介绍了idea搭建SpringBoot的详细过程, 并在<CentOS安装Tomcat>中介绍了Tomca ...

  4. RabbitMQ入门教程&lpar;七&rpar;：主题交换机Topics

    原文:RabbitMQ入门教程(七):主题交换机Topics 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  5. SpringBoot进阶教程&lpar;七十&rpar;SkyWalking

    流行的APM(Application Performance Management工具有很多,比如Cat.Zipkin.Pinpoint.SkyWalking.优秀的监控工具还有很多,其它比如还有za ...

  6. springBoot入门教程&lpar;图文&plus;源码&plus;sql&rpar;

    springBoot入门 1   springBoot 1.1 SpringBoot简介 Spring Boot让我们的Spring应用变的更轻量化.比如:你可以仅仅依靠一个Java类来运行一个Spr ...

  7. Spring Cloud 入门教程&lpar;七&rpar;： 熔断机制 -- 断路器

    对断路器模式不太清楚的话,可以参看另一篇博文:断路器(Curcuit Breaker)模式,下面直接介绍Spring Cloud的断路器如何使用. SpringCloud Netflix实现了断路器库 ...

  8. SpringBoot入门教程&lpar;九&rpar;定时任务Schedule

    在日常项目运行中,我们总会有需求在某一时间段周期性的执行某个动作.比如每天在某个时间段导出报表,或者每隔多久统计一次现在在线的用户量.在springboot中可以有很多方案去帮我们完成定时器的工作,有 ...

  9. SpringBoot 入门教程：集成mybatis，redis

    SrpingBoot相较于传统的项目具有配置简单,能快速进行开发的特点,花更少的时间在各类配置文件上,更多时间在具体业务逻辑上. SPringBoot采用纯注解方式进行配置,不喜欢xml配置的同学得仔 ...

随机推荐

  1. Java程序设计笔记

    程序:编写Java程序,此程序从命令行接收多个数字,求和之后输出结果. 设计思想:首先在程序中设置关于参数个数的长度的公式,用.length公式读出用户所设置的参数的个数,参数默认为字符串类型,利用强 ...

  2. Android OkHttp完全解析 --zz

    参考文章 https://github.com/square/okhttp http://square.github.io/okhttp/ 泡网OkHttp使用教程 Android OkHttp完全解 ...

  3. Access-数据类型与&period;net OleDbType枚举类型对应关系

    列表最常见的数据类型映射 访问类型名称 数据库数据类型 OLEDB 类型 .NET 框架类型 成员名称 文本 VarWChar DBTYPE _ WSTR System.String OleDbTyp ...

  4. IDL Interpolate&lpar;&rpar;函数

    Interpolate()函数:可以将数组调整到同维任意大小,并支持任意定位差值.调用格式为 Interpolate(数组,X[,Y[,Z]][,关键字]) 例子: IDL> arr=findg ...

  5. 20 个 CSS 高级技巧汇总

    原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...

  6. ssm又乱码

    以前用mybatis的时候是这样的 mysql.connection.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characte ...

  7. C&plus;&plus;11 boost TR1 TR2曾经参考过的网址整理

    boost::bind的用法:http://blog.csdn.net/adcxf/article/details/3970116

  8. Luogu 1312 【NOIP2011】玛雅游戏 （搜索）

    Luogu 1312 [NOIP2011]玛雅游戏 (搜索) Description Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空 ...

  9. nodejs的dependency&period;md

    dependency和devDependency的区别 package-a --- package-b (dependency) --- | --- package-c (devDependency) ...

  10. 把springboot的项目打包运行指南

    受到传统mvc模式的开发影响,多数人都会想到把springboot项目打成war包在服务器容器里运行,笔者试过很多种方法打成war包部署tomcat上运行.运行成功但是怎么也访问不了,一直报404的错 ...

相关文章