SpringBoot集成LayUI及组件使用

最新推荐文章于 2024-08-16 07:50:40 发布

只因啊

最新推荐文章于 2024-08-16 07:50:40 发布

阅读量4.4w

点赞数 12

分类专栏：前端文章标签：后端开发人员使用LayUI的姿势

本文链接：https://blog.csdn.net/wulianzhazha/article/details/92209750

版权

介绍：LayUI是一个使用简单、上手容易的前端 UI 框架，非常适合后端开发人员构建后台管理系统使用。这个框架与SpringBoot类似，模块化各个组件，拿来即用。相比另一个后台管理前端框架EasyUI相比，LayUI更加注重极简方格，组件也更加的美观。
更多介绍见LayUI官方文档

1. 新建MAVEN项目，构建目录结构，如图：

在这里插入图片描述

2. POM文件中引入Web和Thymeleaf依赖

<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>

3. 新建简单前端控制器

/**
 * @description: 前端控制器
 * @author: xu zhihao
 * @create: 2019-06-14 10:36
 */
@Controller
public class IndexController {

    @GetMapping("")
    public String index() {
        return "index.html";
    }

}

4. 在LayUI官网下载LayUI文件，添加到项目中，并新建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>

注意：

spring-boot 对Thymeleaf很多配置有默认配置，如默认页面映射路径为： classpath:/templates/，默认的文件后缀为： .html。所以，上面HTML文件中引入的css和js文件路径不要写成如下这种写法：

<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script>

检查资源文件是否加载，可在浏览器中调试模式下看是否加载成功，如下为加载不成功示例：
如果是静态资源直接调试，如在IDEA中直接打开HTML页面，需要加上/static路径，毕竟/static是SpringBoot项目启动后才生效配置的默认路径

<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script>

5. JS中使用layui.use加载所需模块

layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage
  ,layedit = layui.layedit;
  
  //do something
  layer.msg('Hello LayUI');
});

6. 常见页面元素使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui HTML</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><i class="layui-icon layui-icon-release" style="font-size: 30px; color: #fff1fd;"></i>
            运营后台管理系统
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
<!--        <ul class="layui-nav layui-layout-left">-->
<!--            <li class="layui-nav-item"><a href="">控制台</a></li>-->
<!--            <li class="layui-