Thymeleaf #request和${param}对象的使用

fengyehongWorld

已于 2022-12-11 22:02:23 修改

阅读量2.4k

点赞数

分类专栏： # Thymeleaf 文章标签： Thymeleaf

于 2022-12-11 20:47:27 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/128278068

版权

Thymeleaf 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

参考资料

Thymeleaf参考手册（二）：标准表达式语法（一）

一. 前期准备

⏹配置文件

server:
  servlet:
    context-path: /jmw

⏹form

import lombok.Data;

import java.math.BigDecimal;
import java.util.Date;
import java.util.List;

@Data
public class Test16Form {

    private String name;

    private String sex;

    private Date birthday;

    private BigDecimal money;

    private List<Test4Entity> tableList;
}

⏹进入页面的url

http://localhost:8080/jmw/test16/init?name=贾飞天&age=18

二. controller层

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/test16")
public class Test16Controller {
	
	// 注入request对象
    @Resource
    private HttpServletRequest request;

    @GetMapping("/init")
    public ModelAndView init() {

        // ⏹获取项目根路径
        String contextPath = request.getContextPath();
        System.out.println(contextPath);  // /jmw

        // ⏹将?key1=value1&key2=value2 转换为 map
        Map<String, String[]> parameterMap = request.getParameterMap();
        for (Map.Entry<String, String[]> entry : parameterMap.entrySet()) {
            System.out.println(entry.getKey());
            System.out.println(Arrays.toString(entry.getValue()));
        }
        /*
			name
			[贾飞天]
			age
			[18]
		*/

        // ⏹获取name参数所对应的value
        String name = request.getParameter("name");
        System.out.println(name);  // 贾飞天

        // 👉将map存入request的Attribute中
        HashMap<String, String> map1 = new HashMap<>();
        map1.put("address", "地球");
        map1.put("hobby", "睡觉");
        request.setAttribute("info", map1);

        // 👉将entity存入request的Attribute中
        Test16Form test16Form = new Test16Form();
        test16Form.setName("贾飞天");
        test16Form.setSex("男");
        request.setAttribute("entity", test16Form);

        // 返回到页面中
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("test16");
        return modelAndView;
    }
}

三. 前台HTML

⏹test16.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
	<!-- 只有当param对象不为空的时候,才执行渲染 --> 
    <th:block th:if="not ${param.isEmpty()}">
        <div>当前一共有[[${param.size()}]]个参数</div>
        <div>分别为: [[${param.name}]] 和 [[${param.age}]]</div>
    </th:block>
</div>
</body>
</html>

👉渲染之后

<div>当前一共有2个参数</div>
<div>分别为: 贾飞天 和 18</div>

四. 前台内联JS

🧐🧐🧐以下所有的JS代码必须包裹在<script th:inline="javascript"></script>内联标签中

4.1 #request.getParameterMap()

⏹获取url传参的所有参数

const paramMap = [[${#request.getParameterMap()}]];
console.log(paramMap);
/*
	{
	  "name": [
	    "贾飞天"
	  ],
	  "age": [
	    "18"
	  ]
	}
*/

4.2 #request.getParameter(key)

⏹获取指定的参数

const paramName = [[${#request.getParameter('name')}]];
console.log(paramName);  // 贾飞天

4.3 ${param}对象

⏹param是一个由Thymeleaf 提供的对象,用于存放url传参的所有参数
相当于#request.getParameterMap()，可以理解为简写形式

const param = [[${param}]];
console.log(param);
/*
	{
	  "name": [
	    "贾飞天"
	  ],
	  "age": [
	    "18"
	  ]
	}
*/

// 👉相当于 #request.getParameter('name')
const name = [[${param.name}]];
console.log(name);  // 贾飞天

// 👉由于没有hobby,所以渲染完之后为 null,又因为 ?? 表达式,所以最后结果为 吃饭
const hobby = [[${param.hobby}]] ?? '吃饭';
console.log(hobby);  // 吃饭

4.4 #request.getContextPath()

⏹获取设置的项目根路径

const contextPath1 = [[${#request.getContextPath()}]];
console.log(contextPath1);  // /jmw

// 👉#httpServletRequest和#request等效
const contextPath2 = [[${#httpServletRequest.getContextPath()}]];
console.log(contextPath2);  // /jmw

4.5 #request.getAttribute(key)

⏹获取请求时，设置的Attribute值

const info = [[${#request.getAttribute('info')}]];
console.log(info);
// {address: "地球", hobby: "睡觉"}

const entity = [[${#request.getAttribute('entity')}]];
console.log(entity);
// {name: "贾飞天", sex: "男", birthday: null, money: null, tableList: null}

五. 全局变量对象

😵之前的做法，需要将变量先存入页面的隐藏域中，然后使用js获取隐藏域的值

<input type="hidden" id="name" th:value="${name}"/>
<script th:inline="javascript">
	// 获取隐藏域中的值
	const name = document.getElementById("name").value;
	console.log(name);  // 贾飞天
</script>

🧐现在可以这么做，直接将后台的数据封装为一个全局参数对象

<script th:inline="javascript">
// 可以把js用到的所有的全局数据封装为一个对象
const globalParam = {
    name: [[${#request.getParameter('name')}]],
    info: [[${#request.getAttribute('info')}]],
    size: [[${param.size()}]],
    hobby: [[${param.hobby}]] ?? '吃饭',
};
console.log(globalParam);
/*
	{
	  "name": "贾飞天",
	  "info": {
	    "address": "地球",
	    "hobby": "睡觉"
	  },
	  "size": 2,
	  "hobby": "吃饭"
	}
*/
</script>