天气系统4------微服务

接着前面的写

前几篇博客已经可以实现一个天气预报系统，redis可以存半小时内最新的天气数据而quartz也会半小时执行一次天气数据同步job

将xml文件中的所有城市的信息全部读出并且逐个去请求天气接口获得天气数据保存在redis里面

但是经过我们启动发现没有前端页面用户体验极差所以该给天气系统一个牌面了

使用thymeleaf模板进行前端页面的开发

添加thymeleaf的依赖至此贴出所有的依赖文件

// buildscript 代码块中脚本优先执行
buildscript {

	// ext 用于定义动态属性
	ext {
		springBootVersion = '2.0.0.M4'
	}

	// 使用了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/" }
}

// 依赖关系
dependencies {

	// 该依赖用于编译阶段
	compile('org.springframework.boot:spring-boot-starter-web')

	// HttpClient
	compile('org.apache.httpcomponents:httpclient:4.5.3')

	// 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')
}

创建一个WeatherReportController

package cn.zzu.spring.cloud.weather.controller;

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 cn.zzu.spring.cloud.weather.service.CityDataService;
import cn.zzu.spring.cloud.weather.service.WeatherReportService;
/**
 * Weather Report Controller.
 * 包含视图的返回
 */
@RestController
@RequestMapping("/report")
public class WeatherReportController {
	@Autowired
	private CityDataService cityDataService;
	
	@Autowired
	private WeatherReportService weatherReportService;
	
	@GetMapping("/cityId/{cityId}")
	public ModelAndView getReportByCityId(@PathVariable("cityId") String cityId, Model model) throws Exception {
		model.addAttribute("title", "天气预报");
		model.addAttribute("cityId", cityId);
		model.addAttribute("cityList", cityDataService.listCity());
		//返回值为Weather   将天气信息设置进report
		model.addAttribute("report", weatherReportService.getDataByCityId(cityId));
		return new ModelAndView("weather/report", "reportModel", model);
	}

}

利用SpringMvc的ModelAndView 进行视图的渲染返回

由于返回的数据类型不再是之前定义的WeatherResponse 所以得重新创建业务逻辑层

package cn.zzu.spring.cloud.weather.service;

import cn.zzu.spring.cloud.weather.vo.Weather;

/**
 * Weather Report Service.
 * 

 */
public interface WeatherReportService {

	/**
	 * 根据城市ID查询天气信息
	 * @param cityId
	 * @return
	 */
	Weather getDataByCityId(String cityId);
}

package cn.zzu.spring.cloud.weather.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.zzu.spring.cloud.weather.vo.Weather;
import cn.zzu.spring.cloud.weather.vo.WeatherResponse;

/**
 * Weather Report 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();
	}

}

至此服务端的代码编写完毕

贴出前端代码

以及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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
	integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
	crossorigin="anonymous">

<title>天气预报（yexuman.com）</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<h3 th:text="${reportModel.title}">yexuman</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.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>
	<!-- Optional JavaScript -->
	<script type="text/javascript" th:src="@{/js/weather/report.js}"></script>
</body>
</html>

启动项目我们访问试试

正常运行！！！！！！！！

需要源码的同学可以私信我！！！！！！！！！！！！！！！！！！！！