Spring Boot 整合视图层

整合Thymeleaf

在 pom.xml 中引入相关依赖

引入 Web 项目及 Thymeleaf 模板相关的依赖项。

实例：

<!-- 引入web项目相关依赖 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- ThymeLeaf依赖 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

想对默认的Thymeleaf 配置参数进行自定义配置，那么可以直接在aplication.properties 中进行配置，部分常见配置如下：

＃是否开启缓存，开发时可设置为false ，默认为true
spring.thymeleaf.cache=true
＃检查模板是否存在，默认为true
spring.thymeleaf.check-template=true
＃检查模板位置是否存在，默认为true
spring.thymeleaf.check-template-location=true
＃模板文件编码
spring.thymeleaf.encoding=UTF-8
＃模板文件位置
spring.thymeleaf.prefix=classpath:/templates/
#Content-Type 配置
spring.thymeleaf.servlet.content-type=text/html
＃模板文件后缀
spring.thymeleaf.suffix=.html

创建控制器方法，指向商品页面

创建控制器类， GoodsController ， Thymeleaf 直接使用 HTML 作为模板页面，故代码如下：

实例：

/**
 * 商品控制器
 */
@Controller // 标注为控制器
public class GoodsController {
	/**
	 * 获取商品列表
	 */
	@RequestMapping("/goods") // 请求路径
	public String goods() {
		return "goods.html";// 跳转到goods.html页面
	}
}

创建商品页面

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
商品列表
</body>
</html>

此时我们启动项目，然后访问 http://127.0.0.1:8080/goods ，即可显示对应页面内容。

在控制器方法中，调用服务方法获取商品信息，并将信息交给模板引擎处理

商品类 GoodsDo ，服务类 GoodsService ，这两个类与上面没有区别直接放出代码。

实例：

/**
 * 商品数据对象
 */
public class GoodsDo {
	/**
	 * 商品名称
	 */
	private String name;
	/**
	 * 商品价格
	 */
	private String price;
	/**
	 * 商品图片
	 */
	private String pic;
  // 省略get set方法
}

实例：

/**
 * 商品服务
 */
@Service // 为GoodsService注册一个组件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("苹果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

好的，此时我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

实例：

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自动装配

	@RequestMapping("/goods") // 请求路径
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交给模板引擎处理的数据
		return "goods.html";// 跳转到goods.html页面
	}
}

在商品页面通过模板引擎规则显示商品信息

此时我们可以根据 Thymeleaf 模板引擎，按模板规则显示商品信息了。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
	<div>商品列表:</div>
	<div th:each="item:${goodsList}">
		<span th:text="${item.name}"></span> 
		<span th:text="${item.price}"></span>
		<span th:text="${item.pic}"></span>
	</div>
</body>
</html>

测试

启动项目，打开浏览器访问 http://127.0.0.1:8080/goods ，即可查看输出结果。

整合FreeMarker

在 pom.xml 中引入相关依赖

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

<!-- 引入web项目相关依赖 -->
<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>

创建控制器方法，指向商品页面

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

实例：

/**
 * 商品控制器
 */
@Controller // 标注为控制器
public class GoodsController {
	/**
	 * 获取商品列表
	 */
	@RequestMapping("/goods") // 请求路径
	public String goods() {
		return "goods";// 跳转到goods.ftl页面
	}
}

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

  • @Controller 注解标注在 GoodsController 类上，会为该类注册一个控制器组件，放入 Spring 容器中。该组件具备处理请求的能力，其中的方法可以响应 HTTP 请求；
  • @RequestMapping ("/goods") 注解标注在方法 goods () 上，所以请求路径如果匹配 /goods ，则由该方法进行处理；
  • 返回值是字符串 "goods" ，由于我们已经引入 FreeMarker 依赖，所以该返回值会跳转到 goods.ftl 页面。
**Tips：** 注意需要在 application.properties 文件中设置模板文件的后缀，即： spring.freemarker.suffix=.ftl 。如果不添加该配置，直接 return "goods.ftl"; 会报错。

创建商品页面

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
商品列表
</body>
</html>

此时我们启动项目，然后访问 http://127.0.0.1:8080/goods ，即可显示对应页面内容。

在控制器方法中，调用服务方法获取商品信息，并将信息交给模板引擎处理

定义商品类 GoodsDo 用来描述商品信息，注意 Do 表示数据模型对象（Data Object），代码如下：

实例：

/**
 * 商品数据对象
 */
public class GoodsDo {
	/**
	 * 商品名称
	 */
	private String name;
	/**
	 * 商品价格
	 */
	private String price;
	/**
	 * 商品图片
	 */
	private String pic;
  // 省略get set方法
}

