Spring Boot整合视图

最新推荐文章于 2022-09-15 20:14:25 发布

IT小浪

最新推荐文章于 2022-09-15 20:14:25 发布

阅读量173

点赞数

分类专栏： Spring Boot 文章标签： Java JavaEE SpringBoot

本文链接：https://blog.csdn.net/qq_36297434/article/details/102651496

版权

Spring Boot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一：SpringBoot整合jsp

1：新建一个Maven的jar项目

2：修改pom文件

<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>hhxy</groupId>
  <artifactId>08-spring-boot-view-jsp</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <!-- jdk1.8 -->
  <properties>
  	<java.version>1.8</java.version>
  </properties>
  
  <dependencies>
  <!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
	    <!-- jstl -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
	</dependency>
	<!-- jasper -->
	<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
		<scope>provided</scope>
	</dependency>
</dependencies>
</project>

3：创建SpringBoot的全局配置文件application.properties

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

4：创建Controller

/**
* SpringBoot 整合 jsp
*
*
*/
@Controller
public class UserController {
    /*
    * 处理请求，产生数据
    */
    @RequestMapping("/showUser")
    public String showUser(Model model){
        List<Users> list = new ArrayList<>();
        list.add(new Users(1,"张三",20));
        list.add(new Users(2,"李四",22));
        list.add(new Users(3,"王五",24));
        //需要一个 Model 对象
        model.addAttribute("list", list);
        //跳转视图
        return "userList";
    }
}

5：webapp/WEB-INF下创建jsp文件夹，jsp/下创建user.List.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" align="center" width="50%">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<c:forEach items="${list }" var="user">
			<tr>
				<td>${user.userid }</td>
				<td>${user.username }</td>
				<td>${user.userage }</td>	
			</tr>
		</c:forEach>
	</table>
</body>
</html>

6：创建启动类

/**
* SpringBoot 启动类
*
*
*/
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

二：SpringBoot 整合 Freemarker

1：创建Maven的jar项目

2：修改pom文件

<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>hhxy</groupId>
  <artifactId>09-spring-boot-view-freemarker</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
  	<java.version>1.8</java.version>
  </properties>
  
  <dependencies>
  <!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
   <!-- freemarker启动器的坐标 -->
   <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>
</dependencies>
</project>

3：编写视图userList.ftl

注意：springBoot 要求模板形式的视图层技术的文件必须要放到 src/main/resources/ templates目录下

<html>
	<head>
		<title>展示用户数据</title>
		<meta charset="utf-9"></meta>
	</head>
	
	<body>
		
		<table border="1" align="center" width="50%">
			
			<tr>
				
				<th>ID</th>
				<th>Name</th>
				<th>Age</th>
			</tr>
			
			<#list list as user >
				<tr>
					<td>${user.userid}</td>
					<td>${user.username}</td>
					<td>${user.userage}</td>
				</tr>
			</#list>	
		</table>
	</body>
</html>

4：创建Controller

@Controller
public class UserController {
	/*
	 * 处理请求，产生数据
	 */
	@RequestMapping("/showUser")
	public String showUser(Model model){
		List<Users> list = new ArrayList<>();
		list.add(new Users(1,"张三",20));
		list.add(new Users(2,"李四",22));
		list.add(new Users(3,"王五",24));
		
		//需要一个Model对象
		model.addAttribute("list", list);
		//跳转视图
		return "userList";
	}
}

三：SpringBoot 整合 Thymeleaf

1：创建Thymeleaf入门项目

1.1：创建一个Maven的jar项目

1.2：修改pom文件

<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>hhxy</groupId>
  <artifactId>10-spring-boot-view-thymeleaf</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
    <java.version>1.8</java.version>
    <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
  </properties>
  
  <dependencies>
  	<!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  </dependencies>
</project>

1.3：创建存放视图的目录

目录位置：src/main/resources/templates
templates：该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。

2：Thymeleaf 的基本使用

2.1：Thymeleaf 特点

Thymelaef 是通过他特定语法对 html 的标记做渲染。

2.2：编写Controller

/**
* Thymeleaf 入门案例
*
*
*/
@Controller
public class DemoController {
    @RequestMapping("/show")
    public String showInfo(Model model){
        model.addAttribute("msg", "Thymeleaf 第一个案例");
        return "index";
    }
}

2.3：创建视图 index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Thymeleaf 入门</title>
</head>
<body>
    <span th:text="Hello"></span>
    <hr/>
    <span th:text="${msg}"></span>
</body>
</html>

2.3：编写启动类

/**
*
*Thymeleaf 入门案例
*
*/
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

3：Thymeleaf 语法详解

