Layui-基本使用、数据调试

首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。

组件库

使用文档

Springboot+Thymeleaf+layui框架的配置与使用

Spring data jpa 分页+ layui数据表格渲染数据

我觉得我现在能看懂了，感慨。

layuitable 里面 json数据有多层嵌套, 请问要怎么获取数据

下面这个主楼里用的是改底层源码的方式，我觉得不可取。

layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法

下面有对主楼这样的补充，但也是改的底层源码：

我用的版本中Layui符号是以字体的形式表示的（layui 230 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以下写法。

SpringBoot 中 引用LayUI font 不显示问题解决办法

以后可以直接使用内联元素调出字体图标。

Layui字体图标库

第二种方法（我没试过）：

Spring Boot使用layui的字体图标时无法正常显示 解决办法

layuiAdmin使用总结，基于springmvc

Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。

虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。

通过tablerender来刷新、绘制table

Layui表格单元格编辑保存

le可编辑扩展下拉框编辑器

layui的table中日期格式转换

这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。

下面是我用在了进度计划行内编辑中的例子。

  11   th:id    

         替换id标签

  12    th:text   

          文本替换，包括html标签

  13 th:utext   

        文本替换，html标签会显示出正确的样式

   14 th:object 

   替换对象， 用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

15  th:value

属性赋值

16 th:with

定义局部变量。

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文, 以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

定义多个局部变量

17 th:style

设置样式

18 th:onclick

点击事件

19 th:each

属性赋值

110 th:if

 判断条件

111 th:unless

和th:if判断相反

112 th:href

链接地址

113 th:switch

多路选择配合th:case使用

114 th:fragment

自定义片段，定义fragment，所有的fragment可以写在一个文件里面，也可以单独存在

   115  th:insert

   保留自己的主标签，保留th:fragment的主标签。

  116  th:replace

  不要自己的主标签，保留th:fragment的主标签。

    117 th:include

    保留自己的主标签，不要th:fragment的主标签。（官方30后不推荐）

    结果为:

118 th:selectd

selected选择框选中

119 th:src

类地址引入

120 th:inline

定义js脚本可以使用变量

121 th:action

表单提交的地址

122 th:remove

删除某个属性

1all:删除包含标签和所有的孩子。

2body:不包含标记删除,但删除其所有的孩子。

3tag:包含标记的删除,但不删除它的孩子。

4all-but-first:删除所有包含标签的孩子,除了第一个。

5none:什么也不做。这个值是有用的动态评估。

123 th:attr

 设置标签属性，多个属性可以用逗号分隔

$ {}    变量表达式，可用于获取后台传过来的值

  {} 选择变量表达式  

 ＃{} 消息表达式  

 @ {} 链接⽹址表达式，用于替换网页中的 src、href 等的值

〜{} ⽚段表达式，可以用于引用公共的目标片段

@{} 处理 url 地址

     Thymeleaf 的 @ {} 表达式用于处理 web 应用中的 url 地址，可以是相对地址，也可以是绝对地址。

     @{/}  斜杠开头表示相对整个应用根目录，"/" 表示 "/应用上下文路径"

     假如页面当前浏览器地址为：>

使用SpringBoot Security进行登录验证，可以结合具体的业务需求来使用。在

SpringBoot Security前后端分离，登录退出等返回json

一文中，描述了前后端分离的情况下，如何进行登录验证和提示错误信息的。现在针对自定义的登录页面，能够精确地提示错误信息，做一个简单的演示demo。

本文使用的SpringBoot版本是214RELEASE，下面直接进入使用阶段。

加上这个架包，重启项目后，整个项目就配置了登录拦截和验证。

不输入用户名和密码，直接点击登录时，会有提示信息，输入框的颜色还会变红。查看源码，可以发现，架包默认的登录页面提交方式为表单提交，method为post，并且默认是开启csrf的，在表单里自动生成了一个隐藏域，防止跨域提交，确保请求的安全性。

输入错误的用户名或密码，可以看到页面进行了跳转，跳转后的页面又回到了登录页，只是url地址后面多了一个参数，页面提示错误信息。

从页面源码，我们可以获得以下几个方面的信息：

如果页面是我们自己自定义的，如果要使用默认的过滤器获取登录信息，则必须使用post方式进行提交，如果使用ajax json的方式进行提交，则获取不到参数。

