经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
SpringBoot(七)整合themeleaf+bootstrap
来源:cnblogs  作者:请叫我头头哥  时间:2018/10/29 10:04:03  对本文有异议

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

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

v更新pom.xml

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </dependency>

v更新application.properties

  1. #thymeleaf
  2. spring.thymeleaf.cache=false
  3. spring.thymeleaf.prefix=classpath:/templates/
  4. spring.thymeleaf.check-template-location=true
  5. spring.thymeleaf.suffix=.html
  6. spring.thymeleaf.encoding=UTF-8
  7. 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:

  1. package com.demo.controller;
  2. import com.demo.pojo.UserPosition;
  3. import com.demo.service.UserService;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.ui.Model;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import java.math.BigDecimal;
  9. import java.util.List;
  10. /**
  11. * Created by toutou on 2018/10/20.
  12. */
  13. @Controller
  14. public class UserController {
  15. @Autowired
  16. UserService userService;
  17. @RequestMapping(value = "/mynearby")
  18. public String myNearby(Model model, double lon, double lat)
  19. {
  20. double r = 6371;//地球半径千米
  21. double dis = 2; //半径 单位:km
  22. double dlng = 2*Math.asin(Math.sin(dis/(2*r))/Math.cos(lat*Math.PI/180));
  23. dlng = dlng*180/Math.PI;//角度转为弧度
  24. double dlat = dis/r;
  25. dlat = dlat*180/Math.PI;
  26. double minlat =lat-dlat;
  27. double maxlat = lat+dlat;
  28. double minlng = lon -dlng;
  29. double maxlng = lon + dlng;
  30. List<UserPosition> list = userService.getVicinity(BigDecimal.valueOf(minlng), BigDecimal.valueOf(maxlng), BigDecimal.valueOf(minlat), BigDecimal.valueOf(maxlat));
  31. model.addAttribute("myinfo",list);
  32. return "mynearby";
  33. }
  34. }

v创建页面

/src/main/resources/templates/mynearby.html

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
  3. <html lang="en">
  4. <head>
  5. <meta content="text/html;charset=UTF-8"/>
  6. <meta name="viewport" content="width=device-width,initial-scale=1"/>
  7. <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8. <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  9. <title>附近的小区</title>
  10. </head>
  11. <body>
  12. <br/>
  13. <div class="panel panel-primary">
  14. <div class="panel-heading">
  15. <h3 class="panel-title">我的坐标</h3>
  16. </div>
  17. <div class="panel-body">
  18. <span>116.31064,40.062658</span>
  19. </div>
  20. <br/>
  21. <div th:if="${not #lists.isEmpty(myinfo)}">
  22. <div class="panel panel-primary">
  23. <div class="panel-heading">
  24. <h3 class="panel-title">附近的小区</h3>
  25. </div>
  26. <div class="panel-body">
  27. <ul class="list-group">
  28. <li class="list-group-item" th:each="item : ${myinfo}">
  29. <span th:text="${item.id}"></span>
  30. <span th:text="${item.city}"></span>
  31. <span th:text="${item.position}"></span>
  32. <span th:text="${item.longitude}"></span>
  33. <span th:text="${item.latitude}"></span>
  34. <button class="btn">删除</button>
  35. </li>
  36. </ul>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  42. <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  43. <script th:inline="javascript">
  44. // var single = [[${singlePerson}]];
  45. // console.log(single.name+"/"+single.age);
  46. $(function(){
  47. $(".btn").click(function(){
  48. alert("删除功能完善中...");
  49. });
  50. });
  51. </script>
  52. </body>
  53. </html>

xmlns:th="http://www.thymeleaf.org"命名空间,将镜头转化为动态的视图,需要进行动态处理的元素使用“th:”前缀;两个link引入bootstrap框架,通过@{}引入web静态资源(括号里面是资源路径)访问model中的数据通过${}访问.

运行效果:

SpringBoot(七)整合themeleaf+bootstrap

目录结构:

SpringBoot(七)整合themeleaf+bootstrap


作  者:请叫我头头哥
出  处:http://www.cnblogs.com/toutou/
关于作者:专注于基础平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是作者坚持原创和持续写作的最大动力!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号