SpringBoot 模板

最新推荐文章于 2022-11-02 01:32:28 发布

一只媛球球

最新推荐文章于 2022-11-02 01:32:28 发布

阅读量201

点赞数 3

分类专栏： spring 文章标签： SpringBoot 模板 thymeleaf Freemarker

本文链接：https://blog.csdn.net/qq_44641053/article/details/102979895

版权

spring 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了SpringBoot中Thymeleaf和Freemarker两种模板引擎的使用。针对Thymeleaf，讲解了其优点、相关依赖配置、HTML页面的标签库导入以及后台和前端的代码示例。对于Freemarker，提到了学习资源、配置、后台及前端代码，并强调了模板存放路径、全局变量的注意事项。同时，对比了Thymeleaf中替代jsp:include的方法。

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

本章知识点：

1、thymeleaf 模板
2、Freemarker 模板

Thymeleaf模板

Thymeleaf的优点，就是html页面。

废话不多说，直接上代码演示。

相关pom依赖

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

Spring Boot 官方文档建议在开发时将缓存关闭，那就在application.yml 文件中加入下面这行

			spring.thymeleaf.cache=false

在html页面导入标签提示库

		<!--  导入标签提示库  -->
		<html xmlns:th="http://www.thymeleaf.org">

注意：正式环境还是要将缓存开启！！！

后台代码

User.java

	package com.dj.springboottest.entity;
	
	import lombok.Data;
	
	/**
	 * @author dj
	 * @company xxx公司
	 * @create 2019- 11 - 08 - 20:58
	 */
	@Data
	public class User {
	    private String uid;
	    private String uname;
	
	    public User(String uid, String uname) {
	        this.uid = uid;
	        this.uname = uname;
	    }
	}

ThymeleafController.java

	package com.dj.springboottest.controller;
	import com.dj.springboottest.entity.User;
	
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.servlet.ModelAndView;
	
	import java.util.ArrayList;
	import java.util.List;
	
	/**
	 * @author dj
	 * @company xxx公司
	 * @create 2019- 11 - 08 - 20:43
	 */
	@Controller
	@RequestMapping("/thymeleaf")
	public class ThymeleafController {
	
	    @RequestMapping("/list")
	    public ModelAndView list(){
	        ModelAndView mv = new ModelAndView();
	        List list = new ArrayList();
	        list.add(new User("1","羡羡"));
	        list.add(new User("2","含光君"));
	        list.add(new User("3","花城"));
	        list.add(new User("4","战战"));
	
	        mv.addObject("userList",list);
	        mv.addObject("msg","<span style='color:red;'>天官赐福上线了</span>");
	        mv.addObject("name","血雨探花");
	        mv.setViewName("list");
	        return mv;
	    }
	
	}

前台HTML页面

list.html

	<!DOCTYPE html>
	<!--  导入标签提示库  -->
	<html xmlns:th="http://www.thymeleaf.org">
	<head>
	    <meta charset="UTF-8">
	    <title>thymeleaf 页面</title>
	</head>
	<body>
	<h1>thymeleaf 页面</h1>
	<h2>显示文本</h2>
	<span th:text="${name}"></span>
	
	<h2>显示html</h2>
	<div th:utext="${msg}"></div>
	
	<h2>循环</h2>
	<table>
	    <tr>
	        <td>用户id</td>
	        <td>用户名</td>
	    </tr>
	    <tr th:each="u : ${userList}">
	        <td th:text="${u.uid}"></td>
	        <td th:text="${u.uname}"></td>
	    </tr>
	</table>

	</body>
	</html>

浏览器访问结果
在这里插入图片描述

Freemarker模板

学习网站： http://freemarker.foofun.cn/

导入pom依赖

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

		<!--可以不加，但是做项目的时候可能会用-->
		 <resources>
		            <!--解决mybatis-generator-maven-plugin运行时没有将XxxMapper.xml文件放入target文件夹的问题-->
		            <resource>
		                <directory>src/main/java</directory>
		                <includes>
		                    <include>**/*.xml</include>
		                </includes>
		            </resource>
		            <!--freemarker模板也读取需要注释标红地方-->
		            <resource>
		                <directory>src/main/resources</directory>
		                <includes>
		                    <!--<include>*.properties</include>-->
		                    <!--<include>*.xml</include>-->
		                    <!--<include>*.yml</include>-->
		                </includes>
		            </resource>
		        </resources>

application.yml文件的默认配置

	server:
	  port: 80
	  servlet:
	    context-path: /sss
	 
	  freemarker:
	    # 设置模板后缀名
	    suffix: .ftl
	    # 设置文档类型
	    content-type: text/html
	    # 设置页面编码格式
	    charset: UTF-8
	    # 设置页面缓存
	    cache: false
	    # 设置ftl文件路径，默认是/templates，为演示效果添加role
	    template-loader-path: classpath:/templates/role
	  mvc:
	    static-path-pattern: /static/**

后台代码：

Role.java

	package com.dj.springboottest.entity;
	
	import lombok.Data;
	
	/**
	 * @author dj
	 * @company xxx公司
	 * @create 2019- 11 - 09 - 11:48
	 */
	@Data
	public class Role {
	    private String rid;
	    private String rname;
	
	    public Role(String rid, String rname) {
	        this.rid = rid;
	        this.rname = rname;
	    }
	
	    public Role() {
	    }
	}

