SpringCloud学习之旅11--weather项目report-eureka-feign（将前面的整合加上页面）

以你之姓@ 2022-05-22 01:11 120阅读 0赞

## 目录结构： ##

![70][]

## build.gradle文件： ##

// buildscript 代码块中脚本优先执行
    buildscript {
    
    
    // ext 用于定义动态属性
    ext {
    springBootVersion = '2.0.0.M3'
    }
    
    
    // 使用了Maven的中央仓库及Spring自己的仓库（也可以指定其他仓库）
    repositories {
    // mavenCentral()
    maven { url "https://repo.spring.io/snapshot" }
    maven { url "https://repo.spring.io/milestone" }
    maven { url "http://maven.aliyun.com/nexus/content/groups/public/" }
    }
    
    
    // 依赖关系
    dependencies {
    
    
    // classpath 声明了在执行其余的脚本时，ClassLoader 可以使用这些依赖项
    classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
    }
    
    
    // 使用插件
    apply plugin: 'java'
    apply plugin: 'eclipse'
    apply plugin: 'org.springframework.boot'
    apply plugin: 'io.spring.dependency-management'
    
    
    // 指定了生成的编译文件的版本，默认是打成了 jar 包
    group = 'com.waylau.spring.cloud'
    version = '1.0.0'
    
    
    // 指定编译 .java 文件的 JDK 版本
    sourceCompatibility = 1.8
    
    
    // 使用了Maven的中央仓库及Spring自己的仓库（也可以指定其他仓库）
    repositories {
    //mavenCentral()
    maven { url "https://repo.spring.io/snapshot" }
    maven { url "https://repo.spring.io/milestone" }
    maven { url "http://maven.aliyun.com/nexus/content/groups/public/" }
    }
    
    
    ext {
    springCloudVersion = 'Finchley.M2'
    }
    
    
    // 依赖关系
    dependencies {
    
    
    // 该依赖用于编译阶段
    compile('org.springframework.boot:spring-boot-starter-web')
    
    
    // 添加 Spring Boot Thymeleaf Starter 的依赖
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    
    
    // Eureka Client
    //compile('org.springframework.cloud:spring-cloud-starter-netflix-eureka-client')
    
    // https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-netflix-eureka-client
    compile group: 'org.springframework.cloud', name: 'spring-cloud-starter-netflix-eureka-client', version: '1.4.0.RELEASE'
    
    // Feign
    //compile('org.springframework.cloud:spring-cloud-starter-openfeign')
    
    // https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-openfeign
    compile group: 'org.springframework.cloud', name: 'spring-cloud-starter-openfeign', version: '1.4.4.RELEASE'
    
    
    // https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-feign
    compile group: 'org.springframework.cloud', name: 'spring-cloud-starter-feign', version: '1.0.3.RELEASE'
    
    
    // 该依赖用于测试阶段
    testCompile('org.springframework.boot:spring-boot-starter-test')
    }
    
    
    dependencyManagement {
    imports {
    mavenBom "org.springframework.cloud:spring-cloud-dependencies:${springCloudVersion}"
    }
    
    }

## application.properties文件： ##

# 热部署静态文件
    spring.thymeleaf.cache=false
    
    spring.application.name: msa-weather-report-eureka-feign
    
    eureka.client.serviceUrl.defaultZone: http://localhost:8761/eureka/
    
    feign.client.config.feignName.connectTimeout: 5000
    feign.client.config.feignName.readTimeout: 5000
    
    server.port=9092

### report.js文件： ###

/**
     * report页面下拉框事件
     * auther:waylau.com
     */
    $(function(){
    $("#selectCityId").change(function(){
    var cityId = $("#selectCityId").val();
    var url = '/report/cityId/'+ cityId;
    window.location.href = url;
    })
    
    });

## report.html页面： ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-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-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
    crossorigin="anonymous">
    
    
    <title>老卫的天气预报（waylau.com）</title>
    </head>
    <body>
    <div class="container">
    <div class="row">
    <h3 th:text="${reportModel.title}">waylau</h3>
    <select class="custom-select" id="selectCityId">
    <option th:each="city : ${reportModel.cityList}"
    th:value="${city.cityId}" th:text="${city.cityName}"
    th:selected="${city.cityId eq reportModel.cityId}"></option>
    </select>
    </div>
    <div class="row">
    <h1 class="text-success" th:text="${reportModel.report.city}">深圳</h1>
    </div>
    <div class="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>
    <div class="row">
    <div class="card border-info" th:each="forecast : ${reportModel.report.forecast}">
    <div class="card-body text-info">
    <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}">最高温度</p>
    <p class ="card-text" th:text="${forecast.low}">最低温度</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/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
    integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>
    
    <script type="text/javascript" th:src="@{/js/weather/report.js}"></script>
    </body>
    
    </html>

### vo对象前面的博文有，这里就不赘述了。 ###

package com.waylau.spring.cloud.weather.service;
    
    
    import java.util.List;
    
    
    import org.springframework.cloud.netflix.feign.FeignClient;
    import org.springframework.web.bind.annotation.GetMapping;
    
    
    import com.waylau.spring.cloud.weather.vo.City;
    
    
    /**
     * City Client.
     * 
     * @since 1.0.0 2017年11月28日
     * @author <a href="https://waylau.com">Way Lau</a> 
     */
    @FeignClient("msa-weather-city-eureka")
    public interface CityClient {
    
    @GetMapping("/cities")
    List<City> listCity() throws Exception;
    
    }

package com.waylau.spring.cloud.weather.service;
    
    
    import org.springframework.cloud.netflix.feign.FeignClient;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    
    
    import com.waylau.spring.cloud.weather.vo.WeatherResponse;
    
    
    /**
     * Weather Data Client.
     * 
     * @since 1.0.0 2017年11月28日
     * @author <a href="https://waylau.com">Way Lau</a> 
     */
    @FeignClient("msa-weather-data-eureka")
    public interface WeatherDataClient {
    
    @GetMapping("/weather/cityId/{cityId}")
    WeatherResponse getDataByCityId(@PathVariable("cityId") String cityId);
    
    }

package com.waylau.spring.cloud.weather.service;
    
    
    import com.waylau.spring.cloud.weather.vo.Weather;
    
    
    /**
     * Weather Report Service.
     * 
     * @since 1.0.0 2017年11月24日
     * @author <a href="https://waylau.com">Way Lau</a> 
     */
    public interface WeatherReportService {
    
    
    /**
    * 根据城市ID查询天气信息
    * @param cityId
    * @return
    */
    Weather getDataByCityId(String cityId);
    
    }

package com.waylau.spring.cloud.weather.service;
    
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    
    import com.waylau.spring.cloud.weather.vo.Weather;
    import com.waylau.spring.cloud.weather.vo.WeatherResponse;
    
    
    /**
     * Weather Report Service.
     * 
     * @since 1.0.0 2017年11月26日
     * @author <a href="https://waylau.com">Way Lau</a> 
     */
    @Service
    public class WeatherReportServiceImpl implements WeatherReportService {
    @Autowired
    private WeatherDataClient weatherDataClient;
    @Override
    public Weather getDataByCityId(String cityId) {
    
    // 由天气数据API微服务来提供
    WeatherResponse resp = weatherDataClient.getDataByCityId(cityId);
    Weather data = resp.getData();
    return data;
    }
    
    
    
    }

package com.waylau.spring.cloud.weather.controller;
    
    
    import java.util.List;
    
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    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.CityClient;
    import com.waylau.spring.cloud.weather.service.WeatherReportService;
    import com.waylau.spring.cloud.weather.vo.City;
    /**
     * Weather Report Controller.
     * 
     * @since 1.0.0 2017年11月24日
     * @author <a href="https://waylau.com">Way Lau</a> 
     */
    @RestController
    @RequestMapping("/report")
    public class WeatherReportController {
    private final static Logger logger = LoggerFactory.getLogger(WeatherReportController.class);  
    
    
    @Autowired
    private WeatherReportService weatherReportService;
    
    @Autowired
    private CityClient cityClient;
    
    @GetMapping("/cityId/{cityId}")
    public ModelAndView getReportByCityId(@PathVariable("cityId") String cityId, Model model) throws Exception {
    // 获取城市ID列表
    List<City> cityList = null;
    
    try {
    
    // 由城市数据API微服务提供数据
    cityList = cityClient.listCity();
    
    } catch (Exception e) {
    logger.error("Exception!", e);
    }
    
    model.addAttribute("title", "老卫的天气预报");
    model.addAttribute("cityId", cityId);
    model.addAttribute("cityList", cityList);
    model.addAttribute("report", weatherReportService.getDataByCityId(cityId));
    return new ModelAndView("weather/report", "reportModel", model);
    }
    
    
    
    }

### 最后启动：08、09、10和该博文。 ###

![70 1][]

### 访问链接：http://localhost:9092/report/cityId/101280101 ###

![70 2][]

![70 3][]

[70]: /images/20220522/40d0552682e04a29809020de6c65fabd.png
[70 1]: /images/20220522/44372a22ba3f497f80f54caed5f5e26b.png
[70 2]: /images/20220522/1fdc4f31af4b4313a62226ae1b2afe24.png
[70 3]: /images/20220522/9296da1f614d47b199aa85dbde8b0f58.png