关于springboot的模板

最新推荐文章于 2024-05-15 09:17:55 发布

程序猿

最新推荐文章于 2024-05-15 09:17:55 发布

阅读量374

点赞数

分类专栏： spring boot 文章标签： springboot

本文链接：https://blog.csdn.net/weixin_45092850/article/details/102973640

版权

spring boot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

springboot的模板
thymeleaf 模板
- 表达式基本对象（Expression Basic Objects）
- 常用th标签都有那些？
freemarker模板

springboot的模板

springboot有两种模板可以使用，一种是thymeleaf，还有一种是freemarker模板，这两种我个人觉得应该是thymeleaf，关于Thymeleaf的优点，我只说一条：它就是html页面，也就是静态页面.

thymeleaf 模板

thymeleaf 支持html5标准；是一种模板引擎框架（TemplateEngine Framework）；thymeleaf 页面无须部署到servlet开发到服务器上，直接通过浏览器就能打开。它可以完全替代 JSP 。特点：

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2.它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果。

3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

表达式基本对象（Expression Basic Objects）

（1）#ctx：上下文对象。

（2）#vars: 上下文变量。

（3）#locale：上下文区域设置。

（4）#request：HttpServletRequest对象（仅在Web上下文中）。

（5）#response：HttpServletResponse对象（仅在Web上下文中）。

（6）#session：HttpSession对象（仅在Web上下文中）。

（7）#servletContext：ServletContext对象（仅在Web上下文中）。

10.表达式工具对象（ExpressionUtility Objects）

（1）#execInfo：模板执行的信息。

（2）#message：在变量内获取外部信息的方法表达式，与使用#{…}语法获得的方式相同。

（3）#uris：用于转义URL/URI部分的方法。

（4）#conversions：执行已配置的conversion service。

（5）#numbers：格式化数字对象的方法。

（6）#strings：String对象的方法，包括contains，startsWith，prepending/appending等。

（7）#objects：对象通常方法。

（8）#bools：布尔判断的方法。

（10）#lists：list方法。

（11）#sets：set方法。

（12）#maps：map方法。

（13）#aggregates：在数组或集合上创建聚合的方法。

（14）#ids：用于处理可能重复的id属性的方法（如作为迭代的结果）

常用th标签都有那些？

关键字功能介绍案例
th:id 替换id
th:text 文本替换

description

th:utext 支持html的文本替换

conten

th:object 替换对象

th:value 属性赋值
th:with 变量赋值运算

th:style 设置样式 th:style="‘display:’ + @{(

KaTeX parse error: Expected 'EOF', got '}' at position 36: \dots'inline-block')}̲ + ''" th:oncl\dots

{users}">
th:if 判断条件
th:unless 和th:if判断相反 <a th:href="@{/login}" th:unless=

{session.user != null}>Login</a> th:href 链接地址 <a th:href="@{/login}" th:unless=

{session.user != null}>Login />
th:switch 多路选择配合th:case 使用

th:case th:switch的一个分支

User is an administrator

th:fragment 布局标签，定义一个代码片段,方便其它地方引用

th:include 布局标签，替换内容到引入的文件 />
th:replace 布局标签，替换整个标签到引入的文件

th:selected selected选择框选中 th:selected="(${xxx.id} == ${configObj.dd})"
th:src 图片类地址引入 App Logo

th:inline 定义js脚本可以使用变量

下面直接上代码

Thymeleaf 相关pom依赖

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

在application.yml配置文件里，Spring Boot官方文档建议在开发时将缓存关闭，那就在application.properties文件中加入下面这行
不过正式环境还是要将缓存开启的，

spring.thymeleaf.cache=false

thymeleafcontroller

package com.tzp.springboottest.conterller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author 心如止水
 * @site www.xiaomage.com
 * @company
 * @create 2019-11-08 12:00
 */
@Controller
@RequestMapping("/thymeleaf")
public class thymeleafcontroller {


//     model就是要传的值，视图就是要返回的页面
    @RequestMapping("/list")
    public ModelAndView list(){
        ModelAndView mv = new ModelAndView();
        mv.addObject("name","zs");
        mv.setViewName("list");
         return mv;
    }


//    @RequestMapping
//    public String list2(HttpServletRequest request){
//        return "list2";
//    }

}

