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文件下都是一些模拟数据,可以删除该文件夹;其它尽量不要删除
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我脑子都大了…