前言
成都创新互联专业为企业提供威海网站建设、威海做网站、威海网站设计、威海网站制作等企业网站建设、网页设计与制作、威海企业网站模板建站服务,十多年威海做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。
Spring-boot-starter-web集成了Tomcat以及Spring MVC,会自动配置相关东西,Thymeleaf是用的比较广泛的模板引擎.
更新pom.xml
org.springframework.boot spring-boot-starter-thymeleaf
更新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
创建Controller
之所以新建Controller,而不是复用之前的IndexController,是因为IndexController使用的是 @RESTController 注解的方式。
使用@Controller 注解,在对应的方法上,视图解析器可以解析return 的jsp,html页面,并且跳转到相应页面。若返回json等内容到页面,则需要加@ResponseBody注解
新建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 = 2Math.asin(Math.sin(dis/(2r))/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
list = userService.getVicinity(BigDecimal.valueOf(minlng), BigDecimal.valueOf(maxlng), BigDecimal.valueOf(minlat), BigDecimal.valueOf(maxlat)); model.addAttribute("myinfo",list);
return "mynearby";
}
}
创建页面
/src/main/resources/templates/mynearby.html
116.31064,40.062658
// var single = [[${singlePerson}]];
// console.log(single.name+"/"+single.age);
$(function(){
$(".btn").click(function(){
alert("删除功能完善中...");
});
});
xmlns:th="http://www.thymeleaf.org"命名空间,将镜头转化为动态的视图,需要进行动态处理的元素使用“th:”前缀;两个link引入bootstrap框架,通过@{}引入web静态资源(括号里面是资源路径)访问model中的数据通过${}访问.
运行效果:
目录结构: