1. 程式人生 > >Spring Cloud學習筆記5——天氣預報系統(4)為天氣預報製作

Spring Cloud學習筆記5——天氣預報系統(4)為天氣預報製作

開發環境

  • JDK8+
  • Gradle4+
  • Redis 3.2.100
  • Apache HttpClient 4.5.3
  • Spring Boot Web Starter
  • Spring Boot Data Redis Starter
  • Spring Boot Quartz Starter
  • Quartz Scheduler
  • Spring Boot Thymeleaf Starter 2.0.0.M4
  • Thymeleaf 3.0.7.RELEASE
  • Bootstrap 4.0.0-beta.2

天氣預報服務的功能

  • 按照不同的城市來進行查詢
  • 查詢近幾天的天氣資訊
  • 介面簡潔、優雅

天氣預報服務的API

獲取到該城市ID的天氣預報資訊:GET/report/cityId/{cityId}

新建專案

複製之前的micro-weather-quartz專案,將副本改名為micro-weather-report 在這裡插入圖片描述 在這裡插入圖片描述 在這裡插入圖片描述

修改原始碼

修改build.gradle配置,加入thymeleaf的依賴:

//依賴關係
dependencies {

    //該依賴用於編譯階段
	compile('org.springframework.boot:spring-boot-starter-web')
	
	//HttpClient
	compile('org.apache.httpcomponents:httpclient:4.5.6')

    //Redis
    compile('org.springframework.boot:spring-boot-starter-data-redis'
) //Quartz compile('org.springframework.boot:spring-boot-starter-quartz') //新增Spring Boot Thymeleaf Starter的依賴 compile('org.springframework.boot:spring-boot-starter-thymeleaf') //該依賴用於測試階段 testCompile('org.springframework.boot:spring-boot-starter-test') }

com.study.spring.cloud.weather.service

包下新建介面WeatherReportService

package com.study.spring.cloud.weather.service;

import com.study.spring.cloud.weather.vo.Weather;

public interface WeatherReportService {

	//根據城市id查詢天氣資訊
	Weather getDataByCityId(String cityId);
}

com.study.spring.cloud.weather.service包下新建類WeatherReportServiceImpl

package com.study.spring.cloud.weather.service;

import com.study.spring.cloud.weather.vo.Weather;
import com.study.spring.cloud.weather.vo.WeatherResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class WeatherReportServiceImpl implements WeatherReportService {

	@Autowired
	private WeatherDataService weatherDataService;

	@Override
	public Weather getDataByCityId(String cityId) {
		WeatherResponse resp=weatherDataService.getDataByCityId(cityId);
		return resp.getData();
	}
}

com.study.spring.cloud.weather.controller包下新建類WeatherReportController

package com.study.spring.cloud.weather.controller;

import com.study.spring.cloud.weather.service.CityDataService;
import com.study.spring.cloud.weather.service.WeatherReportService;
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;

@RestController
@RequestMapping("/report")
public class WeatherReportController {
	
	@Autowired
	private CityDataService cityDataService;

	@Autowired
	private WeatherReportService weatherReportService;

	@GetMapping("/cityId/{cityId}")
	//@PathVariable:標識從路徑中獲取引數
	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.getDataByCityId(cityId));

		return new ModelAndView("weather/report","reportModel",model);
	}
	
}

修改application.properties配置:

#熱部署靜態檔案
spring.thymeleaf.cache=false

resourcestemplates目錄下建立weather目錄,在weather目錄下新建前端頁面report.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天氣預報</title>
</head>
<body>
    <h3 th:text="${reportModel.title}">天氣</h3>
    <select>
        <option th:each="city : ${reportModel.cityList}"
                th:value="${city.cityId}" th:text="${city.cityName}"
                th:selected="${city.cityId eq reportModel.cityId}"></option>
    </select>
    <h1 th:text="${reportModel.report.city}">城市名稱</h1>
    <p>
        空氣質量指數:<span th:text="${reportModel.report.aqi}"></span>
    </p>
    <p>
        當前溫度:<span th:text="${reportModel.report.wendu}"></span>
    </p>
    <p>
        溫馨提示:<span th:text="${reportModel.report.ganmao}"></span>
    </p>

    <div th:each="forecast : ${reportModel.report.forecast}">
        <div>
            <p th:text="${forecast.date}">日期</p>
            <p th:text="${forecast.type}">天氣型別</p>
            <p th:text="${forecast.high}">最高溫度</p>
            <p th:text="${forecast.low}">最低溫度</p>
            <p th:text="${forecast.fengxiang}">風向</p>
        </div>
    </div>
</body>
</html>