springboot整合视图层之Thymeleaf

Thymeleaf中有自己的表达式，和自己的语法，可以把数据取出来后再进行判断，遍历等操作，另外它还封装了strings,dates....对象，可以利用这些对象对已有的数据进行简单的逻辑处理；

1.pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <parent>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-parent</artifactId>

    <version>1.5.10.RELEASE</version>

  </parent>

  <groupId>com.mr.li</groupId>

  <artifactId>springboot_005</artifactId>

  <version>0.0.1-SNAPSHOT</version>

  <!-- 修改jdk版本 -->

  <properties>

       <java.version>1.7</java.version>

       <!-- 将thymeleaf的版本升级一下，好处是：不会限制自动生成的html中编码标签结束没有结束符的错误 -->

       <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>

       <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>

  </properties>

  <dependencies>

      <!-- springBoot引入web启动器 -->

          <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <!-- springBoot引入thymeleaf视图模板启动器 -->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

  </dependencies>

</project>

2.启动类

package com.mr.li;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class App {

    public static void main(String[] args) {

        SpringApplication.run(App.class, args);

    }

}

3.MyController:各个方法的演示,方法的返回值都是对应的html名称

package com.mr.li.controller;

import java.util.ArrayList;

import java.util.Date;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.ServletContext;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import com.mr.li.pojo.User;

@Controller

public class MyController {

    /**

     * 使用thymeleaf获取字符串：str是html的名字。

     * 将字符串添加到model属性中，而model对象是springboot封装过的，在这里用于HTML中获取。

     * @param model

     * @return

     */

    @RequestMapping("/strs")

    public String show1(Model model) {

        model.addAttribute("str", "heLLLlo world");

        return "str";

    }

    /**

     * 演示：在html中遍历取出list中的内容

     * @param model

     * @return

     */

    @RequestMapping("/lists")

    public String show2(Model model) {

        List<User> list = new ArrayList<User>();

        list.add(new User(1, "小明", 15));

        list.add(new User(2, "小刚", 16));

        list.add(new User(3, "小丽", 14));

        model.addAttribute("list", list);

        return "list";

    }

    /**

     * 演示map:在html中取出map操作

     * @param model

     * @return

     */

    @RequestMapping("/maps")

    public String show3(Model model) {

        Map<String, User> map = new HashMap<String, User>();

        map.put("user1", new User(1, "张三", 15));

        map.put("user2", new User(2, "李四", 16));

        map.put("user3", new User(3, "王五", 17));

        model.addAttribute("map", map);

        return "map";

    }

    /**

     * 演示使用thymeleaf在html中操作date类型

     * @param model

     * @return

     */

    @RequestMapping("/dates")

    public String show4(Model model) {

        model.addAttribute("date", new Date());

        return "date";

    }

    /**

     * 演示作用域：在html中使用作用域

     * @param request

     * @param model

     * @return

     */

    @RequestMapping("/scopes")

    public String show5(HttpServletRequest request, Model model) {

        request.setAttribute("req", "my is request!!!");

        HttpSession session = request.getSession();

        session.setAttribute("session" , "my is httpsession");

        ServletContext context = request.getSession().getServletContext();

        context.setAttribute("application", "my is application!!!");

        return "scope";

    }

    /**

     * 演示在html判断数据

     * @param model

     * @return

     */

    @RequestMapping("/decides")

    public String show6(Model model) {

        model.addAttribute("id", 2);

        model.addAttribute("sex", "男");

        return "decide";

    }

}

4.实体类，便于生成数据源，方便演示

package com.mr.li.pojo;

public class User {

    private int id;

    private String name;

    private int age;

    public int getId() {

        return id;

    }

    public void setId(int id) {

        this.id = id;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public int getAge() {

        return age;

    }

    public void setAge(int age) {

        this.age = age;

    }

    public User() {

        // TODO Auto-generated constructor stub

    }

    public User(int id, String name, int age) {

        super();

        this.id = id;

        this.name = name;

        this.age = age;

    }

}

5.date.html 演示日期操作

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>使用Thymeleaf演示Date类型</title>

</head>

<body>

    <!-- date值是controller中model对象的属性key名称 -->

    1.自动解析输出当前日期格式，为浏览器默认格式：

    <span th:text="${#dates.format(date)}"></span>

    <hr/>

    2.自定义解析输出当前日期格式yyy/MM/dd:

    <span th:text="${#dates.format(date, 'yyy/MM/dd')}"></span>

    <hr/>

    3.输出当前年：

    <span th:text="${#dates.year(date)}"></span>

    <hr/>

    4.输出当前月：

    <span th:text="${#dates.month(date)}"></span>

    <hr/>

    5.输出当前日：

    <span th:text="${#dates.day(date)}"></span>

    <hr/>

</body>

</html>

访问url: http://localhost:8080/dates

6.decide.html 用Thymeleaf演示判断

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>使用Thymeleaf演示if、switch判断操作</title>

</head>

<body>

    <span th:if = "${sex} == '男'">

        此人性别：男

    </span>

    <span th:if = "${sex} == '女'">

        此人性别：女

    </span>

    <div th:switch="${id}">

        <span th:case="1">此人id为：1</span>

