SpringBoot结合Thymeleaf模板与Bootstrap快速搭建界面
前言
本系列文章将简单的学习SpringCloud微服务相关知识，其实也是因为时间的原因，一直拖到现在，遂打算趁着假期，决定记录下来。
从天气预报微服务系统的单体架构——>分布式架构的演变过程中，一步一步，由浅及深的学习SpringCloud微服务的思想与其实现的组件。
本系列文章分为以下几个章节:
- SpringBoot搭建天气预报微服务系统(单体架构)
- SpringBoot集成Redis缓存
- SpringBoot集成Quartz定时框架
- SpringBoot结合Thymeleaf模板与Bootstrap快速搭建界面
- 单体架构到微服务架构的拆分
- SpringCloud微服务组件—Eureka服务注册与发现
- SpringCloud微服务组件—Feign负载均衡与高可用
- SpringCloud微服务组件—Zuul实现API网关分配
- SpringCloud微服务组件—Config集中实现配置管理
- SpringCloud微服务组件—Hystrix服务熔断机制
项目源码已上传至Github.
开发环境
- JDK 1.8
- IDEA 2017.3
- Gradle 4
- HttpClient 4.5.3
- SpringBoot 2.0.0.RELEASE
//该依赖用于编译阶段
compile('org.springframework.boot:spring-boot-starter-web')
//热部署
compile('org.springframework.boot:spring-boot-devtools')
//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')开发过程
为了给项目一个“面子”，我们选择与SpringBoot集成的标签模板Thymeleaf和前端框架Bootstrap。
Thymeleaf的使用呢，其实和以前我们学过的EL表达式十分相似。通过对后台的值进行解析并绑定到相对的标签上。
后台请求控制器
@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());
model.addAttribute("report",weatherReportService.getDataByCityId(cityId));
return new ModelAndView("weather/report","reportModel",model);
}
}通过天气预报API查询到的数据，存储到model视图中，返回给前端。前端如何解析呢？
report.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>飞翔的天气预报(ininan.fun)title>
head>
<body>
<div class="container">
<div class="row">
<h3 th:text="${reportModel.title}">ininan.funh3>
<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.wendu}">span>
p>
div>
<div class="row">
<p>
空气质量指数：
<span th:text="${reportModel.report.aqi}">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://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">script>
<script type="text/javascript" th:src="@{/js/weather/report.js}">script>
body>
html>report.js
实现下拉框的效果
//report页面下拉框事件
$(function () {
$("#selectCityId").change(function () {
var cityId = $("#selectCityId").val();
var url = "/report/cityId/" + cityId;
window.location.href = url;
})
});效果展示
浏览器访问http://localhost:8080/report/cityId/101280800
