layui-简单入门和在springboot中的使用

最新推荐文章于 2024-05-21 21:29:44 发布

陆沙

最新推荐文章于 2024-05-21 21:29:44 发布

阅读量850

点赞数

文章标签： layui

本文链接：https://blog.csdn.net/pxy7896/article/details/116789404

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

参考： https://www.layui.com/doc/

安装

下载并解压后放在静态资源文件夹下

引入

1.模块化加载

使用layui.js表示先加载要用的，其他按需加载。layui.css比全模块加载时使用的layui.all.js小很多，更适合开发环境，便于快速调试。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
});
</script> 
</body>
</html>

可以拆写成：
文档结构：其中test.html是主页面，与layui文件夹和js文件夹同层。
在这里插入图片描述
a.主页面写：

<script src="layui/layui.js"></script>
<script>
layui.config({
  base: './js/' // 这里是存放新模块的目录。注意这个点号
}).use('index'); // 加载入口
</script>

b. /js/index.js中写：

/**
  项目JS主入口
  以依赖layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

2.非模块化加载

即所有模块一次性加载。
a.改一个文件名：
b.把

<script>
//一般直接写在一个js文件中
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
}();
</script>

如果项目中存放了多个扩展模块（可以简单理解为一个js文件就是一个模块），那么只需要根据其依赖关系将其合并，即可一次性加载所有扩展模块。比如把多个模块合并为main，然后加载main即可。

<script src="../layui/layui.all.js"></script>  
<script>
layui.config({
  base: '../js/' //你的扩展模块所在目录
}).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
}();
</script>

springboot

在这里插入图片描述

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

陆沙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
layui-简单入门和在springboot中的使用

参考： https://www.layui.com/doc/安装下载并解压后放在静态资源文件夹下引入1.模块化加载使用layui.js表示先加载要用的，其他按需加载。layui.css比全模块加载时使用的layui.all.js小很多，更适合开发环境，便于快速调试。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="wi
复制链接

扫一扫

专栏目录