sintaxis de expresiones
La función principal de la plantilla es convertir los datos devueltos por el fondo en HTML. Entonces, ¿cómo analiza Thymeleaf los datos de fondo? A continuación, aprenda la sintaxis admitida por las expresiones de Thymeleaf desde los aspectos de variables, métodos, juicios condicionales, bucles y operaciones (operaciones lógicas, operaciones booleanas, operaciones de comparación y operaciones condicionales).
1. Asignación y empalme
(1) Asignación de texto
La tarea consiste en reemplazar los datos devueltos por el fondo en la página a través de la etiqueta ${}.
<p th:text="${name}">hello spring boot</p>
(2) Empalme de texto
Thymeleaf admite empalmar el valor devuelto por el fondo con el contenido existente y luego reemplazarlo en la página. El código de ejemplo es el siguiente:
<span th:text=" 'Welcome,' + ${username} + '!' "></span>
En el ejemplo anterior, el valor de nombre de usuario devuelto por el fondo se empalma después de "Bienvenido" y finalmente se reemplaza en la página <span>. Los literales de texto se pueden encerrar entre comillas simples y los caracteres especiales se deben escapar con "\".
Además del método de escritura anterior, existe otra forma concisa de escribir la concatenación de cadenas:
<span th:text="|Welcome, + ${username} + !|"></span>
En el ejemplo anterior, se utilizan dos barras verticales "|" para fusionar los datos devueltos por el fondo con el contenido de la página.
La etiqueta Thymeleaf es básicamente lo mismo que HTML. Agregar "th:" a la etiqueta HTML puede reemplazar el valor del atributo nativo en la etiqueta HTML.
2. Sentencia condicional
Thymeleaf usa los atributos th:if y th:unless para el juicio condicional. Use el atributo th:if en la etiqueta para juzgar si la expresión es verdadera, si es verdadera, se mostrará el contenido de la etiqueta, y si no es verdadero, el contenido de la etiqueta se ocultará. th:unless es justo lo contrario de th:if, y su contenido se mostrará solo si la condición en la expresión no es verdadera.
Los resultados de las expresiones th:if y th:unless admiten booleanos, números, caracteres, cadenas y otros tipos. El siguiente ejemplo demuestra cómo usar los atributos th:if y th:unless en Thymeleaf para el juicio condicional.
El paso 01 define la página HTML.
Cree la página if.html en el directorio de plantillas, el código de ejemplo es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>条件判断</h3>
<a th:if="${flag == 'yes'}" th:href="@{http://www.a.home/}">a.home</a>
<a th:unless="${flag != 'no'}" th:href="@{http://www.b.home/}">b.home</a>
</body>
</html>
En el ejemplo anterior, el juicio condicional se realiza a través de la etiqueta th:if.If flag==yes, se muestra el enlace de a.home, de lo contrario, se muestra el enlace de b.home.
El paso 02 define la interfaz de back-end y devuelve resultados de datos.
@RequestMapping("/if")
public String ifunless(ModelMap map) {
map.addAttribute("flag","yes");
return "if";
}
En el ejemplo anterior, se define la URL de la solicitud, se devuelve la página if.html y el valor de la bandera es sí.
El paso 03 inicia la verificación.
Después de iniciar el proyecto, ingrese la dirección http://localhost:8080/if en el navegador, como se muestra en la figura.
En la figura se puede ver que el valor del indicador devuelto por el backend es sí, th:if="${flag == 'yes'}"y se cumple la condición, por lo que se muestra el enlace de a.home. Y th:unless="${flag != 'no'}"también se establece la condición, por lo que se oculta el enlace de b.home.
3.cambiar
Thymeleaf usa las etiquetas th:switch y th:case para juzgar múltiples condiciones, lo que es equivalente a la instrucción switch en Java, y muestra el contenido coincidente de acuerdo con las condiciones. Si hay varios resultados coincidentes, solo se selecciona el primero para mostrar. . th:case="*"Indica la opción por defecto, es decir, th:case="*"el contenido que se muestra cuando el valor de no case es verdadero, correspondiente al valor por defecto de switch en Java. A continuación, se utiliza el estado de los datos como ejemplo para demostrar el uso de th:switch.
Paso 01 Cree la página de inicio.
Cree una página switch.html en el directorio de plantillas, el código de muestra es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example switch</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>switch</h3>
<div>
<div th:switch="${status}">
<p th:case="'todo'">未开始</p>
<p th:case="'doing'">进行中</p>
<p th:case="'done'">完成</p>
<!-- *：case的默认选项 -->
<p th:case="*">状态错误</p>
</div>
</div>
</body>
</html>
En el código de muestra anterior, use las etiquetas th:switch y th:case para mostrar los datos coincidentes según el valor de estado devuelto por el fondo.
Paso 02 Agregue un programa de back-end.
@RequestMapping("/switch")
public String ifunless(ModelMap map) {
map.addAttribute("status","doing");
return "switch";
}
En el ejemplo anterior, la página switch.html se devuelve en segundo plano y el valor de estado de hacer se devuelve al mismo tiempo.
Paso 03 Ejecuta la verificación.
Inicie el proyecto, ingrese la dirección http://localhost:8080/switch en el navegador, y el efecto de visualización de la página es como se muestra en la figura. La página muestra el estado de "en progreso" y puede cambiar el valor del estado en segundo plano para ver los resultados.
Como se puede ver en la figura, la página switch.html muestra contenido diferente a través del valor de estado devuelto por el fondo.
4. Bucle a través
Loop Traversal se usa comúnmente en proyectos diarios y generalmente se usa para representar los datos devueltos desde el fondo a la tabla de front-end. Thymeleaf puede usar la etiqueta th:each para iterar y repetir datos, sintaxis: th:each="obj,iterStat:${objList}", admite listas, mapas, tipos de datos de matriz, etc. El siguiente es un ejemplo simple para demostrar el proceso de recorrido del bucle de datos.
El paso 01 define los datos de backend.
Primero defina una lista de usuarios en el backend y luego pásela a la página del frontend:
@RequestMapping("/list")
public String list(ModelMap map) {
List<User> list = new ArrayList();
User user1 = new User("spring", 12, "123456");
User user2 = new User("boot", 6, "123456");
User user3 = new User("Thymeleaf", 68, "123456");
list.add(user1);
list.add(user2);
list.add(user3);
map.addAttribute("user", list);
return "list";
}
En el código de ejemplo anterior, el fondo devuelve la página list.html y, al mismo tiempo, devuelve los datos de la lista de usuarios del tipo ArrayList.
Paso 02 Crea la portada.
Cree una página list.html en el directorio de plantillas para mostrar datos de fondo. El código de muestra es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example switch</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>each循环遍历</h3>
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>密码</th>
<th>变量: index</th>
<th>变量: count</th>
<th>变量: size</th>
<th>变量: even</th>
<th>变量: odd</th>
<th>变量: first</th>
<th>变量: last</th>
</tr>
<tr th:each="user,stat : ${users}">
<td th:text="${user.name}">name</td>
<td th:text="${user.age}">age</td>
<td th:text="${user.password}">password</td>
<td th:text="${iterStat.index}">index</td>
<td th:text="${iterStat.count}">count</td>
<td th:text="${iterStat.size}">size</td>
<td th:text="${iterStat.even}">even</td>
<td th:text="${iterStat.odd}">odd</td>
<td th:text="${iterStat.first}">first</td>
<td th:text="${iterStat.last}">last</td>
</tr>
</table>
</div>
</body>
</html>
El recorrido del bucle se realiza a través de th:each, sintaxis: th:each="obj,stat:${objList}".
1) ${users}es obtener variables del contexto de la plantilla.
2) el usuario es ${users}cada objeto después del recorrido variable.
3) ${user.name}Las variables en el recorrido se pueden leer.
Durante el recorrido, también puede obtener la variable de estado de iteración stat del objeto iterativo, que contiene los siguientes atributos:
- índice: el índice del objeto de iteración actual (calculado desde 0).
- count: el índice del objeto de iteración actual (calculado a partir de 1).
- tamaño: El tamaño del objeto iterado.
- par/impar: Valor booleano, si el ciclo actual es par/impar (contando desde 0).
- primero: valor booleano, si el bucle actual es el primero.
- último: valor booleano, si el bucle actual es el último.
Paso 03 Ejecuta la verificación.
Inicie el proyecto, ingrese la dirección en el navegador: http://localhost:8080/list, el efecto de visualización de la página es como se muestra en la figura.
Como se puede ver en la figura, los datos de la lista devueltos por el backend se repiten y se muestran en la página, y la etiqueta th:each también proporciona etiquetas como index y count.
5. Operadores
Thymeleaf admite el uso de varias funciones de cálculo de datos, como operaciones aritméticas, operaciones lógicas, operaciones booleanas y operaciones trinoculares en expresiones, de modo que la página principal pueda mostrar dinámicamente la información de la página de acuerdo con los datos devueltos por el fondo. Vamos a demostrar uno por uno a continuación.
5.1 Operadores aritméticos
Los operadores aritméticos incluyen +、-、*、/、%cálculos tan simples.
<th:with="isEven=(${prodStat.count} / 2 == 0)">
En el ejemplo anterior, la paridad está determinada por la operación aritmética de división por 2.
5.2 Operadores relacionales
Los operadores relacionales incluyen >, <, >=, <=, ==, !=, y los alias correspondientes son gt, lt, ge, le, eq, ne. Al usar > y <, debe usar su carácter de escape HTML Por lo tanto, se recomienda utilizar alias como gt y lt:
- gt: grande que (mayor que).
- ge: gran igual (mayor que o igual a).
- eq: igual (igual a).
- lt: menor que (menor que).
- le: menos igual (menor que o igual a).
- ne: no igual (no igual a).
<th:if="${prodStat.count} gt 1">
Use gt para comparar si el valor de count es mayor que 1.
5.3 Operadores lógicos
Los juicios condicionales múltiples se realizan a través de operadores lógicos, incluidos && (y) y || (o).
&& (y) significa "y", el ejemplo es el siguiente:
<div th:if="${age gt 10 && a lt 19}"></div>
o
<div th:if=" (${age gt 10}) and ${age lt 19} "></div>
El ejemplo anterior significa: si edad> 10 y edad <19, date cuenta si la edad está entre 10 y 19 años.
|| o significa "o", los ejemplos son los siguientes:
<div th:if="${age gt 10 || age lt 19}"></div>
o
<div th:if=" (${age gt 10}) or ${age lt 19} "></div>
El ejemplo anterior significa: si edad > 10 o edad < 19, realice el juicio de que la edad es mayor de 10 o menor de 19.
5.4 Operador ternario
La sintaxis del operador ternario es similar a lenguajes como Java, y el uso específico es el siguiente:
<tr th:class="${row.even}? 'even' : 'odd' ">
...
</tr>
En el ejemplo anterior, los datos se representan en la lista frontal para lograr el efecto de visualización entrelazada con colores.