LayUI学习与应用

最新推荐文章于 2024-04-18 08:58:00 发布

爞笑

最新推荐文章于 2024-04-18 08:58:00 发布

阅读量726

点赞数 1

分类专栏： SpringBoot 前端文章标签： spring boot html

本文链接：https://blog.csdn.net/qq_38763540/article/details/105399622

版权

SpringBoot 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

一、LayUI简介

官网地址：https://www.layui.com

官网简介：

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，它区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

不知道有没有人和我一样，对于前端框架，我还是比较喜欢接近原生的，有些前端复杂的配置有时候过于繁琐，LayUI是一个使用简单、上手容易的前端 UI 框架，非常适合后端开发人员构建后台管理系统使用。这个框架与SpringBoot类似，模块化各个组件，拿来即用。其实我更熟悉easyui，因为它是我最初接触的一个前端框架，但是相比EasyUI相比，我觉得LayUI看起来更加的美观。更是适合拿来作为后台管理系统的开发，其实说到后台管理系统的开发，现在越来越多的集成模板，像ant-design-pro-master等等，这些可以慢慢了解。

二、SpringBoot加入layui

SpringBoot现在一般用于微服务开发，但在常规的web开发中SpringBoot同样应用普遍，因为SpringBoot可以实现快速构建项目，少量配置即可快速搭建开发环境

2.1构建SpringBoot项目

如上图所示的static和templates，springboot默认 static中放静态页面，而templates中放动态页面。但是以前maven项目中的webapp文件夹也可以有，需要配置视图解析器才可以访问。

注意：

1.如果把页面放在static下的话，可以直接通过浏览器ip+端口+页面进行访问

也可以通过控制器进行访问，但是必须写文件后缀.html，否则无效，注意这里用的是Controller注解，不能用RestController注解，至于原因可以自己去了解下RestController这个注解
@Controller
public class IndexController{
  
    //这样写才能访问到
    @RequestMapping("index")
    public String hello() {
        return "/index/index.html";
    }
}
 

2.2导入依赖

在pom.xml文件中导入web依赖和thymeleaf依赖

注意：如果要访问templates下的动态页面，必须导入这里的thymeleaf依赖，templates文件夹中的页面需要引入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>

2.3 加入layui

去LayUI官网下载LayUI文件，添加到项目的static目录下

2.4 编写页面

在templates目录下新建HTML文件

我这里复制layui官网的后台布局模板，这里注意：

springboot 对Thymeleaf模板引擎有很多默认配置，如

默认页面映射路径为： classpath:/templates/
默认的文件后缀为： .html

程序编译之后static文件夹下的文件和templates文件夹下的文件其实会出现在同一个目录下，引入样式或者默认图片的时候，注意不要加在路径加/static,下面这种写法是错误的：
<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script> 
但是如要在IDEA中直接打开HTML页面，不依赖项目启动的话，需要在静态资源引入时在路径加上/static，因为/static是SpringBoot项目启动后才生效配置的默认路径

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="../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">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="../layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

2.5 测试

编写Controller测试访问templates下的页面

注意：如果你在static下请求不到js、css、等静态资源时，报错net::ERR_ABORTED 404

可以尝试下面的方法（记得检查清楚自己的文件路径是否写对）

保证编码格式正确js加入type=“text/javascript”，css引入加入rel=“stylesheet”，重启idea软件（亲测解决）

如果你遇到加入静态资源但加载不到的问题时，建议rebuild一下整个项目，然后compile一下，如果还不行，则建议重新启动一下IDEA

@RequestMapping("/admin")
@Controller
public class IndexController {

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

测试结果

三.layui自定义图标

layui这个框架其他都还好，就是自带的图标太少了，只有168个

layui 的所有图标全部采用字体形式定义，取材于阿里巴巴矢量图标库(https://www.iconfont.cn/)

3.1 下载图标

去阿里巴巴矢量图标库下载你需要的图标

3.2 添加图标

把阿里巴巴图标的图标代码下载到本地解压，将下面标注的文件复制到layui的自定义myicons文件夹

3.3 页面引用

在templates目录下的html页面导入使用

导入

<link rel="stylesheet" href="../layui/myicons/iconfont.css" type="text/css">

使用（查看iconfont.css下的图标定义进行取用）

<i class="iconfont icon-yonghuliebiao">你是佩奇吗</i>

如果对layui图标使用有什么疑问可以参考官网

以上为个人学习笔记总结

爞笑

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
LayUI学习与应用

目录一、LayUI简介二、SpringBoot结合layui进行开发2.1新建Springboot的maven项目(IDEA构建)2.2在pom.xml文件中导入web依赖和thymeleaf依赖2.3 去LayUI官网下载LayUI文件，添加到项目的static目录下2.4 在templates目录下新建HTML文件2.5 编写Controller测试访问temp...
复制链接

扫一扫