本文章创建于2021年10月8日，20时10分
于10月11日早上5：30制作完毕
- 1、layui官方公告
- 2、为什么要使用layui框架、layui框架的好处
- 3、layui框架的使用
- 3.1、导入Layui的资源
- 3.2、项目中的资源引入，我们项目中的webapp文件下，直接将资源的layui文件复制进去即可
- 3.3、技术文档的支持
- 4、代码上手，按键模块示例，框架的引入
- 5、layui框架模块的引入和使用
- 6、栅格系统：
- 6.1、设备问题引起的布局错乱
- 7、管理系统界面布局
- 8、按钮组件
- 8.1、图标按钮的使用
- 9、导航栏
- 9.1、解决效果问题
- 9.2、默认选项
- 9.3、实现导航栏的二级菜单
- 9.4、模块的使用事项
- 9.5、导航中徽章的使用（消息提示效果）
- 9.6、导航更换主题
- 9.7、垂直导航、菜单效果
- 9.8、垂直导航二级菜单点不出来效果
- 10、选项卡的使用
- 10.1、细节添加
- 10.2、选项后面添加X
- 11、form表单的使用（重点）
- 11.1、指定输入框长度
- 11.2、提交按钮的两种方法：
- 11.3、 表单验证
- 11.4、实现ajax的请求发送
- 11.5、表单中的各个选项及其注意事项
- 11.5.1、required必填项
- 11.5.2、placeholder初始文本提示
- 11.5.3、autocomplete="off"历史记录是否展示
- 11.5.4、密码
- 11.5.5、下拉框
- 11.5.6、复选框
- 11.5.7、开关
- 11.5.8、单选框
- 11.5.9、文本域
- 11.6、组装行内表单
- 12、弹出层
- 12.1、open弹窗：
- 13、日期和时间
- 13.1、给指定元素添加日期
- 13.2、日期范围
今天是我刚接触layui，对于后台的开发人员来说，了解基本的前端编程还是很有必要的，虽然平时写的前端不多，但也是被繁琐的前端代码搞得很烦，于是为了避免这种情况，就把代码简化，没有布局，没有定位，没有美观，反正就是丑的一批，但是后端人员在意这么多干什么，只要不是特别指定需求，我只要前台可以接收和反馈数据就可以了；
但是考虑到今后工作中可能会见到前端框架，为了更好的与前端进行交互，那么就必须了解一下，否则写代码的时候，连前端页面的接口我都找不到；
最近看到官网发的信息：
点击进入官网
觉得很有感触，虽然我也是第一次学习这个，但是在步入Java时，敲hello word的时候，就听过layui，那么对于之前使用过layui的程序员，可能感触更大。
下面我将用心做出一个文章，将对layui做出一定的代码示例演示，用最通俗的语言描述对应的方法和功能，但需要注意的是，这篇文章，只针对于后端开发人员，了解即可，并不适用于专业的前端人员，以及对框架知识要求过高的朋友，请周知！
我们的layui框架就是提供的特定的方法和接口，我们想要什么样式和效果，我们直接拿框架内的直接用就可以了，比如我们之前手写的form表单或者是下拉框、等等，就不用我们在一个标签一个标签手敲了，这样我们只需要关注传值和取值的本身，其他的一些复杂的操作直接交给框架即可
layui框架为我们后端的人员提供了很好的帮助，下面就是layui框架的特点以及使用详解
这个可以去他的官网直接下载即可，虽然过不久侯官网就会关闭，但是大家可以去他的gitee下载
点击跳转
并不需要其他的jar包，如果单纯使用它，这个已经足够
layui的官方技术文档本身就是不错的，大家如果觉得官方文档可以，大家其实可以直接去看着官方文档里面的代码演示，直接进行复制修改使用即可，如果技术很好的，请直接看文档，没必要看我这个，我这个只为为了初学者学起来更快更简单！
官方文档链接
由于最近官方文档可能会下架，大家可以去之前的gitee里面，贤心应该会发，同时也可以去镜像内部观看；
我们按照之前的步骤在代码中直接引入即可：
Title
把之前资源整体好之后，我们直接在代码中引入class文件和js文件即可，这个都在我们的layui文件内部；
我们要想使用框架内的东西，我们直接使用class进行调用即可，layui为我们提供了各种信息的调用方法，示例如下：
我这里就用按钮举例：
首先我们在代码中定义一个普通的按钮
效果如下：
很明显，这个按钮很平常，最基础的按钮，那我们相对这个按钮的样式变化一下，让他变好看一些，我们直接在标签内使用class进行调用框架内写好的样式即可：
效果：
想实现转跳的按钮，我们直接使用标签即可，a标签是个超链接标签，但是框架内的会转成按钮的样式：
在技术文档中复制：
在刚刚使用的按钮，我们是直接使用class调用框架封装好的方法就可以出现效果了，但是在框架内，有些效果是需要引入模块才能使用的
比如在文档的快速入门的地方就有说明：
那这些代码有什么效果呢？我们可以看一下：
Title
一个可跳转的按钮
运行效果：出现了一个类似于小的弹窗，姑且认为是弹窗
那想要是新这个弹窗的效果，这个弹窗需要模块的支持，所以我们就得导入模块，我们再看一下模块导入的代码：
除了描述的，其余的都是固定格式；
如果我们想用其他的，比如导航：他需要模块：
，
使用框架进行栅格布局
先看技术文档：
如果想用框架系统的框架样式，它需要一个容器进行接收，比如biv标签
栅格系统
123
效果如下：
是我截图的原因，这个他应该是居中的效果；
除此之外还有不对它进行局限，是100%平铺屏幕的效果：
以上就是两种的简单布局
现在我们进行栅格了
框架其实是吧整个布局分成了十二份，我们可以根据不同的占比，来设置布局
我们要定义一个div，引入布局：
栅格系统
123
……
你的内容 9/12
你的内容 3/12
记住这个格式即可
运行效果：
为了更好的观看，我们可以把后面的那个添加上颜色：
现在我们可以通过这个效果，基本上就可以实现div中的一些效果的定位，但是还需要考虑到不同设备下的情况，很可能会出现pc端正常，但是到了手机端和平板，由于屏幕和分辨不同，导致布局错乱；
于是我们可以通过以下进行调整，在技术文档中
看标记，那一列有一个md，md就是我们之前写的div引用布局时写的，我们可以根据不同的设备进行更改即可
但是我们一直这样修改，岂不是很麻烦，所以，我们可以直接在class内，直接在md9之后，添加一个空格，再写一个，只不过这个就不要时md了，可以换其他设备，这样就可以在多台设备进行添加
我们管理系统，其实大体都差不多，都是上面有一个导航栏，左边有一个目录栏，右边有一个主题，可能最下面还有一个尾栏，
技术文档内就有指出：
代码实现：
栅格系统
123
123
示例布局已经做好，现在要添加颜色， 之前我们是按照原先的div的颜色标签进行添加颜色的，其实在框架内部，提供了颜色：
添加代码后的颜色是这样：来看下效果：
发现并不尽人意，那是因为，主体部分我们并没有限定高度，但是限定高度仍属于div的属性，子啊框架中，我们可以通过layui-layout-admin解决，他会自动生成管理系统布局：
那此刻我们的管理系统布局已经做好了：
左边的空白部分是菜单，我们暂时可以忽略；
说实现，现在已经凌晨一点07分了，真晚了，真不想在写了；再写一点，今晚先发布出去，等之后在添加改吧，唉，苦逼的编程生活
我们一开始使用的示例，就是由框架生成的按钮的效果
代码演示：
栅格系统
a标签的按钮
span标签的按钮
我们普通的框架按钮，作用在其他元素上，都可以生成按钮
除了这些，还有一些其他格式的按钮，我们只需要添加不同的class就可以了，就不再一一展示了
这些按钮添加响应的class即可，下面讲一下图标按钮的使用
在我们的文档中就有描述
如何才能把 图标和按钮组合起来呢，主要由两个方法：
class引入：
效果：
想要更换，更换后面的样式即可
图标下面的就是：
另外一种就是使用样式上面的那一段文字：
具体使用如下：
只不过是早之前的版本，推荐使用class那个
导航栏再前端的应用中非常广泛，通常我们再使用平台，进行不同页面的切换，导航栏可以简洁高效的实现效果：
代码演示：
栅格系统
- java
- python
- C
- C++
运行效果：
可以看到，我们只是创建了一个导航栏，并没有其他的属性，在这里显得不自然，那么我们可以再li标签内部添加一个a标签，包裹选项：
现在就好看很多：
再我们的导航栏中，可能再实际的项目展示的过程中，可能需要默认选中某一个选项：
再导航栏中，我们可以对选项添加子选项，也就是二级菜单，如果我们想哪个菜单下面添加菜单，就直接再a标签中添加dl标签即可：如：
效果：
我们再使用这个模块的时候，需要导入模块：
其实即使我们不导入模块，我们的导航栏效果照样可以实现，但也仅仅只能实现效果，无法对导航进行功能操作
如果需要导入多个模块，如下：
我们在网站中经常发发现某些提示的效果，比如我们在csdn的时候，如果有人评论点赞了我们的文章，那么消息那一栏就会出现一个小红点，这个效果在layui的徽章中可以实现：
在我们的文档中就有指明徽章的使用：
我们要想使用徽章，直接把相关的样式直接扔到a标签内就行了：
代码演示：
我们的导航默认应该是藏青色，想换其他颜色，也是可以的
水平导航有三种 主题，垂直的只有默认的一种
，如果想要更换，直接把对应的方法调用即可，我们的导航引入是用ul标签，直接在ul标签使用即可
代码演示：
当然，也不知也三种，如果想用其他颜色，可以后面的代码即可
在我们的管理系统中，左侧都会有一个菜单栏，我们通过导航也可以实现，在ul标签内添加layui-nav-tree即可：
目前的菜单也只是导航 自适应的效果，我们还可以添加layui-nav-side实现导航布满左侧的效果
当我们点击左边的二级菜单，他会直接刷新页面，我们可以把设置a标签，让他不再转跳
完整代码：
栅格系统
选项卡就是当我们点击菜单或者导航时，主体窗口会出现不同的效果，这个就是选项卡
代码展示：
他们之间的联系时一一对应的，下面的第一个内容对应的上面第一个标签；还有选项卡的大小是根据内容的多少进行匹配的，如果想要设定选项卡的大小，直接在选项卡中设置高度即可
效果：
我们点击哪个，就会跳到哪个选项卡
在这之前，我们的选项卡的选项点击效果不是特别明显，我们可以添加layui-tab-brief，实现效果：
字体会变颜色，另外还可以出现一个指示栏，这样效果就可以展示的更加明显
10.2、选项后面添加X我们在有些应用上，我们可以关闭某些选项，点击后面的X就可以了，layui就可以实现，我们只需要添加一串代码即可lay-allowClose=“true”
点击X就可以关闭；
在我们学习基础的jsp的时候，基本上我们都会手敲form表单，但展示美观一般，在框架它自身就有表单
代码演示：需要导入form模块
之后需要使用form的标签，并指定class
栅格系统
11.1、指定输入框长度
默认div就是自适应屏幕的，如果我们想要指定，只能通过手动设置
11.2、提交按钮的两种方法：除了刚刚在文中注释的，还有一种提交方法
当然，只要在指定layui的div中不写的话他也会默认提交，这是第一种方法，
第二种方法，就是把提交这个功能直接交给layui进行管理，添加lay-submit
之前我们大都是通过span标签与jq进行表单验证的，示例：如果不使用之前那种导入jq的方法，也可以使用如下方法
之前的方式仍然可以使用，同时我们也可以使用layui中的
我们也可以通过表单项的值获取输入的值
如果我们想要实现ajax发送，那我们需要把提交按钮改成type=“button”，另外把lay-submit lay-filter="formDemo"去掉，添加id
如果我们设置某个文本框设置位必填项，我们之前就会通过表单验证的形式，以及span的方式，现在layui只需要添加required即可
另外我们还可以更换校验的格式，之前写的required可以删掉
除了这些，我们也可以进行其他校验，比如手机号，邮箱等：
添加off就是不默认展示
如果是on就会出现以下效果：
密码跟之前一样，改type：password
11.5.5、下拉框
同时也支持分组：
另外对于如果选项多的话，我们也可以通过添加lay-search对选项进行搜索
11.5.7、开关
只有用户是开启的状态，我们才可以获取里面的值，可以直接使用value
11.5.9、文本域
基本上和之前使用一样
11.6、组装行内表单
为了可以模范模拟查询的样式，所以有了组装行内表单
需要加载模块
弹出层出现小图标
图标一供有七种，数字只能填1-7，如果多填，马效果只能是最后一个效果
第二种：有一个确定键
想要改变弹窗标题：
另外同时也可以执行函数
如果调用函数，如果不写东西，会无法关闭弹窗
弹出选择框
如果点击了确定，可以通过发送消息值后台
弹出输入框
12.1、open弹窗：实现效果举例：
详细介绍
在我们使用项目的时候，如果有这样的需求，1和2的区别，1的话效果不怎么美观，但是修改获取值简单，2获取值比较麻烦
设置open的宽高
目前只能输入年月份，如何输入其他时间？
我们有时候需要日期的范围
这样，是没有办法向后台传数据的
可是使用两个div进行传入
-
终于写完了，没想到写了这么久。我发现自身的约束力真的是不怎么好，国庆七天，本来打算复习Java的，结果我玩了六天，昨天周日，我本来打算恶补的，却发现看小说，看了一天，我的自制力太差了，没办法，有些时候，小说和游戏确实很吸引人，但是我还有一个月就毕业了，要说我现在的编程能力强吧，倒也不是很强，要说不强吧，那是真不强，但基本的更删改查还是可以的，但是想进大厂，拿高薪，毕竟，学这个大都是为了高新，看来我必须克制了一段时间了，等工作之后，我在好好玩吧！！！毕竟要给自己一些动力，只能先欺骗自己，如果有兄弟看到这些话，请忽略，因为我初来新的城市，还没知心朋友，但又不吐不快，所以只能在这属于自己的一方小天地发一下牢骚，另外如果有兄弟，觉得我写的不好的话，也请不要在意，因为这是我的个人笔记，设置私密的话，找起来会很麻烦，这里面有些内容我懂，所以没有写的这么详细，如果不算我其他时间，就单纯写这篇文章，加起来的有一整天！我的天，凌晨5：30了，熬了一个通宵，白天我怎么办，天啊
