Java学习笔记-全栈-web开发-22-后端程序员用的前端框架——layUI

程序员文章站 2022-07-14 09:33:07

...

layUI

0. 前言
1. 入手
2. 开始使用
3. 重点

官网

0. 前言

其实先学Vue、elementUI，还是先学jQuery，纠结过一阵子。
毕竟，很多人都说jQuery过时了。
jQuery能做到的，Vue都可以做到。

但是，Spring全家桶提供了非常好的开发生态，如果不是非常大的大型项目，个人感觉SpringBoot+thymeleaf+jQuery已经够用，这也是最快速的全栈方案——不涉及过多的前端专用框架。

而layUI，就是专门面向后端程序员开发前端的（一站式方案）。

但是，想要实现前后端分离，还是得用vue（或类似框架），所以，后面再学。

1. 入手

官网下载，都是中文没啥困难。
官方文档已经非常简单详细，这里介绍一下官方文档的使用方法，以及必备套路。

Java学习笔记-全栈-web开发-22-后端程序员用的前端框架——layUI

文档：里面都是开发文档的详细介绍，从头开始看就行。
示例：这里就是我们copy代码的宝库，里面几乎将所有的使用方法都提供了演示和代码，方便按需copy。还能在线调试
周边：其中的“扩展组件”提供了基于layUI的组件，有时候会用到，比如dtree

2. 开始使用

创建springboot项目，引入spring web和thymeleaf。

将下载包中的layui文件夹整个放入resources/static中，然后对应页面引入js和css即可。

<head>
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->

<script src="/layui/layui.js"></script>
</body>

layui.all.js包含了所有的组件，layui.js则没有。
推荐使用layui.js，需要什么组件就声明什么组件即可。

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

上述代码就表示，声明本页面要使用layer和form组件（组件功能请查询开发文档）

还能通过以下办法导入jQuery

<script>
layui.user(['jquery'],function(){
var $=layui.jquery;
//此处编写jq代码
});

</script>

然后就是通过定义class改变样式，实现功能；
具体的方法请查看官方文档，写的非常清楚；
接下来只记录一些重点

3. 重点

导入layUI，将整个layui文件夹放入resources下
不要在非web环境下测试，会出现X-Content-Type-Options: nosniff 异常
组件的使用需要先layui.user([‘组件名’],function(){})声明使用，并在其内进行变量声明：var 组件名=layui.组件名
通用属性 lay-filter layui专用的定位属性

其他的开发文档写的非常清晰了