SpringBoot 整合 Layui

Layui 官网

Layui 源码

JQuery

SpringBoot 整合 Layui

在 resources 下创建 static 文件夹, 将下载的 layui 文件,复制进去
在 resources/templates 下创建 layui.html 文件, layui.html 内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 这里的 href/src 都指向 resources 文件夹下面的 static 文件夹  -->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
</head>
<body>

<script>

    layui.use(function () {
        let layer = layui.layer;
        layer.msg('Hello Layui', {icon: 6});
    });

</script>
</body>
</html>

静态资源文件映射配置

创建 com.github.itdachen.config 包, 创建 DemoBootstrapWebMvcConfig 类

@Configuration
public class DemoBootstrapWebMvcConfig implements WebMvcConfigurer {
    private static final Logger logger = LoggerFactory.getLogger(DemoBootstrapWebMvcConfig.class);

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /* 将请求路径为 /static/ 的路径, 都映射到 resources/static 文件夹 */
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }


}

测试

在 hello 包下创建 HelloLayuiController 类

@Controller
@RequestMapping("/hello")
public class HelloLayuiController {

    @GetMapping("/layui")
    public String helloLayui() {
        return "layui";
    }

}

启动项目, 访问: http://127.0.0.1:8080/hello/layui, 页面上弹出 Hello Layui

SpringBoot 整合 Layui ​

SpringBoot 整合 Layui ​

静态资源文件映射配置 ​

测试 ​

SpringBoot 整合 Layui

SpringBoot 整合 Layui

静态资源文件映射配置

测试