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

devi

发布于 2021-08-18 15:51:11

7650

发布于 2021-08-18 15:51:11

文章被收录于专栏：搬砖记录

官网

0. 前言

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

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

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

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

1. 入手

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

文档：里面都是开发文档的详细介绍，从头开始看就行。
示例：这里就是我们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专用的定位属性

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/01/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度