给天气预报一个“面子”
截至目前,不仅有了天气预报的API接口,也有了数据的缓存方案。现在,就要进行天气预报服务的实现,也就是说,这里需要一个面向用户的应用。这个应用应该拥有友好的界面,而不是一堆难以理解的数据。
天气预报服务将会引入前端的知识内容。下面将演示如何来将Thymeleaf技术框架集成到Spring Boot项目中。
在micro-weather-quartz应用的基础上,新建一个名称为micro-weather-report的应用。
所需环境
为了演示本例,需要采用如下开发环境。
.JDK8。
. Gradle 4.0。
. Spring Boot Web Starter 2.0.0.M4。
Apache HttpClient 4.5.3。
. Spring Boot Data Redis Starter 2.0.0.M4。
Redis 3.2.100。
. Spring Boot Quartz Starter 2.0.0.M4。
.Quartz Scheduler 2.3.0。
Spring Boot Thymeleaf Starter 2.0.0.M4。
Thymeleaf 3.0.7.RELEASE。
.Bootstrap 4.0.0-beta.2。
项目配置
下面需要添加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 Way Lau
*/
@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.页面实现
整体的页面实现如下。
"UTF-8">
老卫的天气预报(waylau.com)
"ut-8">
"viewport"
content="width=device-width,initial-scale=1, shrink-to-fit=no">
"stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE
4W1pov HYgTpBfshb"
crossorigin="anonymous"
/head>
"container"
"row"
h3 th:text="${reportModel.title}">waylau/h3>"selectCityId">"city :${reportModel.cityList}"
th:value="${city.cityId}" th:text="${city.cityName}"
th:selected="${city.cityId eq reportModel.cityId}"
>Volvo
"row">"${reportModel.report.city}">
"row">
空气质量指数:"${reportModel.report.aqi}">
span>
"row"
当前温度:"${reportModel.report.wendu}">
span>
/p
"row">
温馨提示:"${reportModel.report.ganmao}">
span>
"rOw"
"card" th:each="forecast:${reportModel.report.
forecast}">
"card-body"
"card-text" th:text="${forecast.date}">周五
"card-text" th:text="${forecast.type}">晴转
多云
"card-text" th:text="${forecast.high}">高温
28℃
"card-text" th:text="${forecast.low}">低温
21℃
"card-text" th:text="${forecast.fengxiang}"
>无持续风向微风
umd/popper.min.js"
integrity= "sha384-VFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLE
a04IHwicKwpJf9c91pFgh"
crossorigin= "anonymous"> "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/
bootstrap.min.js"
integrity= "sha384-alpBpkhlPFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5i
KTfUKjNkCk9SaVuEZflJ"
crossorigin= "anonymous">
在页面的头部,我们引入了Bootstrap的CSS文件,在页面的底部,引入了Bootstrap及其所依赖的jQuery和Popper等JS文件。其中,这些文件都是采用CDN服务的方式来引入的。如果读者有兴趣,也可以手动下载这些文件,将其放置到应用中。
在这个界面中,我们主要应用了以下几个技术点。
. Thymeleaf迭代器。
th:each将循环array或list中的元素并重复打印一组标签,语法相当于Java foreach表达式。在th:each="city : S{reportModel.cityList}"语句中,city是城市列表中的城市信息元素变量。通过这个元素变量,可以很方便地将该变量中的信息获取出来,比如${city.cityld}就是获取该变量的cityld。
Thymeleaf比较。
eq是一个比较两个元素是否相等的运算符。
在th:selected="S{city.cityld eq reportModel.cityld},"例子中,用户试图通过比较当前迭代器中cityld与访问请求时的cityld是否相等,来决定selected 的值。如果相等,就选中。就是为了在初始化下来的列表时,能够默认选中所要请求的城市。
. Bootstrap 的Card组件。
下面使用了最新版本的Bootstrap 样式,与老版本的Bootstrap 相比,新版Bootstrap新增了Card组件。
Card 是一个灵活可扩展的内容容器,它包括页眉和页脚的选项,可以设置各种内容、上下文背景颜色等。
用户使用Card来制作天气预报的信息块,这样天气预报中未来5天的每一天的信息,都能够放在一个块内。
其他样式,包括text-success和 border-info等都是用于设置边框字体的颜色样式的。
3.选择城市
用户可以利用城市下拉列表来触发请求。通过下拉列表选择不同的城市,来获取不同城市的天气信息。
下面需要一段JS脚本来驱动这个事情。
//DOM加载完再执行
$(function(){
$("#selectCityId").change(function(){var cityId=$("#selectcityId").val();//获取select选择的Valuevar url ='/report/cityId/'+cityId;window.location.href= url;
});
});
脚本非常简单,当下拉列表变动时,就能把相应的选中的城市ID给获取到,从而重定向请求到/report/cityId/{cityld}接口。
JS脚本既可以放在HTML页面中,也可以放置在独立的JS文件中。为了便于管理,这里把该脚本放置到resources/static/js目录下的report.js文件中,同时,在页面里面引用该JS文件。
测试应用
在启动应用之前,需要保证Redis服务已经先启动了。
启动应用之后,通过浏览器访问 http:/localhost:8080/report/cityId/101280601页面,就能看到如下的页面效果,如图6-6所示。
同时,通过单击城市下拉列框来查看不同城市的天气情况。
本篇内容讲解的是如何将Thymeleaf技术集成到SpringBoot项目中
下篇文章给大家讲解如何进行微服务的拆分;
觉得文章不错的朋友可以转发此文关注小编;
感谢大家的支持!!
衔接上文
如何实现天气数据的同步和使用QuartzScheduler?
10年老架构师,带你如何使用Redis提升应用的并发访问能力
大牛教大家如何用SpringBoot技术快速实现天气预报系统