Layui 配置与使用流程

Layui 是前端UI组件库，常和 SpringBoot + Thymeleaf 搭配使用。不需要后端Maven依赖，只在HTML页面引入css、js文件。

两种引入方式

方式1：CDN在线引入（推荐开发使用，无需下载文件）

直接在html的head引入css，body末尾引入js

<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>

方式2：本地文件引入（生产推荐）

1. 下载layui压缩包，解压
2. 将dist文件夹放到 resources/static/ 下面
3. 页面引用：

<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
<script th:src="@{/static/layui/layui.js}"></script>

搭配Thymeleaf使用，静态资源放在resources/static，用th:href/th:src引入。

基础模板（最小完整页面）

<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
  <meta charset="UTF-8">
  <title>Layui演示</title>
  <link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
  <button class="layui-btn">测试按钮</button>

  <script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
  <script>
    // layui模块化入口，所有组件写在里面
    layui.use(function(){
      var layer = layui.layer;
      layer.msg('hello layui');
    })
  </script>
</body>
</html>

核心规则

1. Layui采用模块化，所有内置组件（layer、form、table等）必须在layui.use()内部使用。
2. 样式依靠class，给标签加上layui提供class即可自动渲染样式。
3. 和Thymeleaf组合：Thymeleaf在服务器渲染HTML；Layui在浏览器端渲染样式、处理交互。

SpringBoot注意事项

• layui的css/js属于静态资源，必须放在resources/static，不能放到templates。
• templates下面放html页面（thymeleaf模板）。