spring-boot学习第二天+整合jsp+整合thymeleaf

深藏阁楼爱情的钟 2024-02-19 21:50 21阅读 0赞

**今天spring-boot整合视图层技术**  
一：因为以前jsp用的多，就简单的整合下jsp  
1.新建maven项目，导入maven依赖

<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>cn.zds</groupId>
      <artifactId>08-spring-boot-view-jsp</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      
      
      <properties>
      	<java.version>1.7</java.version>
      </properties>
      
      <dependencies>
      
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    	    
    	<dependency>
    		<groupId>javax.servlet</groupId>
    		<artifactId>jstl</artifactId>
    	</dependency>
    	
    	<dependency>
    		<groupId>org.apache.tomcat.embed</groupId>
    		<artifactId>tomcat-embed-jasper</artifactId>
    		<scope>provided</scope>
    	</dependency>
    </dependencies>
    </project>

2.新建pojo实体类

package cn.zds.pojo;
    
    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();
    		// TODO Auto-generated constructor stub
    	}
    	
    }

3.新建controller

package cn.zds.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 cn.zds.pojo.Users;
    
    /**
     * 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";
    	}
    }

4.新建jsp(新建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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70]  
5.配置全局配置文件（位置存放在src/main/resources下）application.proterties

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

二：thymeleaf  
1.新建maven项目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.22.RELEASE</version>
         </parent>
        
      <groupId>cn.zds</groupId>
      <artifactId>07-spring-boot-thymeleaf</artifactId>
      <version>0.0.1-SNAPSHOT</version>
    	
      
      <properties>
      	<java.version>1.7</java.version>
      </properties>
      
      <dependencies>
      
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    	
    </dependencies>
    </project>

2.在src/main/resources目录下新建templates  
**说明：这文件夹里面的一切内容认为是安全的，外界不能通过浏览器直接访问这个文件里的内容**（昨天讲过static文件夹里面存放的静态文件外界可直接访问）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70 1]  
**3.thymeleaf的特点：它是对其他htm做标记渲染（html被标记了的标签会被渲染）**  
4.编写controller

package cn.zds.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class DemoController {
    	
    	@RequestMapping("/demoThymeleaf")
    	public String getDemo(Model model){
    		model.addAttribute("msg", "我的第一个thymeleaf");
    		return "index";
    	}
    }

5.创建视图

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70 2]

6.创建启动类

package cn.zds.controller;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    /**
     * SpringBoot启动类
     *
     *
     */
    @SpringBootApplication
    public class App {
    
    	public static void main(String[] args) {
    		SpringApplication.run(App.class, args);
    	}
    }

7.运行会报错，这是因为版本原因，thymeleaf旧版本对html非常严格，**解决方法：  
在pom.xml中指定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>cn.zds</groupId>
      <artifactId>07-spring-boot-thymeleaf</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.1.1</thymeleaf-layout-dialect.version>
      </properties>
      
      <dependencies>
      
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    	
    </dependencies>
    </project>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c5e20f82193b4e678ac6aca36d2fbea2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5346beb1c66a42a68b08997021e45513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDExNTY1_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7c485dcc1028480eab8dfea99497273a.png