Spring Boot——八、Spring Boot 整合视图层技术

最新推荐文章于 2022-07-20 17:49:32 发布

过期小朋友、

最新推荐文章于 2022-07-20 17:49:32 发布

阅读量215

点赞数 1

分类专栏： springboot学习笔记

本文链接：https://blog.csdn.net/qq_32097903/article/details/115093978

版权

springboot学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在SpringBoot项目中集成并使用JSP、FreeMarker和Thymeleaf三种模板引擎。从添加依赖、创建页面、配置控制器到设置视图解析器，每一步都提供了清晰的操作步骤和注意事项。通过实例展示了在不同模板引擎下创建动态页面的方法，包括变量输出、内置对象使用、条件判断和迭代遍历等。

摘要由CSDN通过智能技术生成

1.整合 jsp
步骤
1）创建springboot项目
2) 增加jsp依赖，jstl依赖，springboot内嵌的tomcat是没有jsp依赖的

<!--添加jsp引擎 springboot内嵌的tomcat没有jsp-->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!--添加jstl坐标依赖-->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

创建webapp目录（与resource同级）在项目结构中Module里面将webapp设置为根目录
创建jsp

<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/3/22
  Time: 19:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
北京尚学堂
</body>
</html>

5）创建控制器（不能直接访问WEB-INF中的资源）

package com.bjsxt.springbootjsp;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class PageController {
    @GetMapping("/{page}")
    public String showPage(@PathVariable String page){
        return page;
    }
}

6）配置视图解析器

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

注意
视图解析器中的前缀最后面的/不能丢，否则会报错404

运行结果
在这里插入图片描述

如果在 IDEA 中项目结构为聚合工程。那么在运行 jsp 是需要指定路径。如果项目结构为独立项目则不需要。

实践：将/去掉

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

运行结果
在这里插入图片描述

2.整合 freemarker
步骤

创建springboot项目
2）pom.xml增加freemarker启动器

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

3）创建实体类Users,创建页面跳转控制器UsersController，创建动态页面userList.ftl

package com.bjsxt.springbootfreemarker.pojo;

public class Users {
    private String username;
    private String usersex;
    private String userage;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUsersex() {
        return usersex;
    }

    public void setUsersex(String usersex) {
        this.usersex = usersex;
    }

    public String getUserage() {
        return userage;
    }

    public void setUserage(String userage) {
        this.userage = userage;
    }

    public Users(String username, String usersex, String userage) {
        this.username = username;
        this.usersex = usersex;
        this.userage = userage;
    }

}

package com.bjsxt.springbootfreemarker.controller;

import com.bjsxt.springbootfreemarker.pojo.Users;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

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

@Controller
public class UsersController {
    @GetMapping("/showUsers")
    public String showUsers(Model model){
        List<Users> list=new ArrayList<>();
        list.add(new Users("admin","F","23"));
        list.add(new Users("waa","M","23"));
        list.add(new Users("wmm","F","23"));
        model.addAttribute("list",list);
        return "userList";
    }
}

<#list list as user>是freemarker中的for循环。list与model中设置的名字一样。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
<table border="1" align="center" width="50%">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Sex</th>
    </tr>
    <#list list as user>
    <tr>
        <td>${user.username}</td>
        <td>${user.usersex}</td>
        <td>${user.userage}</td>
    </tr>
     </#list>
</table>
</body>
</html>

配置freemarker后缀是.ftl

注意
如果没有增加test启动器会编译失败，找不到org.junit…
如果不配置后缀.ftl，会报错404
在这里插入图片描述

运行结果
在这里插入图片描述

3.整合 thymeleaf
步骤
1）创建springboot项目
2) 增加thymeleaf启动器

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

创建控制器，创建html（增加thymeleaf命名空间以及输出字符串到标签内容）

package com.bjsxt.springbootthymeleaf.controller;

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

@Controller
public class PageController {
    @GetMapping("/show")
    public String showPage(Model model){
        model.addAttribute("msg","hello thymeleaf");
        return "index";
    }
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>北京尚学堂首页</title>
</head>
<body>
<span th:text="北京尚学堂"></span>
<hr/>
<span th:text="${msg}"></span>
</body>
</html>

注意
文件仍然是.html文件，只是动态页面增加了thymeleaf命名空间以及输出语法 th:text="",常量或者变量。
变量使用jstl表达式，仍然适用。
运行结果

在这里插入图片描述
附加：
Thymeleaf语法讲解
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <title>Title</title>
</head>
<body>
<hr/>
1. 变量输出<br/>
th:text<br/>
<span th:text="hello"></span>
<span th:text="${msg}"></span>
<hr/>
th:value<br/>
<input th:value="请输入身份证号..."></input><br/>
<hr/>
2. 内置对象<br/>
1) 字符串<br/>
<span th:text="${msg}"></span><br/>
<span th:text="${#strings.isEmpty(null)}"></span><br/>
<span th:text="${#strings.contains(msg,'t')}"></span><br/>
<span th:text="${#strings.startsWith(msg,'H')}"></span><br/>
<span th:text="${#strings.endsWith(msg,'f')}"></span><br/>
<span th:text="${#strings.length(msg)}"></span><br/>
<span th:text="${#strings.indexOf(msg,'H')}"></span><br/>
<span th:text="${#strings.indexOf(msg,'f')}"></span><br/>
<span th:text="${#strings.substring(msg,2)}"></span><br/>
<span th:text="${#strings.substring(msg,2,5)}"></span><br/>
<span th:text="${#strings.toUpperCase(msg)}"></span><br/>
<span th:text="${#strings.toLowerCase(msg)}"></span><br/>
<br/>
2) 日期对象<br/>
<span th:text="${#dates.format(date)}"></span><br/>
<span th:text="${#dates.format(date)}"></span><br/>
<span th:text="${#dates.year(date)}"></span><br/>
<span th:text="${#dates.month(date)}"></span><br/>
<span th:text="${#dates.day(date)}"></span><br/>
<br/>
<hr/>
3 条件判断(满足条件显示信息)<br/>
<span th:if="${sex}=='男'">
    性别：男
