您的位置: 首页  >  文章  >  SpringBoot整合视图层

SpringBoot整合视图层

分类: 文章 • 2023-03-19 13:12:38

目录

 

一.SpringBoot整合JSP

二.SpringBoot整合FreeMarker

三.SpringBoot整合ThymeLeaf

一.SpringBoot整合JSP

①创建工程设置配置文件

<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.bjsxt</groupId>
  <artifactId>08-spring-boot-view-jsp</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <!-- jdk1.7 -->
  <properties>
  	<java.version>1.7</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——SpringBoot对JSP的处理引擎 -->
	<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
		<scope>provided</scope>
	</dependency>
</dependencies>
</project>

②创建 springBoot 的全局配置文件 application.properties

SpringBoot整合视图层

设置视图的前缀和后缀：

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

③创建 实体和Controller

public class Users {
	private Integer userid;
	private String username;
	private Integer userage;
	public Integer getUserid() {
		return userid;
	}
	public void setUserid(Integer userid) {
		this.userid = userid;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public Integer getUserage() {
		return userage;
	}
	public void setUserage(Integer userage) {
		this.userage = userage;
	}
	public Users(Integer userid, String username, Integer userage) {
		super();
		this.userid = userid;
		this.username = username;
		this.userage = userage;
	}
	public Users() {
		super();
	}
	
}
/**
 * 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";
	}
}

④创建 jsp

SpringBoot整合视图层

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

⑤创建启动类

/**
 * SpringBoot启动类
 *
 *
 */
@SpringBootApplication
public class App {

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

运行测试：http://localhost:8080/showUser

SpringBoot整合视图层

二.SpringBoot整合FreeMarker

①创建项目配置文件

<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.bjsxt</groupId>
  <artifactId>09-spring-boot-view-freemarker</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
  	<java.version>1.7</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>

②编写视图

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

SpringBoot整合视图层

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

③创建User和Controller 同上（SpringBoot整合JSP）

④创建启动器 同上

运行测试结果同上

三.SpringBoot整合ThymeLeaf

①环境搭建

<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.bjsxt</groupId>
  <artifactId>11-spring-boot-view-thymeleaf-RUL</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
  <java.version>1.7</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>
    <!-- thymeleaf的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  </dependencies>
</project>

②创建存放视图的目录

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

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

③编写Controller

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

④创建视图

SpringBoot整合视图层

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

⑤创建启动类 同上

运行测试：http://localhost:8080/show

SpringBoot整合视图层

⑥解决异常

SpringBoot整合视图层

方式一：

严格遵守html语法

 SpringBoot整合视图层

方式二：

修改pom文件，设置Thymeleaf.jar:更新为 3.0 以上的版本，thymeleaf-layout-dialect.jar：更新为 2.0 以上的版本

  <properties>
	  <java.version>1.7</java.version>
	  <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
	  <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
  </properties>

重新运行结果：

SpringBoot整合视图层

 

相关推荐