js文件中怎么使用thymeleaf标签_如何将Thymeleaf技术集成到SpringBoot项目中

给天气预报一个“面子”

截至目前，不仅有了天气预报的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。

@Servicepublic class WeatherReportServiceImpl implements WeatherReportService@Autowiredprivate WeatherDataService weatherDataServiceImpl;@overridepublic 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 {@Autowiredprivate CityDataService cityDataService;@Autowiredprivate WeatherReportService weatherReportService;@GetMapping("/cityld/{cityId}")public ModelAndView getReportByCityId(Pathvariable("cityId")StringcityId,Model model) throws Exception{model.addAttribute("title"，"老卫的天气预报");model.addAttribute("cityId",cityId);model.addAttribute("cityList",cityDataService.listCity());model.addAttribute("report",weatherReportService.getDataByCityId(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.页面实现

整体的页面实现如下。

老卫的天气预报(waylau.com)

waylau/h3>Volvo

空气质量指数: