Spring Cloud学习笔记5——天气预报系统（4）为天气预报制作 UI

最新推荐文章于 2020-11-26 08:13:38 发布

Willow51

最新推荐文章于 2020-11-26 08:13:38 发布

阅读量679

点赞数 1

分类专栏： Spring Cloud 文章标签： Spring Cloud

本文链接：https://blog.csdn.net/qq_43415405/article/details/83864897

版权

Spring Cloud 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

开发环境

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.1.3

天气预报服务的功能

按照不同的城市来进行查询
查询近几天的天气信息
界面简洁、优雅

天气预报服务的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

在resources的static目录下创建js目录，再在js目录下创建weather目录，在weather目录下新建report.js文件：

/**
 * report页面下拉框事件
 */

$(function(){

    $("#selectCityId").change(function () {
        var cityId=$("#selectCityId").val();
        var url='/report/cityId/'+cityId;
        window.location.href=url;
    })

});

在resources的templates目录下创建weather目录，在weather目录下新建前端页面report.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>天气预报</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <h3 th:text="${reportModel.title}">天气</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>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <!-- Optional JavaScript -->
    <script type="text/javascript" th:src="@{/js/weather/report.js}"></script>
</body>
</html>

运行

注意一定要先运行Redis。

运行应用：
在这里插入图片描述
运行结果如下：

访问http://localhost:8080/report/cityId/101020100页面：

更改选择的城市，页面中的天气信息会随之改变：

Willow51

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
Spring Cloud学习笔记5——天气预报系统（4）为天气预报制作 UI

开发环境JDK8+Gradle4+Redis 3.2.100Apache HttpClient 4.5.3Spring Boot Web StarterSpring Boot Data Redis StarterSpring Boot Quartz StarterQuartz SchedulerSpring Boot Thymeleaf Starter 2.0.0.M4Thy...
复制链接

扫一扫

专栏目录