目录

  • 1 概述
  • 2 集成JSP
  • 2.1 创建maven项目
  • 2.2 修改jdk版本
  • 2.3 添加Spring Boot启动器及jsp相关依赖
  • 2.4 创建Spring Boot配置文件
  • 2.5 创建Controller
  • 2.6 创建jsp页面
  • 2.7 创建启动类
  • 2.8 运行结果
  • 3 集成Freemarker
  • 3.1 创建maven项目
  • 3.2 添加Spring Boot启动器和Freemarker依赖
  • 3.3 创建视图
  • 3.4 创建Controller
  • 3.5 创建启动类
  • 3.6 运行结果
  • 4 集成Thymeleaf
  • 4.1 创建maven项目
  • 4.2 添加Spring Boot启动器及Thymeleaf依赖
  • 4.3 创建Controller
  • 4.4 创建视图
  • 4.5 运行结果及注意事项
  • 4.6 常用基本语法介绍
  • 4.7 条件判断
  • 4.7.1 th:if
  • 4.7.2 th:switch
  • 4.8 迭代遍历
  • 4.8.1 th:each迭代List
  • 4.8.2 th:each 状态变量
  • 4.8.3 th:each迭代Map
  • 4.9 域对象操作
  • 4.9.1 HttpServletRequest对象
  • 4.9.2 HttpSession对象
  • 4.9.3 Application对象
  • 4.10 URL表达式
  • 4.10.1 语法
  • 4.10.2 URL类型
  • 4.10.2.1 绝对路径
  • 4.10.2.2 相对路径
  • 4.10.3 在url中传递参数


1 概述

本章节主要讲述如何使用Spring Boot集成jsp、freemarker、thymeleaf视图层技术，并着重介绍thymeleaf相关语法

2 集成JSP

2.1 创建maven项目

spring boot 制作gui界面 spring boot view_html


spring boot 制作gui界面 spring boot view_迭代_02

2.2 修改jdk版本

SpringBoot 2.0以后的版本使用的是jdk 1.8.

SpringBoot 2.0 以前的版本使用jdk1.7

可以通过修改pom文件来修改jdk版本

spring boot 制作gui界面 spring boot view_spring_03

2.3 添加Spring Boot启动器及jsp相关依赖

spring boot 制作gui界面 spring boot view_html_04

2.4 创建Spring Boot配置文件

spring boot 制作gui界面 spring boot view_迭代_05

2.5 创建Controller

package com.liulg.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.liulg.pojo.Info;

@Controller
public class InfoController {
	@RequestMapping("show")
	public String showInfo(Model model){
		List<Info> list = new ArrayList<>();
		list.add(new Info(1,"abc","a'"));
		list.add(new Info(2,"def","d'"));
		list.add(new Info(3,"ghi","g'"));
		model.addAttribute("list", list);
		return "showList";
	}
}

2.6 创建jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<table>
		<c:forEach items="${list }" var ="info">
			<tr><td>${info.id}</td><td>${info.name}</td><td>${info.type}</td></tr>
		</c:forEach>
	</table>
</body>
</html>

2.7 创建启动类

package com.liulg;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}
}

2.8 运行结果

spring boot 制作gui界面 spring boot view_spring_06

3 集成Freemarker

3.1 创建maven项目

spring boot 制作gui界面 spring boot view_迭代_07

3.2 添加Spring Boot启动器和Freemarker依赖

spring boot 制作gui界面 spring boot view_迭代_08

3.3 创建视图

注意：Spring Boot规定模板形式的视图层文件必须放到src/main/resources/templates文件夹下，templates文件夹为手动创建，不能该更文件夹名称。

freemarker模板文件的后缀名为.ftl

<html>
	<head>
		<title>展示数据</title>
		<meta charset="utf-8"></meta>
	</head>
	<body>
		<table>
			<#list list as info>
				<tr><td>${info.id}</td><td>${info.name}</td><td>${info.type}</td></tr>
			</#list>
		</table>
	</body>
</html>

3.4 创建Controller

package com.liulg.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.liulg.pojo.Info;

@Controller
public class InfoController {
	@RequestMapping("show")
	public String showInfo(Model model){
		List<Info> list = new ArrayList<>();
		list.add(new Info(1,"第一","一"));
		list.add(new Info(2,"第二","二"));
		list.add(new Info(3,"第三","三"));
		model.addAttribute("list", list);
		return "showList";
	}
}

3.5 创建启动类

package com.liulg;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}

}

3.6 运行结果

spring boot 制作gui界面 spring boot view_spring_09

4 集成Thymeleaf

4.1 创建maven项目

spring boot 制作gui界面 spring boot view_spring boot 制作gui界面_10

4.2 添加Spring Boot启动器及Thymeleaf依赖

spring boot 制作gui界面 spring boot view_spring_11

4.3 创建Controller

package com.liulg.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
	@RequestMapping("show")
	public String showInfo(Model model){
		model.addAttribute("msg","Hello World");
		return "index";
	}
}

4.4 创建视图

创建src/main/resources/templates文件夹。
注意：该目录是安全的，该目录下的内容不允许直接访问。因为该目录下的模板文件必须经过数据渲染后才能展示。

