springboot集成layui框架程序示例

最新推荐文章于 2024-08-16 07:50:40 发布

Keep forward upup

最新推荐文章于 2024-08-16 07:50:40 发布

阅读量663

点赞数

分类专栏： springboot项目文章标签： layui javascript html

本文链接：https://blog.csdn.net/weixin_45594172/article/details/120037316

版权

springboot项目专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、什么是layui

layui 是一款开源的前端UI框架，可以极大的提高程序开发效率。
layui官网链接

二、使用之前的相关配置和处理

1.下载安装包（可以直接从官网下载新版本）：
在这里插入图片描述

2.将解压后的layui文件夹放在项目的webapp目录下：
在这里插入图片描述

3.删除webapp目录下的index.jsp，新建一个index.html:
在这里插入图片描述
新建的index.html:

4.引用layui的方法
将css，js引入，加以下代码到index.html中：

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

如图所示：
在这里插入图片描述
(2)编写第一个layui程序（下边是完整的index.jsp程序）：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
       
        layui.use(['layer','form','jqury','table'],function () {
            //编写自己的layui 代码
            let layer =layui.layer;//声明对象
            layer.msg('这是第一个layui程序');//使用已经有的api

        })
    </script>

</head>
<body>

</body>
</html>