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我脑子都大了…

SpringBoot集成LayuiAdmin的简单使用相关推荐

【快速上手系列】使用Springboot集成Swagger2的简单使用测试
[快速上手系列]使用Springboot集成Swagger2的简单使用测试简介 Swagger2是为了解决企业中接口(api)中定义统一标准规范的文档生成工具. 尤其是前后端分离时对一些业务接口也不 ...
SpringBoot——SpringBoot集成WebSocket实现简单的多人聊天室
文章目录: 1.什么是WebSocket? 2.Java中的WebSocket API 2.1 WebSocket开发中的相关注解及API方法 2.2 前端技术对WebSocket的支持 3.多人聊天 ...
springboot集成Quartz（简单版）job不存储数据库
1.什么是Quartz quartz是一个功能丰富的开源的任务调用系统,它可以定义很多job并发执行,支持事务和集群 2.可以做什么定义任务,在任何时刻,或者某一时刻可以做想执行的任务 3.Quar ...
Springboot集成RabbitMQ一个完整案例
springboot 集成 RabbitMQ 非常简单,如果只是简单的使用配置非常少,springboot 提供了 spring-boot-starter-amqp 对消息各种支持. 1.配置pom文 ...
微信公众号简单接入springboot集成weixin4j
微信公众号简单接入springboot集成weixin4j 内网穿透登录地址:https://natapp.cn/ 注册用户,购买免费渠道进行配置端口号(我配置的是8802) 根据网址进行下一步操 ...
ES入门学习：ElasticSearch、Kibana、ik分词器的安装、简单使用及SpringBoot集成
前言 es是采用Java语言开发,因此,想要安装运行es需要提前准备好jdk环境,关于linux配置jdk在前文linux配置jdk 本文主要介绍es的安装.kibana的安装和简单使用及ik分词器的 ...
史上最简单的Elasticsearch教程：SpringBoot集成Elasticsearch 实时流量监测平台
SpringBoot集成Elasticsearch 实时流量监测平台目录: 第一章:初尝 Elasticsearch 第二章:玩转 Kibana 第三章:开发原生 Elasticsearch 案例 ...
SpringBoot集成cas-client 客户端配置拦截过滤，绝对最简单有效，亲测
我使用的cas-client客户端为2.0.0-GA.对于以前使用web.xml进行配置的只需要更改配置文件即可.此文我主要是针对用于SpringBoot集成客户端的过滤请求讲解. 由于最新的cas客 ...
Windows下安装Mongodb SpringBoot集成MongoDB和Redis多数据源
全文内容: Mongodb安装说明:Mongodb和redis是开发中常用的中间件,Redis的安装使用比较简单就不写了,只说本地也就是Windows安装Mongodb. SpringBoot集成M ...

SpringBoot集成LayuiAdmin的简单使用