这是学习的第四篇文章，整一个前端的渲染引擎并且用bootstrap美化一下样式。

Thymeleaf

数据动态地渲染，这里采用Thymeleaf模板引擎。

首先是引入依赖：

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

后端的controller：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@RestController
@RequestMapping("/report")
public class WeatherReportController {
    @Autowired
    private IWeatherReportService weatherReportService;
    @Autowired
    private ICityDataService cityDataService;

    @GetMapping("/cityId/{cityId}")
    public ModelAndView getReportByCityId(@PathVariable("cityId") String cityId, Model model) throws Exception {
        Weather weather = weatherReportService.getDataByCityId(cityId);
        model.addAttribute("title","蜗牛天气预报");
        model.addAttribute("cityId",cityId);
        model.addAttribute("cityList",cityDataService.listCity());
        model.addAttribute("report",weather);
        return new ModelAndView("weather/report","reportModel",model);
    }

}

前端的简单页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蜗牛天气预报系统</title>
</head>
<body>
<h3 th:text="${reportModel.title}">snail</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>

注意

这里修正一下了一下之前存在的一个小错误，就是请求天气的接口应该是：http://wthrcdn.etouch.cn/weather_mini?citykey=xxx 而我之前程序中写的是http://wthrcdn.etouch.cn/weather_mini?cityKey=xxx

就是这个citykey中的k，应该是小写。导致请求不到数据，前端直接报错。

Bootstrap

稍微美化一下页面。引入bootstrap。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <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>蜗牛天气预报系统</title>
</head>
<body>

<div class="container controls-pane">
    <div class="row">
        <h3 th:text="${reportModel.title}">snail</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>

其中下拉框选中向后端请求每个城市数据的js：

1
2
3
4
5
6
7
$(function(){
	$("#selectCityId").change(function(){
		var cityId = $("#selectCityId").val();
		var url = '/report/cityId/'+ cityId;
		window.location.href = url;
	})
});

最后的效果：

image