Thymeleaf是通过特定语法对html的标记做渲染，所以thymeleaf文件的后缀名称是html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf</title>
</head>
<body>
	<span th:text="${msg}"></span>
</body>
</html>

4.5 运行结果及注意事项

在本地运行时，能够进入到Controller，但是一直无法跳转到页面，显示404错误，后来在另一台机子上，清除本地maven库之后，重新运行，就可以正常跳转了。根据网上的资料显示，SpringBoot 1.x没有这个问题，这个问题是SpringBoot2.x内部集成Thymeleaf导致的，解决办法就是清除本地maven库。

4.6 常用基本语法介绍

  • th:text 在页面中输出值
  • th:value 将值赋值给input标签的value属性
  • ${#strings.isEmpty(key)} 判断字符串是否为空，为空返回true，否则返回fasle
  • ${#strings.contains(str,’T’)} 判断字符串是否包含指定子串，包含返回true，否则返回false
  • ${#strings.startWith(str,’T’)} 判断字符串是否以子串开头
  • ${#strings.endWith(str,’T’)} 判断字符串是否以子串结尾
  • ${#strings.length(str)} 返回字符串长度
  • ${#strings.indexOf(str,’T’)} 查找子串的位置，并返回子串的下标，如果没有找到返回-1
  • ${#strings.subString(str,start)} 从下标13开始截取字符串
  • ${#strings.subString(str,start,end)} 从下标13开始截取到下标15之前，包含13不包含15.
  • ${#strings.toUpperCase(str)} 将字符串转成大写
  • ${#strings.toLoweCase(str)} 将字符串转成小写
  • ${#dates.format(key)} 格式化日期，以浏览器默认语言为格式标准
  • ${#dates.format(key,’yyyy/MM/dd’)} 按照给定的格式格式化日期
  • ${#dates.year(key)} 取年
  • ${#dates.month(key)} 取月
  • ${#dates.day(key)} 取日

4.7 条件判断

4.7.1 th:if

<span th:if="${sex}=='男'">
		性别：男
	</span>
	<span th:if="${sex}=='女'">
		性别：女
	</span>

4.7.2 th:switch

<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>

4.8 迭代遍历

4.8.1 th:each迭代List

package com.liulg.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.liulg.pojo.Info;

@Controller
public class UserController {
	@RequestMapping("show")
	public String showInfo(Model model){
		List<Info> list = new ArrayList<>();
		list.add(new Info(1,"第一","一"));
		list.add(new Info(2,"第二","二"));
		list.add(new Info(3,"第三","三"));
		model.addAttribute("list", list);
		return "showList";
	}
}
<table>
	<tr th:each="info : ${list}">
		<td th:text="${info.id}"></td>
		<td th:text="${info.name}"></td>
		<td th:text="${info.type}"></td>
	</tr>
</table>

4.8.2 th:each 状态变量

<table>
	<tr th:each="info ,var : ${list}">
		<td th:text="${info.id}"></td>
		<td th:text="${info.name}"></td>
		<td th:text="${info.type}"></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>
  1. index：当前迭代器的索引
  2. count：当前迭代对象的计数，从1开始
  3. size：被迭代对象的长度
  4. even/odd：布尔值，当前循环是奇数还是偶数，从0开始
  5. first：当前循环是否是第一条。如果是返回true，否则返回false
  6. last：当前循环是否是最后一条。如果是返回true，否则返回false

4.8.3 th:each迭代Map

@RequestMapping("show")
	public String showInfo(Model model){
		Map<String,Info> map= new HashMap<String,Info>();
		map.put("i1",new Info(1,"第一","一"));
		map.put("i2",new Info(2,"第二","二"));
		map.put("i3",new Info(3,"第三","三"));
		model.addAttribute("list", map);
		return "showList";
	}
<table>
	<tr th:each="maps :${map}">
		<td th:each="entry:${maps}" th:text="${entry.value.id}">
		<td th:each="entry:${maps}" th:text="${entry.value.name}">
		<td th:each="entry:${maps}" th:text="${entry.value.id}">
	</tr>
</table>

4.9 域对象操作

4.9.1 HttpServletRequest对象

request.setAttribute("req", "HttpServletRequest");
<span th:text="${#httpServletRequest.getAttribute('req')}"></span>

4.9.2 HttpSession对象

request.getSession().setAttribute("sess", "HttpSession");
<span th:text="${session.sess}"></span>

4.9.3 Application对象

request.getSession().getServletContext().setAttribute("app", "Application");
<span th:text="${application.app}"></span>

4.10 URL表达式

  • th:href
  • th:src

4.10.1 语法

基本语法：@{}

4.10.2 URL类型

4.10.2.1 绝对路径
<a th:href="@{http://www.baidu.com}">绝对路径</a>
4.10.2.2 相对路径
  • 相对于当前项目的根
<a th:href="@{/show}">相对路径</a>
  • 相对于服务器的根
<a th:href="@{~/project2/resourcename}">相对路径</a>

4.10.3 在url中传递参数

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