接下来自定义一个登录页面，为了快速构建登录页面，这里使用了thymeleaf模板。

在这个配置中，对登录页面进行了设置，设置使用自定义的登录页面，在Controller需要添加对应的页面渲染。

一个很丑的登录页面，这不是重点。重点是，登录名和密码正确时，页面可以正确的跳转，输入错误时，可以在登录页面进行信息提示。

在MyCustomUserService类中，我们设置了用户名为admin，密码为123456；输入其他的用户名称时，提示用户不存在；不输入用户名称，提示用户不能为空；密码不是123456时，提示密码错误；输入admin，123456时，页面前往index页面，下面进行验证。

session一般是登录时数据库读取后将部分有用信息存入到session中，然后只要是对话未结束，都可以通过存入时的session名去取对应的值，关闭游览器就失效了。跳转到其他页面一般不会失效，你可以看看是不是缺了系统引用或者是继承，session在有些页面不能直接取的。

模板引擎这个词，咋听起来，有点高大上的意味。

实际上，模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的 JSP ，就是一种比较典型的模板引擎。

当浏览器将请求抛给控制器，控制器处理好数据后，就跳转 JSP 等模板引擎页面。注意在跳转的同时，还会将数据组装好，也交给模板引擎处理。

模板引擎会根据数据，和模板引擎的规则，动态生成 HTML 页面，最后返回给浏览器显示。

我们使用 Spring Boot 开发 Web 项目，大体上有两种方式。

第一种方式，是后端服务化的方式，也是当前的主流方式。前端是静态的 HTML 页面，通过 Ajax 请求 Spring Boot 的后端接口。 Spring Boot 返回数据一般采用 JSON 格式，前端接收后将数据显示。

第二种方式，是采取模板引擎的方式。前端的请求，到达 Spring Boot 的控制器后，控制器处理请求，然后将返回数据交给模板引擎。模板引擎负责根据数据生成 HTML 页面，最后将 HTML 返回给浏览器。

我个人比较推荐第一种方式，说一下该方式的几个优点：

本篇是讲模板引擎，也得说说模板引擎的优点，王婆卖瓜不能光夸草莓啊。模板引擎开发的页面，对搜索引擎 SEO 比较友好；还有就是简单的页面，如果用模板引擎开发速度比较快，毕竟模板化的方法，目的就是减少重复提高效率。

Spring Boot 支持的模板引擎种类很多，常见的有 FreeMarker 、 Thymeleaf 、 JSP 。

因为这些模板引擎使用的用户都不少，所以我们逐一介绍下其实现过程。

至于孰优孰劣，请各位看官自行评价。正所谓：尺有所短，寸有所长，各取所爱，万物生长！

本篇我们开发一个商品浏览项目实例。

此处说一个我个人的经验：在做一个项目或一个模块的时候，不要一开始就动手写代码，最好是谋定而后动。

我们作为程序员，实际上是整个程序世界的总指挥。应该先整体规划，再实现局部。这种总分型的开发方法便于我们理顺思路，提高编码效率！

好的，我们来思考下，实现商品浏览项目实例的整体流程：

整体流程

可以看到，我们是先建立了控制器方法和页面，再去实现其中的具体细节。这样可以让我们的思维保持连贯性和整体性，在做一些页面和方法较多的项目时，会感觉更加顺畅。

我们按整体流程，使用 FreeMarker 模板引擎，来实现商品浏览功能。

使用 Spring Initializr 创建项目，Spring Boot 版本选择 225 ， Group 为 comimooc ， Artifact 为 spring-boot-freemarker ，生成项目后导入 Eclipse 开发环境。

引入 Web 项目及 FreeMarker 模板相关的依赖项，代码如下：

实例：

创建控制器类，由于是商品相关的控制器，所以命名为 GoodsController ，代码如下：

实例：

我们具体解释下该类的作用。

我们 resource/templates 目录下新建商品页面 goodsftl ，先不必实现具体功能，代码如下：

实例：

此时我们启动项目，然后访问 >

以上就是关于Layui-基本使用、数据调试全部的内容，包括:Layui-基本使用、数据调试、Thymeleaf的标签和表达式、SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！