liu_yuanji 2022-08-29 15:56 采纳率: 20%
浏览 40

Springboot+layui加载不出js和css

问题遇到的现象和发生背景

Springboot+layui使用,加载不到layui.js和layui.css资源,怎么调整都不管用。之前在HTML里测试没问题,但是结合application.yml文件,修改路径之后就加载不出来了。

问题相关代码,请勿粘贴截图

application.yml(只粘贴相关部分了)

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

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>示例</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="layui/css/layui.css" rel="stylesheet">
        <!-- 注意:项目正式环境请勿引用该地址 -->
    </head>
    <body>
        <table class="layui-hide" id="test" lay-filter="test"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
            <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
              重载测试 
              <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
              多行
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
              单行
            </button>
            <button class="layui-btn layui-btn-sm" id="moreTest">
              更多测试 
              <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
          </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <!-- 注意:项目正式环境请勿引用该地址 -->
        <script src="layui/layui.js"></script>

        <script th:inline=none>
            layui.use(['table', 'dropdown'], function() {
                var table = layui.table;
                var dropdown = layui.dropdown;
                layer.msg('本示例演示的数据为静态模拟数据,<br>实际使用时换成您的真实接口即可。', {
                    closeBtn: 1,
                    icon: 6,
                    time: 21 * 1000,
                    offset: '21px'
                });

                // 创建渲染实例
                table.render({
                    elem: '#test',
                    url: 'http://localhost:8099/test/findAll' // 此处为静态模拟数据,实际使用时需换成真实接口
                        ,
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '帮助',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    height: 'full-200' // 最大高度减去其他容器已占有的高度差
                        ,
                    cellMinWidth: 80,
                    totalRow: true // 开启合计行
                        ,
                    page: true,
                    cols: [
                        [{
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            fixed: 'left',
                            width: 80,
                            title: 'ID',
                            sort: true,
                            totalRowText: '合计:'
                        }, {
                            field: 'title',
                            width: 200,
                            title: '标题'
                        }, {
                            field: 'recorder',
                            title: '记录人',
                            hide: 0,
                            width: 100,
                            edit: 'text'
                        }, {
                            field: 'department',
                            width: 150,
                            title: '部门',
                            sort: true
                        },  {
                            field: 'date',
                            title: '日期',
                            //edit: 'textarea',
                            width: 150,
                            //style: '-moz-box-align: start;'
                        }, {
                            field: 'detail',
                            width: 300,
                            title: '详情',
                            //sort: true,
                            //totalRow: '{{= d.TOTAL_NUMS }} 😊'
                        }, {
                            field: 'fileName',
                            title: '图片展示',
                            width: 200,
                            templet:function(res){
                                return '<img src='+res.fileName+'"../static/images"/>'
                            }
                        },]
                    ],
                    done: function() {
                        var id = this.id;

                        // 重载测试
                        dropdown.render({
                            elem: '#reloadTest' //可绑定在任意元素中,此处以上述按钮为例
                                ,
                            data: [{
                                    id: 'reload',
                                    title: '重载'
                                }, {
                                    id: 'reload-deep',
                                    title: '重载 - 参数叠加'
                                }, {
                                    id: 'reloadData',
                                    title: '仅重载数据'
                                }, {
                                    id: 'reloadData-deep',
                                    title: '仅重载数据 - 参数叠加'
                                }]
                                // 菜单被点击的事件
                                ,
                            click: function(obj) {
                                switch (obj.id) {
                                    case 'reload':
                                        // 重载 - 默认(参数重置)
                                        table.reload('test', {
                                            where: {
                                                abc: '123456'
                                                //,test: '新的 test2'
                                                //,token: '新的 token2'
                                            }
                                            /*
                                            ,cols: [[ // 重置表头
                                              {type: 'checkbox', fixed: 'left'}
                                              ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
                                              ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                                              ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
                                              ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
                                              ,{field:'joinTime', title:'加入时间', width:120}
                                            ]]
                                            */
                                        });
                                        break;
                                    case 'reload-deep':
                                        // 重载 - 深度(参数叠加)
                                        table.reload('test', {
                                            where: {
                                                abc: 123,
                                                test: '新的 test1'
                                            }
                                            //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                                            //,cols: ins1.config.cols
                                        }, true);
                                        break;
                                    case 'reloadData':
                                        // 数据重载 - 参数重置
                                        table.reloadData('test', {
                                            where: {
                                                abc: '123456'
                                                //,test: '新的 test2'
                                                //,token: '新的 token2'
                                            },
                                            scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
                                                ,
                                            height: 2000 // 测试无效参数(即与数据无关的参数设置无效,此处以 height 设置无效为例)
                                            //,url: '404'
                                            //,page: {curr: 1, limit: 30} // 重新指向分页
                                        });
                                        break;
                                    case 'reloadData-deep':
                                        // 数据重载 - 参数叠加
                                        table.reloadData('test', {
                                            where: {
                                                abc: 123,
                                                test: '新的 test1'
                                            }
                                        }, true);
                                        break;
                                }
                                layer.msg('可观察 Network 请求参数的变化');
                            }
                        });

                        // 更多测试
                        dropdown.render({
                            elem: '#moreTest' //可绑定在任意元素中,此处以上述按钮为例
                                ,
                            data: [{
                                    id: 'add',
                                    title: '添加'
                                }, {
                                    id: 'update',
                                    title: '编辑'
                                }, {
                                    id: 'delete',
                                    title: '删除'
                                }]
                                //菜单被点击的事件
                                ,
                            click: function(obj) {
                                var checkStatus = table.checkStatus(id)
                                var data = checkStatus.data; // 获取选中的数据
                                switch (obj.id) {
                                    case 'add':
                                        layer.open({
                                            title: '添加',
                                            type: 1,
                                            area: ['80%', '80%'],
                                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                                        });
                                        break;
                                    case 'update':
                                        if (data.length !== 1) return layer.msg('请选择一行');
                                        layer.open({
                                            title: '编辑',
                                            type: 1,
                                            area: ['80%', '80%'],
                                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                                        });
                                        break;
                                    case 'delete':
                                        if (data.length === 0) {
                                            return layer.msg('请选择一行');
                                        }
                                        layer.msg('delete event');
                                        break;
                                }
                            }
                        });
                    },
                    error: function(res, msg) {
                        console.log(res, msg)
                    }
                });

                // 工具栏事件
                table.on('toolbar(test)', function(obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    var othis = lay(this);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(layui.util.escape(JSON.stringify(data)));
                            break;
                        case 'getData':
                            var getData = table.getData(id);
                            console.log(getData);
                            layer.alert(layui.util.escape(JSON.stringify(getData)));
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选')
                            break;
                        case 'multi-row':
                            table.reload('test', {
                                // 设置行样式,此处以设置多行高度为例。若为单行,则没必要设置改参数 - 注:v2.7.0 新增
                                lineStyle: 'height: 95px;'
                            });
                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                            break;
                        case 'default-row':
                            table.reload('test', {
                                lineStyle: null // 恢复单行
                            });
                            layer.msg('已设为单行');
                            break;
                        case 'LAYTABLE_TIPS':
                            layer.alert('Table for layui-v' + layui.v);
                            break;
                    };
                });

                //触发单元格工具事件
                table.on('tool(test)', function(obj) { // 双击 toolDouble
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function(index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        // layer.open({
                        //     title: '编辑',
                        //     type: 1,
                        //     area: ['80%', '80%'],
                        //     content: '<div style="padding: 16px;">自定义表单元素</div>'
                        // });
                        layer.alert("编辑:<br>" + JSON.stringify(data));
                    }
                });

                //触发表格复选框选择
                table.on('checkbox(test)', function(obj) {
                    console.log(obj)
                });

                //触发表格单选框选择
                table.on('radio(test)', function(obj) {
                    console.log(obj)
                });

                // 行单击事件
                table.on('row(test)', function(obj) {
                    //console.log(obj);
                    //layer.closeAll('tips');
                });
                // 行双击事件
                table.on('rowDouble(test)', function(obj) {
                    console.log(obj);
                });

                // 单元格编辑事件
                table.on('edit(test)', function(obj) {
                    var field = obj.field //得到字段
                        ,
                        value = obj.value //得到修改后的值
                        ,
                        data = obj.data; //得到所在行所有键值

                    var update = {};
                    update[field] = value;
                    obj.update(update);
                });
            });
        </script>

    </body>
</html>


controller

package com.xct.springbootlayui.controller;

import com.xct.springbootlayui.entity.DataVO;
import com.xct.springbootlayui.service.userService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@CrossOrigin
@RequestMapping("/test")
public class userController {
    @Autowired
    private userService userService;
    @RequestMapping("/findAll")
    @ResponseBody
    public DataVO findData(Integer page, Integer limit){
        return userService.findData(page,limit);

    }
    @RequestMapping("/get")
    public Object get(){
        return "index";
    }


}


下面截图是我的资源存放位置

img

运行结果及报错内容

结果就是标题能显示,但是页面空白,看报错内容就是没有加载js和css

img

改过yml配置,在html页面调整多次文件路径,都不管用。。求解答,感谢!!

  • 写回答

1条回答 默认 最新

  • Gentle0503 2022-08-29 17:53
    关注

    spring:
    mvc:
    static-path-pattern: /static/**
    改成上述的看看

    评论

报告相同问题?

问题事件

  • 修改了问题 8月29日
  • 创建了问题 8月29日

悬赏问题

  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常,d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程