thymeleaf - layui 简单使用- 2022-08-18

thymeleaf - layui 简单使用

thymeleaf 的配置

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
//修改模板路径 
spring.thymeleaf.prefix=classpath:/view/

默认地方查看

package org.springframework.boot.autoconfigure.thymeleaf;

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties 

添加static 可以访问情况

package org.springframework.boot.autoconfigure.web.servlet;
 
@ConfigurationProperties(
    prefix = "spring.mvc"
)
public class WebMvcProperties {
    private String staticPathPattern = "/**";

源路径是resources 根目录下。

spring:
  mvc:
    static-path-pattern: /static/**

下载layUI 包
https://gitee.com/layui/layui/releases/tag/v2.7.6

│  layui-v2.7.6
        │  免责声明.url
        └─layui
        │  layui.js
        ├─css
        │  │  layui.css
        │  └─modules
        │      │  code.css
        │      ├─laydate
        │      │  └─default
        │      │          laydate.css
        │      └─layer
        │          └─default
        │                  icon-ext.png
        │                  icon.png
        │                  layer.css
        │                  loading-0.gif
        │                  loading-1.gif
        │                  loading-2.gif
        └─font
            iconfont.eot
            iconfont.svg
            iconfont.ttf
            iconfont.woff
            iconfont.woff2

demo.html 放入到view 文件夹中；

layui 放入到static文件夹中；

写一个controller

方法

    @GetMapping("/test")
    public String test(Model model){
        return "test";
    }

修改demo.html 中
<link rel="stylesheet" th:href="@{static/layui/css/layui.css}" href="layui/css/layui.css">
<script th:src="@{static/layui/layui.js}" src="layui/layui.js"></script>

查看 就正常了

http://localhost:8387/test

image.png

layui 添加extend 使用

extend.html 里面demo 使用
或data 接口中的数据。
添加了admin.js 然后进行接口调用，get post put 方法都支持。

从layui单体版本：https://gitee.com/xiaonuobase/snowy-layui
这个里面获取到的。

image.png

是easyweb 版本
https://demo.easyweb.vip/iframe/
收费版本。
收费版本就不说了。。主要说的是扩展怎么用。

image.png

每个页面都引用就行了。

image.png

image.png

data 数据获取，看 data 数据

    @ResponseBody
    @GetMapping("/data")
    public Object extendData(){
        Map<String, Object> map = new HashMap<>();
        map.put("data","ddd");
        map.put("message","获取成功");
        map.put("sucess", true);
        map.put("code", 200);
        return map;
    }

结果显示

image.png