然后我们编写服务类 GoodsService ，提供获取商品列表的方法。注意此处仅仅是演示模板引擎，并不需要访问数据库，直接返回一个指定内容的商品列表。

/**
 * 商品服务
 */
@Service // 为GoodsService注册一个组件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("苹果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

此时，我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自动装配

	@RequestMapping("/goods") // 请求路径
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交给模板引擎处理的数据
		return "goods";// 跳转到goods.ftl页面
	}
}

注意 model.addAttribute("goodsList", goodsService.getGoodsList()); ，我们将商品列表相关的数据交给模板引擎去处理。

在商品页面通过模板引擎规则显示商品信息

此时我们可以根据 FreeMarker 模板引擎，按模板规则显示商品信息了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
<div>商品列表:</div>
<#list goodsList as item>
${item.name}--${item.price}--${item.pic}
</#list>
</body>
</html>

注意我们通过 FreeMarker 的模板语法，输出了商品列表信息。关于 FreeMarker 模板引擎更多的语法规则，感兴趣的同学可以后续查阅更多资料。

测试

启动项目，打开浏览器访问 http://127.0.0.1:8080/goods ，即可查看输出结果。

JSP

注意 Spring Boot 官方已经不推荐使用 JSP 了，确实操作起来也比较麻烦。但是由于 JSP 用户体量还是比较大的，所以此处还是简单演示下，开发步骤与 FreeMarker / Thymeleaf 基本一致。

2 在 pom.xml 中引入相关依赖

引入 Web 项目及 JSP 模板相关的依赖项。

实例：

<!-- 添加web开发功能 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--内嵌的tomcat支持模块 -->
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>
<!-- 对jstl的支持 -->
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>

3 创建控制器方法，指向商品页面

创建控制器类， GoodsController ，代码如下：

实例：

/**
 * 商品控制器
 */
@Controller // 标注为控制器
public class GoodsController {
	/**
	 * 获取商品列表
	 */
	@RequestMapping("/goods") // 请求路径
	public String goods() {
		return "goods";// 跳转到goods.jsp页面
	}
}

4 创建商品页面—配置视图解析器

手工添加 src/main/webapp 及子目录如下，同时目录下放一个 goods.jsp 用于测试。注意该目录是一个 Source Folder 源代码目录，不是普通文件夹目录。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>商品列表
</body>
</html>

注意，我们还需要添加一个视图解析器，实现 JSP 页面往指定目录跳转。

实例：

@SpringBootApplication
public class SpringBootJspApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpringBootJspApplication.class, args);
	}
	@Bean // 注册视图解析器
	public InternalResourceViewResolver setupViewResolver() {
		InternalResourceViewResolver resolver = new InternalResourceViewResolver();
		resolver.setPrefix("/WEB-INF/jsp/");// 自动添加前缀
		resolver.setSuffix(".jsp");// 自动添加后缀
		return resolver;
	}
}

或者

此时我们启动项目，然后访问 http://127.0.0.1:8080/goods ，即可显示对应页面内容。

5 在控制器方法中，调用服务方法获取商品信息，并将信息交给模板引擎处理

商品类 GoodsDo ，服务类 GoodsService ，这两个类与上面没有区别直接放出代码。

实例：

/**
 * 商品数据对象
 */
public class GoodsDo {
	/**
	 * 商品名称
	 */
	private String name;
	/**
	 * 商品价格
	 */
	private String price;
	/**
	 * 商品图片
	 */
	private String pic;
  // 省略get set方法
}

实例：

/**
 * 商品服务
 */
@Service // 为GoodsService注册一个组件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("苹果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

好的，此时我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

实例：

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自动装配

	@RequestMapping("/goods") // 请求路径
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交给模板引擎处理的数据
		return "goods";// 跳转到goods.jsp
	}
}

6 在商品页面通过模板引擎规则显示商品信息

此时我们可以根据 JSP 模板引擎，按模板规则显示商品信息了。

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
	<div>商品列表:</div>
	<c:forEach var="item" items="${goodsList}">
         ${item.name}--${item.price}--${item.pic}
	</c:forEach>
</body>
</html>

注意我们通过 JSP 的模板语法，输出了商品列表信息。关于 JSP 模板引擎更多的语法规则，感兴趣的同学可以后续查阅更多资料。

7 测试

启动项目，打开浏览器访问 http://127.0.0.1:8080/goods ，即可查看输出结果。

posted @ 2020-08-05 19:35  柒丶月  阅读(1162)  评论(0)  编辑  收藏  举报