本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

【SpringBoot】9--集成页面【jsp(不推荐)、thymeleaf(推荐)】

发布于2020-11-19 20:27     阅读(1076)     评论(0)     点赞(10)     收藏(4)




SpringBoot集成jsp

创建

  • SpringBoot项目勾选Lombok、SpringWeb。

(1)添加jsp需要的依赖servlet ,jstl ,JSP引擎

pom.xml

  <!-- 添加 servlet 依赖. -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>

        <!-- 添加 JSTL(JSP Standard Tag Library,JSP标准标签库) -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <!-- Jasper是tomcat中使用的JSP引擎,运用tomcat-embed-jasper可以将项目与tomcat分开 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>

(2)webapp

在这里插入图片描述
在这里插入图片描述

  • 创建成功
    在这里插入图片描述

(3)配置springmvc的视图解析器

# 类似于SpringMVC的视图解析器
# 前缀
spring.mvc.view.prefix=/WEB-INF/pages/
# 后缀
spring.mvc.view.suffix=.jsp

springboot集成jsp测试

(1)编写Controller

@Controller
public class PersonController {

    @Autowired
    HttpServletRequest request;
    @RequestMapping(path="/test01",method = {RequestMethod.GET})
    public String test01(){
        request.setAttribute("name","巴黎不快乐");
        return "person-list";   //在application.properties里面配置了跳转/Web-INF/pages/person-list.jsp
    }
}

(2)请求转发数据到页面(测试el表达式)

person-list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    获取name:${name}
</body>
</html>

(3)运行要使用spring-boot:run

在这里插入图片描述

SpirngBoot集成thymeleaf

在这里插入图片描述

(1)什么是模板技术?

由模板引擎将数据与模板页面合在一起,形成页面

(2)什么是thymeleaf?

SpringBoot并不推荐使用jsp,但是支持一些模板引擎技术,如:Freemarker,Thymeleaf,Mustache

(3)为什么选择Thymeleaf

可以完全替代jsp

(4)有什么特点

  • 动静结合,直接访问或者通过服务器访问
    浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行
    当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示
  • 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
  • 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

(5)常用标签属性

  • ${}:这个类似与el表达式,但其实是ognl的语法,比el表达式更加强大
  • th-指令:th-是利用了Html5中的自定义属性来实现的。
    如果不支持H5,可以用data-th-来代替
  • th:each:类似于c:foreach 遍历集合,但是语法更加简洁
  • th:text:声明标签中的文本
    例如1,如果user.id有值,会覆盖默认的1
    如果没有值,则会显示td中默认的1。
    这正是thymeleaf能够动静结合的原因,模板解析失败不影响页面的显示效果,因为会显示默认值!

(6)【Thymeleaf表达式

Thymeleaf集成

(1)引入启动器(Thymeleaf、web、Lombok)

在这里插入图片描述

(2)SpringBoot会自动为Thymeleaf注册一个视图解析器:ThymeleafViewResolver

  • 默认前缀:classpath:/templates/
  • 默认后缀:.html
  • 如果我们返回视图:users,会指向到 classpath:/templates/users.html;一般我们无需进行修改,默认即可。

(3)Thymeleaf集成测试

(4)显示列表数据

  • Person
@Data
public class Person {
    private String username;
    private String password;
}
  • PersonController
@Controller
public class PersonController {

    @RequestMapping(path="/test01",method = {RequestMethod.GET})
    public String test01(ModelMap modelMap){ //带数据建议大家使用ModelMap
        //name jack
        modelMap.addAttribute("name","jack");

        //准备三个人的数据放到页面
        List<Person> list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            Person p = new Person();
            p.setUsername("jack"+i);
            p.setPassword("123456");
            list.add(p);
        }
        //添加数据
        modelMap.addAttribute("list",list);
        return "person-list"; //classpath:/template/person-list.html
    }
}

  • person-list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:text="${name}">jack</div>
<table>
    <tr>
        <td>账号</td>
        <td>密码</td>
    </tr>
    <tr th:each="person:${list}">
        <td th:text="${person.username}">jack</td>
        <td th:text="${person.password}">123456</td>
    </tr>
</table>
</body>
</html>

(5)运行

http://localhost:8080/test01
在这里插入图片描述

原文链接:https://blog.csdn.net/qq_41209886/article/details/109743722



所属网站分类: 技术文章 > 博客

作者:长这么胖

链接:http://www.javaheidong.com/blog/article/815/affcf18d338ab4bb4ef4/

来源:java黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)