list.html
这里要注意的是需要把第二行代码替换成 <html xmlns:th="http://www.thymeleaf.org">
然后就是div里的赋值，controller里放的是死数据

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf知识点</title>
</head>
<body>
thymeleaf知识点
<div th:utext="${name}"></div>
</body>
</html>

最后运行到页面
在这里插入图片描述

在把数据全部遍历出来

//     model就是要传的值，视图就是要返回的页面
    @RequestMapping("/list")
    public ModelAndView list(){
        ModelAndView mv = new ModelAndView();
        List list = new ArrayList();
        list.add(new User("1","zs"));
        list.add(new User("2","ls"));
        list.add(new User("3","ww"));
        mv.addObject("userList",list);
        mv.addObject("name","zs");
        mv.setViewName("list");
         return mv;
    }

User对象

package com.tzp.springboottest.entity;

import lombok.Data;

/**
 * @author 心如止水
 * @site www.xiaomage.com
 * @company
 * @create 2019-11-08 1:56
 */

@Data
public class User {

    private String uid;
    private String uname;

    public User(){}

    public User(String uid, String uname) {
        this.uid = uid;
        this.uname = uname;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + '\'' +
                ", uname='" + uname + '\'' +
                '}';
    }
}

list.html

<h2>循环</h2>
<table>
    <tr>
        <td>用户的id</td>
        <td>用户名</td>
    </tr>
    <tr th:each="u : ${userList}">
        <td th:utext="${u.uid}"></td>
        <td th:utext="${u.uname}"></td>
    </tr>
</table>

运行
在这里插入图片描述
给页面加样式
直接在方法里添加

        mv.addObject("msg","<span style='color:red;'>双11剁手活动即将开始</span>");

list.html

<div th:utext="${msg}"></div>

在这里插入图片描述
在thymeleaf模板中定义公共页面

head.html

<div th:fragment="h1">
    第一部分内容
</div>
<div th:fragment="h2">
    第二部分内容
</div>
<div th:fragment="h3">
    第三部分内容
</div>

list.html

<h2>包含页面</h2>
<h3>包含页面所有内容</h3>
<div th:include="role/common/head"></div>
<h3>包含页面指定内容</h3>
<div th:include="role/common/head :: h2"></div>
</body>
</html>

在这里插入图片描述

freemarker模板

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

导入pom依赖


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

application.yml

spring:
  thymeleaf:
    cache: false
  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实体类

package com.tzp.springboottest.entity;

import lombok.Data;

/**
 * @author 心如止水
 * @site www.xiaomage.com
 * @company
 * @create 2019-11-08 16:38
 */
@Data
public class Role {
    private String rid;
    private String rname;

    public Role(){}

    public Role(String rid, String rname) {
        this.rid = rid;
        this.rname = rname;
    }
}

FreemarkerController

package com.tzp.springboottest.conterller;

import com.tzp.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 心如止水
 * @site www.xiaomage.com
 * @company
 * @create 2019-11-08 16:28
 */
@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("1","会员"));
        list.add(new Role("1","超级会员"));
        mv.addObject("roleList",list);

        mv.setViewName("list");
        return mv;
    }

}

freemarker默认的后缀是 ftl，但是需要自己改后缀
list.ftl

获取值的那里的意思就是：因为如果没有值的话，就会报错，所以意思就是如果为空，就用后面添加的内容替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>freemarker知识点</title>
</head>
<body>
freemarker知识点
<h2>获取值</h2>
${loginName!'未知'}


<h2>遍历</h2>
<table border="1px" width="60%">
    <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>

<h2>获取项目名</h2>

<h2>如何在页面定义变量</h2>

</body>
</html>

在这里插入图片描述

一般我们做一个项目，他都会有公共页面，那在这里怎么定义呢
head.htl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    头部页面
</body>
</html>

global.ftl

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

在list.ftl引入

<h2>包含页面</h2>
<#--先引入，然后就可以在页面在运用里面的变量了-->
<#include 'common/head.ftl'/>
<#include 'common/global.ftl'/>

<h2>获取项目名</h2>
${ctx1}
添加映射请求

在这里插入图片描述

程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于springboot的模板

文章目录springboot的模板表达式基本对象（Expression Basic Objects）常用th标签都有那些？thymeleaf 模板freemarker模板springboot的模板springboot有两种模板可以使用，一种是thymeleaf，还有一种是freemarker模板，这两种我个人觉得应该是thymeleaf，关于Thymeleaf的优点，我只说一条：它就是html...
复制链接

扫一扫