3.1 变量输出与字符串操作

3.1.1：th:text：在页面中输出值

3.1.2：th:value：可以将一个值放入到 input 标签的 value 中

3.1.3 ：字符串方法

Thymeleaf 内置对象

注意语法：调用内置对象一定要用#，大部分的内置对象都以 s 结尾 strings、numbers、dates

${#strings.isEmpty(key)}
判断字符串是否为空，如果为空返回 true，否则返回 false
${#strings.contains(msg,'T')}
判断字符串是否包含指定的子串，如果包含返回 true，否则返回 false
${#strings.startsWith(msg,'a')}
判断当前字符串是否以子串开头，如果是返回 true，否则返回 false
${#strings.endsWith(msg,'a')}
判断当前字符串是否以子串结尾，如果是返回 true，否则返回 false
${#strings.length(msg)}
返回字符串的长度
${#strings.indexOf(msg,'h')}
查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,13)}
${#strings.substring(msg,13,15)}
截取子串，用户与 jdk String 类下 SubString 方法相同
${#strings.toUpperCase(msg)}
${#strings.toLowerCase(msg)}
字符串转大小写。

3.2 ：日期格式化处理

${#dates.format(key)} 格式化日期，默认的以浏览器默认语言为格式化标准
${#dates.format(key,'yyy/MM/dd')} 按照自定义的格式做日期转换
${#dates.year(key)}  取年
${#dates.month(key)}  取月
${#dates.day(key)}   取日

3.3：条件判断

3.3.1：th:if

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

3.3.2：th:switch

<div th:switch="${id}">
    <span th:case="1">ID 为 1</span>
    <span th:case="2">ID 为 2</span>
<span

3.4：迭代遍历

3.4.1：th:each

@RequestMapping("/show3")
public String showInfo3(Model model){
    List<Users> list = new ArrayList<>();
    list.add(new Users(1,"张三",20));
    list.add(new Users(2,"李四",22));
    list.add(new Users(3,"王五",24));
    model.addAttribute("list", list);
    return "index3";
}

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
    </tr>
</table>

3.4.2：th:each状态变量

@RequestMapping("/show3")
public String showInfo3(Model model){
    List<Users> list = new ArrayList<>();
    list.add(new Users(1,"张三",20));
    list.add(new Users(2,"李四",22));
    list.add(new Users(3,"王五",24));
    model.addAttribute("list", list);
    return "index3";
}

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Index</th>
        <th>Count</th>
        <th>Size</th>
        <th>Even</th>
        <th>Odd</th>
        <th>First</th>
        <th>lase</th>
    </tr>
    <tr th:each="u,var : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></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>

状态变量属性
index:当前迭代器的索引从 0 开始
count:当前迭代对象的计数从 1 开始
size:被迭代对象的长度
even/odd:布尔值，当前循环是否是偶数/奇数从 0 开始
first:布尔值，当前循环的是否是第一条，如果是返回 true 否则返回 false
last:布尔值，当前循环的是否是最后一条，如果是则返回 true 否则返回 false

3.4.3：th:each 迭代 Map

@RequestMapping("/show4")
public String showInfo4(Model model){
    Map<String, Users> map = new HashMap<>();
    map.put("u1", new Users(1,"张三",20));
    map.put("u2", new Users(2,"李四",22));
    map.put("u3", new Users(3,"王五",24));
    model.addAttribute("map", map);
    return "index4";
}

<body>
	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="maps : ${map}">
			<td th:text="${maps}"></td>
		</tr>
	</table>
	<th/>
	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="maps : ${map}">
			<td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
			<td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
			<td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
		</tr>
	</table>
</body>

3.5：域对象操作

3.5.1：HttpServletRequest

request.setAttribute("req", "HttpServletRequest");

Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span>

3.5.2：HttpSession

request.getSession().setAttribute("sess", "HttpSession");

Session:<span th:text="${session.sess}"></span>

3.5.3：ServletContext

request.getSession().getServletContext().setAttribute("app","Application");

Application:<span th:text="${application.app}"></span>

3.6：URL 表达式

th:href

th:src

3.6.1：URL表达式语法

基本语法：@{}

3.6.2：URL类型

3.6.2.1：绝对路径

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

3.6.2.2：相对路径

相对于当前项目的根，相对于项目的上下文的相对路径：

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

相对于服务器路径的根：

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

3.6.3：在 url 中实现参数传递

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

3.6.4 ：在 url 中通过 restful风格进行参数传递

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

IT小浪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot整合视图

一：SpringBoot整合jsp1：新建一个Maven的jar项目2：修改pom文件<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.or...
复制链接

扫一扫