SpringBoot集成LayuiAdmin的简单使用

2023-11-12

SpringBoot+LayuiAdmin的简单使用

分享一下SpringBoot集成LayuiAdmin的一些心得体会，刚开始网上找了半天没找到集成教程，鼓捣了一阵只好自己上手了…

快速开始

1、准备一份LayuiAdmin

源码压缩包解压后进入dist文件夹，通常该文件夹有两个子文件夹：layuiadmin和views；别问我压缩包怎么弄，问就是自己悟…

2、创建项目

创建一个SpringBoot项目，勾选依赖的时候别忘了选Spring Web和Thymeleaf，当然，你也可以后续再添加；把一些不需要的文件删除，具体略…

3、配置文件

在application.properties文件中添加如下配置，以过滤静态资源文件

spring.mvc.static-path-pattern=/static/**

4、导入静态资源

将layuiadmin文件夹整个复制到static文件夹下，如图所示：（图片错了，应该是static文件夹下，尴尬…）

导入资源之后

注意：json文件下都是一些模拟数据，可以删除该文件夹；其它尽量不要删除

附赠一份LayuiAdmin目录详解

5、创建页面

将views文件夹下的index.html文件复制到项目的templates文件夹下

改动如下：

1、引入thymeleaf空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    
    2、将原生的引入资源改成如下方式(这样写比较规范，原生的也可以引入，但需注意路径正确)
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}">
  	<link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}">
    <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
    
    3、改动静态资源文件夹
    <script>
        layui.config({
          //静态资源所在路径
          base: '../layuiadmin/'   --->改成 'static/layuiadmin/'
        }).extend({
          //主入口模块
          index: 'lib/index'
        }).use('index');
  </script>
</html>

6、页面跳转

在启动类同级或以下写个控制类，跳转到该页面

@Controller
public class PagesController {
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
}

7、运行测试

启动项目，效果图如下：
初始效果图

8、程序扩展

上一步可以看出，整个系统父页面已能正常显示，子页面加载出错；下面就以控制台、主页一、主页二这三个来演示如何扩展程序：

在index.html中找到这三个链接，更改lay-href如下：

<dl class="layui-nav-child">
    <dd data-name="console" class="layui-this">
        <a lay-href="admin/console">控制台</a>
    </dd>
    <dd data-name="console">
        <a lay-href="admin/one">主页一</a>
    </dd>
    <dd data-name="console">
        <a lay-href="admin/two">主页二</a>
    </dd>
</dl>

在PagesController类中添加跳转控制

@RequestMapping("admin/console")
public String console() {
    return "console";
}

@RequestMapping("admin/one")
public String one() {
    return "one";
}

@RequestMapping("admin/two")
public String two() {
    return "two";
}

在templates文件夹下新建三个html文件，内容随意，注意名字要和控制方法里面的返回的视图值保持一致
运行项目，实现效果如下：
神功已经练成，尽情发挥吧(>_<)!!!

9、总结

私认为，LayuiAdmin算是一个对我这种后端比较友好的框架，只需要很简单的配置就能实现很棒的页面效果，总算不用每次都很痛苦的写页面布局了，想想那些复杂的CSS我脑子都大了…

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

spring boot