其他分享
首页 > 其他分享> > 如何将Thymeleaf技术集成到SpringBoot项目中

如何将Thymeleaf技术集成到SpringBoot项目中

作者:互联网

给天气预报一个“面子”

截至目前,不仅有了天气预报的API接口,也有了数据的缓存方案。现在,就要进行天气预报服务的实现,也就是说,这里需要一个面向用户的应用。这个应用应该拥有友好的界面,而不是一堆难以理解的数据。

天气预报服务将会引入前端的知识内容。下面将演示如何来将Thymeleaf技术框架集成到Spring Boot项目中。

在micro-weather-quartz应用的基础上,新建一个名称为micro-weather-report的应用。

所需环境

为了演示本例,需要采用如下开发环境。

项目配置

下面需要添加Thymeleaf的依赖。Spring Boot Thymeleaf Starter已经提供了相关的Starter来实现Thymeleaf开箱即用的功能,所以只需要在build.gradle文件中添加Spring Boot Thymeleaf Starter的库即可。

//依赖关系
dependencies {
//...
//添加Spring Boot Thymeleaf Starter的依赖
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
//...
}

天气预报服务的需求

为了要实现某个服务的功能,首先需要了解这个服务所有的业务需求。天气预报服务的需求大概有以下几点。

·天气预报服务可以按照不同的城市来进行查询。

。天气预报服务可以查询近几天的天气信息。

。天气预报服务提供了天气预报的直观查询,其界面简洁、优雅(这点涉及用户体验)。

在了解上述需求之后,我们能够快速地设计出应用的API。

GET /report/cityId/{cityId}

该API非常简单,通过传入cityld就能获取到该城市的天气预报信息。

天气预报服务接口及其实现


com.waylau.spring.cloud.weather.service包下,创建天气预报服务接口WeatherReportService。

public interface WeatherReportService {
**
*根据城市ID查询天气信息
*
*@param cityId
*@return
*/
weather getDataByCityld(String cityId);}

WeatherReportService的实现为WeatherReportServiceImpl。

@Service
public class WeatherReportServiceImpl implements WeatherReportService
@Autowired
private WeatherDataService weatherDataServiceImpl;
@override
public Weather getDataByCityId(String cityId) {
WeatherResponse result = weatherDataServiceImpl.getDataByCityId
(cityId);
return result.getData();
                      }
}

WeatherReportServiceImpl主要依赖于WeatherDataService来提供天气数据服务。

这样,天气预报的服务接口就完成了。整体实现还是比较简单的。

控制层实现

控制层主要用于处理用户的请求。当用户访问/report/cityId/{cityld}接口时,返回用于展示天气预报信息的界面。

控制层实现如下。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.waylau.spring.cloud.weather.service.cityDataService;
import com.waylau.spring.cloud.weather.service.WeatherReportService;
/**
*天气预报API.
*
* @since 1.o.0 2017年10月25日
*author <a href="https://waylau.com">Way Lau</a>
*/
@RestController
@RequestMapping("/report")
public class WeatherReportController {
@Autowired
private CityDataService cityDataService;
@Autowired
private WeatherReportService weatherReportService;
@GetMapping("/cityld/{cityId}")
public ModelAndView getReportByCityId(Pathvariable("cityId")String
cityId,Model model) throws Exception{
model.addAttribute("title","老卫的天气预报");
model.addAttribute("cityId",cityId);
model.addAttribute("cityList",cityDataService.listCity());
model.addAttribute("report",weatherReportService.getDataByCity
Id(cityId));
return new ModelAndView ("weather/report", "reportModel",model);
}

WeatherReportController是一个典型的Spring MVC 的使用。在weather/report页面中绑定相应的模型,最终将模型的数据在该页面中展示。

在该reportModel中,存放了4类数据。

.title:用于展示页面的标题。

. cityId:用于绑定当前所访问城市的ID。

.cityList:依赖于CityDataService来提供城市列表的数据。

.report:依赖于WeatherReportService来提供当前所访问城市的天气预报。

编写前台界面

一款好的应用离不开简洁的界面。毕竟最终与用户打交道的就是界面,而不是后台的数据或服务。

下面使用Thymeleaf来作为前台界面的模板引擎,用Bootstrap来实现响应式的布局及页面的美化。

1.配置 Thymeleaf

在开发过程中,我们希望对于页面的编写能够及时反馈到界面上,这就需要设置模板。在Thymeleaf中,只需将Thymeleaf缓存关闭,就能够实现页面的热拔插(热部署)。

在application.properties文件中,只需设置如下选项即可。

#热部署静态文件
spring.thymeleaf.cache=false

2.页面实现

整体的页面实现如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老卫的天气预报(waylau.com)</title>
<meta charset="ut-8">
<meta name="viewport"
content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE
4W1pov HYgTpBfshb"
crossorigin="anonymous"
/head>
<body>
<div class="container"
<div class="row"
h3 th:text="${reportModel.title}">waylau/h3>
<select id-"selectCityId">
<option th:each="city :${reportModel.cityList}"
th:value="${city.cityId}" th:text="${city.cityName}"
th:selected="${city.cityId eq reportModel.cityId}"
>Volvo</option>
</select>
</div>
<div class="row">
<hl th:text="${reportModel.report.city}"></h1>
</div>
<divclass="row">
<p>
空气质量指数:<span th:text="${reportModel.report.aqi}"></
span>
</p>
</div>
<div class="row"
<p>
当前温度:<span th:text="${reportModel.report.wendu}"></
span>
/p
</div>
<div class="row">
<p>
温馨提示:<span th:text="${reportModel.report.ganmao}"></
span>
</p>
</div>
<divclass="rOw"
<div class="card" th:each="forecast:${reportModel.report.
forecast}">
<div class="card-body"
<p class="card-text" th:text="${forecast.date}">周五</p>
<p class="card-text" th:text="${forecast.type}">晴转
多云</p>
<p class="card-text" th:text="${forecast.high}">高温
28℃</p>
<p class="card-text" th:text="${forecast.low}">低温
21℃</p>
<p class="card-text" th:text="${forecast.fengxiang}"
>无持续风向微风</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJw
FDMVNA/GpGFF93hxpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/
umd/popper.min.js"
integrity="sha384-VFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLE
a04IHwicKwpJf9c91pFgh"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/
bootstrap.min.js"
integrity="sha384-alpBpkhlPFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5i
KTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</body>
</html>

