zoukankan      html  css  js  c++  java
  • 第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页面的编写.

  • 相关阅读:
    测试72.思维好题
    pbds:STL平衡树
    测试69。这场因为轻视少了很多分。
    C++ 中的四种类型转换
    C++ 中的static关键字
    codeforces 1269 E K Integers
    P4556 [Vani有约会]雨天的尾巴 (线段树合并)
    P3521 [POI2011]ROT-Tree Rotations (线段树合并)
    codeforces 600E E. Lomsat gelral (线段树合并)
    线段树合并的一些题
  • 原文地址:https://www.cnblogs.com/charlypage/p/9393068.html
Copyright © 2011-2022 走看看