</span>
<span th:if="${sex}=='女'">
    性别：女
</span>
<br/>
<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>
    <span th:case="*">ID为*</span>
</div><br/>
<hr/>
4 迭代遍历<br/>
<table border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.age}"></td>
    </tr>
</table>
<br/>
（注意 border是1加table上面）
<table border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>AGE</th>
        <th>KEY</th>
    </tr>
    <tr th:each="m : ${map}">
        <td th:text="${m.value.id}"></td>
        <td th:text="${m.value.name}"></td>
        <td th:text="${m.value.age}"></td>
        <td th:text="${m.key}"></td>
    </tr>
</table>
<hr/>
5 操作域对象<br/>
<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
<span th:text="${#request.getAttribute('req')}"></span><br/>
<span th:text="${#session.getAttribute('ses')}"></span><br/>
<span th:text="${session.ses}"></span>（注意：没有#）<br/>
<span th:text="${application.app}"></span>（没有#）<br/>
<span th:text="${#servletContext.getAttribute('app')}"></span><br/>
<br/>
<hr/>
6 url表达式<br/>
<a th:href="@{http://www.baidu.com}">百度一下</a><br/>
<a th:href="@{/show}">springbootthymeleaf/show</a><br/>
普通url传参方式：<br/>
<a th:href="@{/show2?id=9&name=wmr}">springbootthymeleaf/show2 (?&拼接方式)</a><br/>
<a th:href="@{/show2(id=9,name=wmr)}">springbootthymeleaf/show2 (括號方式)</a><br/>

<a th:href="@{'/show2?id='+${user.id}+'&name='+${user.name}}">springbootthymeleaf/show2 (?&拼接方式,变量)</a><br/>
<a th:href="@{/show2(id=${user.id},name=${user.name})}">springbootthymeleaf/show2 (括號方式)</a><br/>

restful风格url传参方式：<br/>
<a th:href="@{/show3/{id}/{name}(id=${user.id},name=${user.name})}">springbootthymeleaf/show3 (restful方式,变量)</a><br/>
<a th:href="@{/show3/{id}/{name}(id=2,name=www)}">springbootthymeleaf/show3 (restful方式,常数)</a><br/>
</body>
</html>

index2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <title>Title</title>
</head>
<body>
<span th:text="${id}"></span><br>
<span th:text="${name}"></span><br>

</body>
</html>

Users

package com.bjsxt.springbootthymeleaf.pojo;

public class Users {
    private String id;
    private String name;
    private String age;

    public Users(String id, String name, String age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public String getAge() {
        return age;
    }
}

PageController

package com.bjsxt.springbootthymeleaf.controller;

import com.bjsxt.springbootthymeleaf.pojo.Users;
import com.sun.org.apache.regexp.internal.RE;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import javax.servlet.http.HttpServletRequest;
import java.util.*;

@Controller
public class PageController {
    @GetMapping("/show")
    public String showPage(Model model,HttpServletRequest request){
        model.addAttribute("msg","Hello thymeleaf");
        model.addAttribute("date",new Date());
        model.addAttribute("sex","男");
        model.addAttribute("id","1");
        List<Users> list=new ArrayList<>();
        Users wmm = new Users("1", "wmm", "23");
        Users zyb = new Users("2", "zyb", "30");
        Users lhz = new Users("3", "lhz", "20");
        model.addAttribute("list",list);
        list.add(wmm);
        list.add(zyb);
        list.add(lhz);
        Map<String,Users> map=new HashMap<>();
        map.put("user1",wmm);
        map.put("user2",zyb);
        map.put("user3",lhz);
        model.addAttribute("map",map);
        // 设置
        request.setAttribute("req","b");
        request.getSession().setAttribute("ses","HttpSession");
        request.getSession().getServletContext().setAttribute("app","Application");
        model.addAttribute("user",zyb);
        return "index";
    }

    @GetMapping("/show2")
    public String showPage2(String id,String name,Model model){
        System.out.println("id is "+id+" , name is "+name);
        model.addAttribute("id",id);
        model.addAttribute("name",name);
        return "index2";
    }

    @GetMapping("/show3/{id}/{name}")
    public String showPage3(@PathVariable String id,@PathVariable String name, Model model){
        System.out.println("id is "+id+" , name is "+name);
        model.addAttribute("id",id);
        model.addAttribute("name",name);
        return "index2";
    }
}

运行结果
在这里插入图片描述

注意：

内置对象有时候是不加#的，如果加了会报错，比如：
session.ses前面就没有#

restful风格传参数与普通url拼接传参数可以同时使用

过期小朋友、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
Spring Boot——八、Spring Boot 整合视图层技术

1.整合 jsp步骤1）创建springboot项目2) 增加jsp依赖，jstl依赖，springboot内嵌的tomcat是没有jsp依赖的<dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactI
复制链接

扫一扫

专栏目录