微信公众号：纯洁的麦田。如有问题，请后台留言，反正我也不会听。
前言
如题，今天介绍下 SpringBoot 是如何整合 LayUI 的。
LayUI 简介
layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。作者“闲心”都说了，开发这个框架的出发点是为了满足服务端程序员的需求。所以你懂得。
不多说了，撸起袖子就是干
一、构建springboot项目
这里就不讲如何构建项目了，就说下注意点
1.1：导包
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
1.2：接口和html文件
@Controller
public class IndexController {
@GetMapping("")
public String index() {
return "index.html";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layui HTML</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
</body>
<script src="../layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello LayUI');
});
</script>
</html>
二、下载layui包
https://www.layui.com/
三、项目位置
我放在了 static/js/layui目录下
四、引用正确的layui文件
从上面可以看得出，页面报错，你要引入正确文件
正确引用
<link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/layui/layui.all.js}"></script>
<script type='text/javascript' th:src="@{/js/jquery-3.3.1.js}"></script>
分析：这里引用了一个css和两个layui.js 另外引用了一个jquery文件
五、JS中使用layui.use加载所需模块
layui.use(['laypage', 'layedit'], function(){
var laypage = layui.laypage
,layedit = layui.layedit;
//do something
layer.msg('Hello LayUI');
});
六、爬坑
6.1:引入文件时候我们会遇到一些报错，无法引用文件
如果是静态资源直接调试，如在IDEA中直接打开HTML页面，需要加上/static路径，毕竟/static是SpringBoot项目启动后才生效配置的默认路径
<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script>
6.2:Uncaught ReferenceError: layer is not defined
重新检查layer引用路径，百度大概：某个文件未引入或者引入不对引起
idea有一个跟踪功能，即按着control鼠标点击对象或者方法可以追踪其来源
这里是说layer来自 static/lib/layui包下面的 layui.all.js 或者 static/lib/layui/lay/modules包下面的 layer.js
然后我引入的是 static/lib/layui包下面的 layui.js,难怪会报错了
6.3: testindex:68 Uncaught ReferenceError: $ is not defined
说明testindex文件68行没找到$
这个错误的原因就是你没有引入jquery库文件或者引入的路径不对造成的
到此，前端 LayUI 框架已经完成。
后语
如果本文对你哪怕有一丁点帮助，请帮忙点好看。你的好看是我坚持写作的动力。
另外，关注免费学习。