SpringBoot整合LayUI和Thymeleaf制作简单登录页面
Posted 杨治中
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot整合LayUI和Thymeleaf制作简单登录页面相关的知识,希望对你有一定的参考价值。
前面已经学习过SpringBoot整合Thymeleaf,这次主要把上次提到的简单登录界面用博文形式写出来
记录一个小Demo的学习,如果没看过SpringBoot整合Thymeleaf可以看一下SpringBoot整合Thymeleaf(三)
先上页面效果图:
Demo所涉及的知识点#
1.SpringBoot请求映射
2.static和templates静态资源映射
只要简单了解这两个知识点,就可以做出简单的登录的页面
Demo所涉及的目录结构图#
Demo所涉及的Pom文件的主要依赖#
Copy
<dependencies> <!--thymeleaf模板引擎依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--Springboot-Web开发依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies>
Demo编码思路及知识点记录#
1.引入Maven所需要的thymeleaf和web依赖
2.编写视图层LoginController,添加请求访问 /
,/login.html
的映射规则
3.通过资源文件夹形式引入layui框架的静态资源(CSS,JS)及个性定制的(CSS,JS,IMAGE),主要通过th:src
,th:href
两个属性引入
编写视图层LoginController,添加/
,/login.html
的映射规则
Copy
@Controller public class LoginController @RequestMapping("/","login.html") public String Login() return "login";
这里记录一下,SpringBoot会根据return "login";
的返回值,自动找到类路径下的templates文件夹的login.html,具体的前后缀组装原则,可以在ThymeleafProperties,双击shift快捷键,输入“ThymeleafProperties”,关键的代码如下
Copy
public class ThymeleafProperties private static final Charset DEFAULT_ENCODING; public static final String DEFAULT_PREFIX = "classpath:/templates/"; //前缀 public static final String DEFAULT_SUFFIX = ".html";//后缀 private boolean checkTemplate = true; private boolean checkTemplateLocation = true; private String prefix = "classpath:/templates/";//类路径下的templates文件夹 private String suffix = ".html"; private String mode = "HTML";
引入layui框架的静态资源(CSS,JS)及个性定制的(CSS,JS,IMAGE)
LayUI框架是一个前端框架,可以快速搭建一个简约页面,可以到官网下载最新的版本,具体的静态资源时放在类路径的static文件下,因为这是SpringBoot约定好的静态资源文件存放位置之一(另外还有四个文件夹可以存放)
最后就是在html页面,引用thymeleaf的使用,往页面中引入这些CSS,JS,IMAGE ,主要用到th:src
,th:href
两个属性
Copy
<!--css --> <link rel="stylesheet" th:href="@/layui/css/layui.css"/> <link rel="stylesheet" th:href="@/css/login.css"/> <!--images --> <img th:src="@/images/01.jpg"/> <img th:src="@/images/03.jpg"/> <!-- Layui Js --> <script type="text/javascript" th:src="@/layui/layui.js"></script>
Demo及静态页面下载#
登录页面源代码:基于Layui简约登录界面
🔨Github: springboot-themeleaf-layui
以上是关于SpringBoot整合LayUI和Thymeleaf制作简单登录页面的主要内容,如果未能解决你的问题,请参考以下文章
SpringBoot整合LayUI和Thymeleaf制作简单登录页面
项目实战 ---- 简单整合SpringBoot + MyBatis + Themyleaf小项目
项目实战 ---- 简单整合SpringBoot + MyBatis + Themyleaf小项目