SpringBoot结合Thymeleaf模板与Bootstrap快速搭建界⾯
前⾔
本系列⽂章将简单的学习SpringCloud微服务相关知识，其实也是因为时间的原因，⼀直拖到现在，遂打算趁着假期，决定记录下来。
从天⽓预报微服务系统的单体架构——>分布式架构的演变过程中，⼀步⼀步，由浅及深的学习SpringCloud微服务的思想与其实现的组件。
本系列⽂章分为以下⼏个章节:
项⽬源码已上传⾄.
开发环境
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",DataByCityId(cityId));
return new ModelAndView("weather/report","reportModel",model);
}
}
通过天⽓预报API查询到的数据，存储到model视图中，返回给前端。前端如何解析呢？
report.html
<!DOCTYPE html>
<html lang="en">
<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="cdn.bootcss/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvT <title>飞翔的天⽓预报(ininan.fun)</title>
</head>
<body>
<div class="container">
<div class="row">
<h3th:text="${reportModel.title}">ininan.fun</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">
<h1class="text-success"th:text="${port.city}">城市名称</h1>
</div>
<div class="row">
<p>
当前温度：
<span th:text="${port.wendu}"></span>
</p>
</div>
<div class="row">
<p>
空⽓质量指数：
<span th:text="${port.aqi}"></span>
</p>
</div>
<div class="row">
<p>
温馨提⽰：
温馨提⽰：
<span th:text="${port.ganmao}"></span>
</p>
</div>
<div class="row">
<div class="card border-info"th:each="forecast : ${port.forecast}">
<div class="card-body text-info">
<p class="card-text"th:text="${forecast.date}">
⽇期
</p>
<p class="card-text"th:text="${pe}">
天⽓类型
</p>
<p class="card-text"th:text="${forecast.high}">
jquery框架搭建最⾼温度
</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="cdn.bootcss/jquery/3.2.1/jquery.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/Gp <script src="cdn.bootcss/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7f <script src="cdn.bootcss/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdA <!-- Optional JavaScript -->
<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;
})
});
效果展⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。