微信公众号：纯洁的麦田。如有问题，请后台留言，反正我也不会听。

前言

如题，今天介绍下 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 框架已经完成。

后语
如果本文对你哪怕有一丁点帮助，请帮忙点好看。你的好看是我坚持写作的动力。
另外，关注免费学习。

纯洁的麦田

SpringBoot实战 (五) | 整合 前端 LayUI 框架

前言