FreemarkerController.java

	package com.dj.springboottest.controller;
	
	import com.dj.springboottest.entity.Role;
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.servlet.ModelAndView;
	
	import java.util.ArrayList;
	import java.util.List;
	
	/**
	 * @author dj
	 * @company xxx公司
	 * @create 2019- 11 - 09 - 11:12
	 */
	
	@Controller
	@RequestMapping("/freemarker")
	public class FreemarkerController {
	
	    @RequestMapping("/list")
	    public ModelAndView list(){
	        ModelAndView mv = new ModelAndView();
	
	        mv.addObject("loginName","天官赐福");
	        List list = new ArrayList();
	        list.add(new Role("1","血雨探花"));
	        list.add(new Role("2","太子悦神"));
	        list.add(new Role("3","三郎"));
	        list.add(new Role("4","哥哥"));
	        mv.addObject("roleList",list);
	
	        mv.setViewName("list");
	        return mv;
	    }
	}

前台HTML页面

list.ftl

	<!DOCTYPE html>
	<!--  导入标签提示库  -->
	<html xmlns:th="http://www.thymeleaf.org">
	<head>
	    <meta charset="UTF-8">
	    <title>freemarker 页面</title>
	</head>
	<body>
	<h1>freemarker 页面</h1>
	
	<h2>获取值</h2>
	${loginName !'该值为空'}
	${loginNameee !'该值为空'}
	
	<h2>遍历</h2>
	<table border="1" width="36%">
	    <tr>
	        <td>id</td>
	        <td>角色名</td>
	    </tr>
	    <#list roleList as role>
	        <tr>
	            <td>${role.rid}</td>
	            <td>${role.rname}</td>
	        </tr>
	    </#list>
	</table>
	
	<h2>包含页面</h2>
	<#include 'common/head.ftl'>
	<#include 'common/global.ftl'>
	
	<h2>获取项目名</h2>
	${ctxl}
	添加请求映射
	
	<h2>在页面定义变量</h2>
	global.ftl 页面定义！！！
	
	</body>
	</html>

global.ftl

	<#global ctxl>
	    ${springMacroRequestContext.contextPath}
	</#global>

head.ftl

	<!DOCTYPE html>
	<!--  导入标签提示库  -->
	<html lang="an">
	<head>
	    <meta charset="UTF-8">
	    <title>头部</title>
	</head>
	<body>
	<span style="background-color: hotpink">头部页面</span>
	</body>
	</html>

浏览器显示结果
在这里插入图片描述

注意：

1、application.yml中可以配置模板存放位置的根路径、以及静态资源文件存放位置的根路径
2、${springMacroRequestContext.contextPath}：SpringBoot中获取项目名
3、不推荐使用全局变量。即便它们属于不同的命名空间，全局变量也被所有模板共享，因为它们是被 import 进来的。

4、freemarker 模板也可以像 jsp 那样设置根路径

  	<#include 'common.ftl'>
  	    <script src="js/xxx.js" type="text/javascript"></script>

thymeleaf中替代jsp:include的写法

两种情况

一种是应用一段html代码

在需要应用的地方添加

  	<div th:replace="foreground/common/head :: navbar" ></div>

一种是包含整个html页面

  	<div th:include="freemarker/common/head"></div>

注意：

1、这里的th:replace里的路径是相对于templetes文件夹的。

2、冒号冒号前后都有空格，我没注意这一点踩了大坑

一只媛球球

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot 模板

SpringBoot 模板Thymeleaf模板Freemarker模板本章知识点：1、thymeleaf 模板2、Freemarker 模板Thymeleaf模板Thymeleaf的优点，就是html页面。废话不多说，直接上代码演示。相关pom依赖 <dependency> <groupId>org.springframework...
复制链接

扫一扫

专栏目录