SSM框架引用前端框架Layui及引用失败分析

Layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式。对于搞后端的，是一大利器。

Layui官网：https://www.layui.com/

下面介绍怎么引用它，这里以官方的一个实例来讲，实现以下界面效果。

在这里插入图片描述

步骤一

下载好Layui压缩包并解压

在这里插入图片描述

步骤二

将解压后的文件夹里面的layui文件夹复制到项目下，我这里用的环境是eclipse

在这里插入图片描述

步骤三

引入Layui框架的css文件和js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    
</head>

步骤四

参照官方文档，直接使用提供的代码即可。可以根据需要进行修改。

在这里插入图片描述

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><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>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
    
    
        var element = layui.element;

        //…
    });
</script>
</body>
</html>

实现效果

在这里插入图片描述

~~你以为这就结束了吗？~~

当然还没有结束。

如果是SSM框架引用Layui框架，你会发现你引用后并没有效果。

这时候就要在springmvc.xml文件下开启过滤静态资源，加入以下代码

<!--过滤静态资源-->
<mvc:resources mapping="/layui/**" location="WEB-INF/layui/"/>

记得页面引用的代码要对应

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

如果还有其他问题，就自己慢慢摸索吧！

SSM框架引用前端框架Layui及引用失败分析

猜你喜欢