SpringBoot集成LayuiAdmin的简单使用

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、程序扩展

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

  1. 在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>
    
  2. 在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";
    }
    
  3. 在templates文件夹下新建三个html文件,内容随意,注意名字要和控制方法里面的返回的视图值保持一致

  4. 运行项目,实现效果如下:
    完整动图

  5. 神功已经练成,尽情发挥吧(>_<)!!!

9、总结

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

  • 12
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值