        <span th:case="2">此人id为：2</span>

        <span th:case="3">此人id为：3</span>

    </div>

</body>

</html>

url: http://localhost:8080/decides

7.list.html list处理数据演示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>使用Thymeleaf演示List类型</title>

</head>

<body>

        <table border="1">

        <tr>

            <th>ID</th>

            <th>名称</th>

            <th>年龄</th>

            <th>索引</th>

            <th>计数</th>

            <th>集合大小</th>

            <th>计数是否为偶数</th>

            <th>计数是否为奇数</th>

            <th>当前是否为集合中的第一个元素</th>

            <th>当前是否为集合中最后一个元素</th>

        </tr>

        <!-- u:是当前遍历的对象，var:是Thymeleaf帮我们封装的当前对象 -->

        <tr th:each="u,var : ${list}">

            <td th:text="${u.id}"></td>

            <td th:text="${u.name}"></td>

            <td th:text="${u.age}"></td>

            <td th:text="${var.index}"></td>

            <td th:text="${var.count}"></td>

            <td th:text="${var.size}"></td>

            <td th:text="${var.even}"></td>

            <td th:text="${var.odd}"></td>

            <td th:text="${var.first}"></td>

            <td th:text="${var.last}"></td>

        </tr>

    </table>

</body>

</html>

url ： http://localhost:8080/lists

8.map.html map处理数据演示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>使用Thymeleaf演示Map类型</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>ID</th>

            <th>名称</th>

            <th>年龄</th>

        </tr>

        <!--遍历map方式一 -->

        <!-- <tr th:each="maps : ${map}">

            <td th:each="user : ${maps}" th:text="${user.value.id}"></td>

            <td th:each="user : ${maps}" th:text="${user.value.name}"></td>

            <td th:each="user : ${maps}" th:text="${user.value.age}"></td>

        </tr> -->

        <!-- 遍历map方式二：拿出map然后循环会拿出他的对象，输出每个对象，value为关键字 -->

        <tr th:each="user : ${map}">

            <td th:text="${user.value.id}"></td>

            <td th:text="${user.value.name}"></td>

            <td th:text="${user.value.age}"></td>

        </tr>

    </table>

</body>

</html>

url: http://localhost:8080/maps

9.str.html string类型处理数据演示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>使用Thymeleaf演示String类型</title>

</head>

<body>

    演示输出：

    <span th:text=" ${str}"></span>

    <hr/>

    1.检查此字符串是否为空：

    <span th:text="${#strings.isEmpty(str)}"></span>

    <hr/>

    2.检查此str字符串送是否包含“h”：

    <span th:text="${#strings.contains(str,'h')}"></span>

    <hr/>

    3.检查str中的第一个字符是否为“b”：

    <span th:text="${#strings.startsWith(str,'b')}"></span>

    <hr/>

    4.检查str中最后一个字符是否为“s”：

    <span th:text="${#strings.endsWith(str,'s')}"></span>

    <hr/>

    5.输出str的长度：

    <span th:text="${#strings.length(str)}"></span>

    <hr/>

    6.截取str中某段字符的内容，包头不包尾，若只有一个值则从此值往后直到结束：

    <span th:text="${#strings.substring(str,3,5)}"></span>

    <hr/>

    7.输出此字符“o”的索引值：

    <span th:text="${#strings.indexOf(str,'o')}"></span>

    <hr/>

    8.将str所有字符转为大写：

    <span th:text="${#strings.toUpperCase(str)}"></span>

    <hr/>

    9.将str所有字符转为小写：

    <span th:text="${#strings.toLowerCase(str)}"></span>

    <hr/>

</body>

</html>

url: http://localhost:8080/strs

10.scope.html 作用域演示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>使用Thymeleaf演示Request、HttpSession、Application(ServletContext)作用域类型</title>

</head>

<body>

    <!-- httpServletRequest对象是Thymeleaf提供的，方法也是，都不能错，req是controller中赋值时的key -->

    Request作用域的值获取，赋值在controller中：<span th:text="${#httpServletRequest.getAttribute('req')}"></span>

    <hr/>

    <!-- 第一个session是Thymeleaf提供的，第二个session是controller中赋值的key -->

    Session作用域获取值，赋值在controller中：<span th:text="${session.session}"></span>

    <hr/>

    <!-- 第一个application是Thymeleaf提供的，第二个application是controller中赋值的key -->

    Application作用域获取值，赋值在controller中：<span th:text="${application.application}"></span>

</body>

</html>

url: http://localhost:8080/scopes

项目结构：

关于url:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Thymeleaf-URL</title>

</head>

<body>

    <a th:href="@{http://www.baidu.com}">绝对路径</a><br/>

    <a href="http://www.baidu.com">绝对路径2</a>

    <hr/>

        <!-- 此时回去找名为show的这个controller  -->

    <a th:href="@{/show}">相对路径</a>

    <hr/>

    <a th:href="@{~/project2/resourcename}">相对于服务器的根</a>

    <hr/>

    <a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

    <hr/>

    <a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">相对路径-传参-restful</a>

</body>

</html>

以上就是thymeleaf的简单应用

巴特西

springboot整合视图层之Thymeleaf

最新文章

热门文章