SpringBoot整合LayUI和Thymeleaf制作简单登录页面

前面已经学习过SpringBoot整合Thymeleaf，这次主要把上次提到的简单登录界面用博文形式写出来

记录一个小Demo的学习，如果没看过SpringBoot整合Thymeleaf可以看一下SpringBoot整合Thymeleaf(三)

先上页面效果图：

Demo所涉及的知识点#

1.SpringBoot请求映射

2.static和templates静态资源映射

只要简单了解这两个知识点，就可以做出简单的登录的页面

Demo所涉及的目录结构图#

Demo所涉及的Pom文件的主要依赖#

Copy

org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web

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

Demo及静态页面下载#

登录页面源代码：基于Layui简约登录界面

🔨Github： springboot-themeleaf-layui

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！