专栏首页Spring相关第6章—渲染web视图—使用Thymeleaf

第6章—渲染web视图—使用Thymeleaf

使用Thymeleaf

长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原始HTML的地方进行编辑和渲染.因为它没有与Servelet规范耦合,因此Thymeleaf模板能进入jsp所无法涉足的领域.现在我们来看下如何使用Thymeleaf!

1.引入pom依赖:

<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf-spring4</artifactId>
      <version>3.0.9.RELEASE</version>
    </dependency>

2.配置thymeleaf的视图解析器

在原有的SpringMVC的基础上修改我们的application.xml文件,如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans
    xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:p="http://www.springframework.org/schema/p"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
    http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
    http://www.springframework.org/schema/mvc 
    http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd 
    http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context-4.3.xsd">
        <!-- 开启注解. 扫描 -->
    <context:annotation-config></context:annotation-config>
    <context:component-scan base-package="controller"></context:component-scan>
        
    <!-- 过滤掉js, jpg, png, css, 静态文件 -->
    <mvc:default-servlet-handler/>

    <!-- 开启mvc -->
    <mvc:annotation-driven />
        
    <!-- 地址解析器  -->
    <!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
        <!--<property name="prefix" value="/WEB-INF/views/"></property>-->
        <!--<property name="suffix" value=".jsp"></property>-->
    <!--</bean>-->


    <!--viewResolver-->
    <bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="order" value="1"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine" ref="templateEngine"/>
    </bean>
    <!-- templateEngine -->
    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver"/>
    </bean>
    <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/WEB-INF/templates/"/>
        <property name="suffix" value=".html"/>
        <property name="templateMode" value="HTML5"/>
    </bean>
</beans>

主要修改跳转的路劲和Thymeleaf相关的配置类

3.在WEB-INF下面建一个templates文件件,放入几个HTML

shouye.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>this is Thymeleaf</h2><br/><br/>

<a th:href="@{/thym/login}">go login</a><br/><br/>
<a th:href="@{/thym/register}">go register</a>

</body>
</html>

login.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

login page
</body>
</html>

register.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
register page
</body>
</html>

4.编辑Controller层的类文件

ThymController:

package controller;
import org.springframework.beans.factory.annotation.Configurable;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/thym")
public class ThymController {

    @RequestMapping("/index")
    public  String index(){
        return "shouye";
    }

    @RequestMapping("/login")
    public  String login(){
        return "login";
    }

    @RequestMapping("register")
    public String register(){
        return "register";
    }
}

5.启动项目:路径:http://localhost:8080/thym/index

显示的页面如下:

image

我们可以点击链接文字进行相应的跳转,此时已经完成了一个Thymeleaf页面的编写.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringMVC+Thymeleaf 处理表单提交

    thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明:

    Dream城堡
  • Tomcat,eclipse热部署的三种方式

    热部署是指在你修改项目BUG的时候对JSP或JAVA类进行了修改在不重启WEB服务器前提下能让修改生效。但是对配置文件的修改除外!

    ydymz
  • Nginx+Tomcat实现负载均衡

    在103和117上分别部署相同的Tomcat程序,修改index.jsp页面,把内容改为各自的IP地址。

    会跳舞的机器人
  • 第8章—使用Spring Web Flow—Spring Web Flow的配置

    Spring Web Flow 是 Spring 的一个子项目,其最主要的目的是解决跨越多个请求的、用户与服务器之间的、有状态交互问题,比较适合任何比较复杂的、...

    Dream城堡
  • nginx 配置目录转发

    server { listen 80; autoindex off; server_name image.imooc.com; ...

    Dar_Alpha
  • jsp 自定义标签解决jsp页面中int时间戳的时间格式化问题

    之前在项目中根据需求,需要自定义标签,经过查询w3c文档,自己也踩了一些坑,特此记录自定义标签的步骤,下面就以我之前的一个例子中的定义一个时间转换标签为例:gi...

    lin_zone
  • SpringBoot项目中加入jsp页面

    根据我们之前搭建好的SpringBoot+SSm的项目的基础上,来增加webapp/WEB-INF的文件,由此来完成jsp页面的跳转.

    Dream城堡
  • Springboot用官方建议访问Html页面并接传值

    我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

    Dream城堡
  • SpringMVC乱码或前台乱码解决办法

    以及 form表单提交方式为必须为post 修改web.xml,增加编码过滤器,如下(注意,需要设置forceEncoding参数值为true)

    試毅-思伟

扫码关注云+社区

领取腾讯云代金券