springboot之thymeleaf模板和freemarker模板

最新推荐文章于 2023-03-22 14:43:30 发布

今日相乐，皆当喜欢

最新推荐文章于 2023-03-22 14:43:30 发布

阅读量278

点赞数

分类专栏： springboot 文章标签：框架 springboot 模板

本文链接：https://blog.csdn.net/weixin_42687829/article/details/87717853

版权

springboot 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、springboot之thymeleaf模板

thymeleaf的优点：它就是html页面

相关pom依赖：

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

thymeleaf的使用：

a、新建modul时勾选Thymeleaf，然后会自动添加相关pom依赖

b、配置application.yml文件

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

spring.thymeleaf.cache=false

正式环境还是要将缓存开启的

server:
  servlet:
    context-path: /springboot
 
spring:
    thymeleaf:
      cache: false   #项目开发完后改为true

c、thymeleaf模板开发的相关指令

对应的后台代码：

package com.zking.entity;

/**
 * @author LJ
 * @site www.lijun.com
 * @Date 2019年02月18日
 * @Time 15:29
 */
public class User {
    private Integer uid;
    private String uname;
    private String pwd;

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

    public User() {
    }

    public Integer getUid() {
        return uid;
    }

    public void setUid(Integer uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
}

package com.zking.controller;

import com.zking.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.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author LJ
 * @site www.lijun.com
 * @Date 2019年02月18日
 * @Time 15:31
 */
@Controller
public class IndexController {

    @RequestMapping("/user/userList")
    public ModelAndView index(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("/user/userList");
        modelAndView.addObject("msg","用户列表");
        List<User> list = new ArrayList<User>();
        list.add(new User(1,"zs","666"));
        list.add(new User(2,"ls","123"));
        modelAndView.addObject("userList",list);
        return modelAndView;
    }
}

前台HTML代码：

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${msg}"></title>
</head>
<body>
<!--取值语法-->
<h2 th:text="${msg}"></h2>

<table border="1px" width="500px">
    <thead>
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>密码</td>
    </tr>
    </thead>
    <tbody>
    <!--遍历语法-->
    <tr th:each="i : ${userList}">
        <td th:text="${i.uid}"></td>
        <td th:text="${i.uname}"></td>
        <td th:text="${i.pwd}"></td>
    </tr>
    </tbody>
</table>

<h2>下拉框</h2>
<select>
    <option th:each="i : ${userList}" th:value="${i.uid}" th:text="${i.uname}"></option>
</select>
</body>
</html>

加上下面这行代码后会有提示：

<html xmlns:th="http://www.thymeleaf.org">

运行效果：

2、springboot之freemarker模板

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

相关pom依赖：

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

freemarker的使用：

a、添加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/**

b、给idea的右键菜单添加可以创建以.ftl为后缀的文件，因为idea里默认是没有的

Settings--->Editor-->File and Code Templates

设置好后点击鼠标右键就可出现能新建以.ftl为后缀的页面：

c、freemarker模板语法的使用

对应的后台代码：

    @RequestMapping("/role/roleList")
    public ModelAndView roleList(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("/roleList");
        modelAndView.addObject("name","zs");
        modelAndView.addObject("sex","man");
        List<Map> list = new ArrayList<>();
        Map map;
        for (int i = 1;i < 5;i++){
            map = new HashMap();
            map.put("id","00"+i);
            map.put("name","管理员"+i);
            map.put("mark","描述"+i);
            list.add(map);
        }
        modelAndView.addObject("roles",list);
        return modelAndView;
    }

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

前台HTML代码：

roleList.ftl：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>role列表</title>
    <#include 'common.ftl'><#--用于引入重复性代码，如公共的css、js-->
</head>
<body>
welcome 【${name!'未知'}】 to freemarker!

<h2>exists用于逻辑判断</h2>
<#if name?exists>
    ${name}
</#if>

<h2>条件判断</h2>
<#if sex == 'man'>
    男
<#elseif sex == 'woman'>
    女
<#else >
    保密
</#if>

<h2>循环的使用</h2>
<table border="1" width="500">
    <tr>
        <td>ID</td>
        <td>角色名称</td>
        <td>描述</td>
    </tr>
    <#list roles as i>
        <tr>
            <td>${i.id}</td>
            <td>${i.name}</td>
            <td>${i.mark}</td>
        </tr>
    </#list>
</table>

<h2>局部变量(assign)/全局变量(global)的定义</h2>
<#assign ctx1>
    ${springMacroRequestContext.contextPath}
</#assign>
<#global ctx2>
    ${springMacroRequestContext.contextPath}
</#global>
${ctx1}----${ctx2}
<button onclick="ta()">按钮</button>

<h2>include的使用</h2>
<#include 'foot.ftl'>

</body>
</html>

common.ftl：

<#--项目名-->
<#assign ctx>
    ${springMacroRequestContext.contextPath}
</#assign>
<base href="${ctx}/">
<script src="static/js/xxx.js"></script>

foot.ftl：

底部版权<br>
<#--这样是不能访问到login.ftl的，因为请求会被拦截-->
<a href="login.ftl">返回登录1</a><br>
<#--这样可以访问到login.ftl，因为经过了后台-->
<a href="${ctx}/toLogin">返回登录2</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body>
欢迎来到登录页面！
</body>
</html>

xxx.js：

function ta() {
    alert(666);
}

目录结构：

访问一波的效果：