目录
写在前面的话
1、参考学习自:https://blog.youkuaiyun.com/howard2005/article/details/107998336
2、内容如果有不对的,希望可以指出或补充。
3、课堂回顾。
一、概述
Spring Boot框架为简化项目的整体开发,对一些常用的视图技术实现了整合支持,并主要推荐整合模板引擎技术(如Thymeleaf)来实现前端页面的动态化内容
。
Thymeleaf:是一个XML/XHTML/HTML5模板引擎。支持多种格式的内容动态渲染非常强大,和HTML是相融合的。Thymeleaf机制:数据+模板+引擎。
二、操作
(一)Spring Boot整合Thymeleaf
1、创建Spring Boot项目ThymeleafDemo,其中需要注意的部分如下。
2、application.properties(全局配置文件)
3、LoginController.java(登录控制器)、login.html(登录界面)略,具体查看【参考学习链接内容】。
(二)Spring Boot集成Bootstrap
1、下载Bootstrap并引用的方式略,具体查看【参考学习链接内容】。
2、在login.html里编写如下(集成Bootstrap)。
3、login.html,其他几个html略。
login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www/thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<!-- 引入样式 -->
<link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
<javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
<javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
<javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<!-- <span th:text="${currentYear}">今年</span>- -->
<!-- <span th:text="${currentYear}+1">明年</span><br>-->
<!-- <span th:text="${user}" ></span><br>-->
<!-- 编号:<span th:text="${user.id}" ></span><br>-->
<div class="col-6 m-auto" style="margin-top:30px!important;">
<div class="text-center">
<span th:text="${currentYear}">今年</span> -
<span th:text="${currentYear} + 1">明年</span>
</div>
<div class="border border-info bg-light p-2" style="border-radius: 5px">
<form action="/login" method="post">
<h3 class="text-center">用户登录</h3>
<div class="mt-1">
<input type="text" id="username" name="username" class="form-control"
placeholder="输入用户名" autofocus required="required">
</div>
<div class="mt-1">
<!--required="required"【非空校验】-->
<input type="password" id="password" name="password" class="form-control"
placeholder="输入密码" autofocus required="required">
</div>
<div class="checkbox text-center">
<label>
<input class="form-check-input text-center" type="checkbox">记住我
</label>
</div>
<div>
<button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
</div>
</form>
</div>
</div>
</body>
</html>
(三)Thymeleaf访问模型里的数据
Person.java(个人实体类)、LoginController.java(登录控制器)、person.html(人信息的模板页面)略,具体查看【参考学习链接内容】。
三、测试效果展示
测试1:课堂练习
测试2(带样式):http://localhost:8080/toLoginPage
登录成功、失败界面(用户名:ch,密码:123456)如下。
测试3:http://localhost:8080/getPerson