在页面的头部,我们引入了Bootstrap的CSS文件,在页面的底部,引入了Bootstrap及其所依赖的jQuery和Popper等JS文件。其中,这些文件都是采用CDN服务的方式来引入的。如果读者有兴趣,也可以手动下载这些文件,将其放置到应用中。

在这个界面中,我们主要应用了以下几个技术点。

th:each将循环array或list中的元素并重复打印一组标签,语法相当于Java foreach表达式。在th:each="city : S{reportModel.cityList}"语句中,city是城市列表中的城市信息元素变量。通过这个元素变量,可以很方便地将该变量中的信息获取出来,比如${city.cityld}就是获取该变量的cityld。

eq是一个比较两个元素是否相等的运算符。

在th:selected="S{city.cityld eq reportModel.cityld},"例子中,用户试图通过比较当前迭代器中cityld与访问请求时的cityld是否相等,来决定selected 的值。如果相等,就选中。就是为了在初始化下来的列表时,能够默认选中所要请求的城市。

下面使用了最新版本的Bootstrap 样式,与老版本的Bootstrap 相比,新版Bootstrap新增了Card组件。

Card 是一个灵活可扩展的内容容器,它包括页眉和页脚的选项,可以设置各种内容、上下文背景颜色等。

用户使用Card来制作天气预报的信息块,这样天气预报中未来5天的每一天的信息,都能够放在一个块内。

其他样式,包括text-success和 border-info等都是用于设置边框字体的颜色样式的。

3.选择城市

用户可以利用城市下拉列表来触发请求。通过下拉列表选择不同的城市,来获取不同城市的天气信息。

下面需要一段JS脚本来驱动这个事情。

//DOM加载完再执行
$(function(){
$("#selectCityId").change(function(){
var cityId=$("#selectcityId").val();//获取select选择的Value
var url ='/report/cityId/'+cityId;
window.location.href= url;
});
});

脚本非常简单,当下拉列表变动时,就能把相应的选中的城市ID给获取到,从而重定向请求到/report/cityId/{cityld}接口。

JS脚本既可以放在HTML页面中,也可以放置在独立的JS文件中。为了便于管理,这里把该脚本放置到resources/static/js目录下的report.js文件中,同时,在页面里面引用该JS文件。

<script th:srC="C{/js/weather/report.js}"></script>

测试应用

在启动应用之前,需要保证Redis服务已经先启动了。

启动应用之后,通过浏览器访问
http:/localhost:8080/report/cityId/101280601页面,就能看到如下的页面效果,如图6-6所示。

同时,通过单击城市下拉列框来查看不同城市的天气情况。

本篇内容讲解的是如何将Thymeleaf技术集成到SpringBoot项目中

  1. 下篇文章给大家讲解如何进行微服务的拆分;
  2. 觉得文章不错的朋友可以转发此文关注小编;
  3. 感谢大家的支持!!

标签:集成,SpringBoot,cityld,cityId,Thymeleaf,report,天气预报,页面
来源: https://blog.csdn.net/m0_63437643/article/details/123254276