Spring Boot入门（6）前端接受后台传参-低调大师

Spring Boot入门（6）前端接受后台传参

2018-04-11 798

基础知识

利用Spring Boot来制作Web应用，就必定会涉及到前端与后台之间互相传递参数。在Spring Boot的MVC模型中，如果采用Thymeleaf来渲染视图，则前端页面怎么才能获得后台运行传递的参数呢？
我们介绍两种在Thymeleaf中前端接受后台传参的方法：

Thymeleaf自带的方法
Thymeleaf提供的JavaScript接受后台参数方法

在Thymeleaf中，使用th:text=”${var}”或者th:text=”#{var}”可接受后台参数。如果使用Thymeleaf提供的JavaScript接受后台参数方法，则需在script标签中加入th:inline=”javascript”，同时使用变量时应为 [[$var]]。采用JavaScript可以接受的后台参数类型有：

Strings
Numbers
Booleans
Arrays
Collections
Maps
Beans (Java对象实现getter和setter方法)

一个例子

以上为理论知识介绍部分，读者看了可能不一定会具体使用。因此，一个简单的例子是必须的。在这个例子中，后台使用Map方法向前端传递String和Bean。项目的完整结构如下图：

我们只需创建红线框内的三个文件。首先是Bean文件，即User类, 代码如下：

package com.hello.paramDemo.Controller;

public class User {

    private int age;
    private String name;

    User(int age, String name){
        this.age = age;
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

接着是Controller文件，EgController.java的代码如下：

package com.hello.paramDemo.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.Map;

@Controller
public class EgController {

    @RequestMapping(value="/params", method = RequestMethod.GET)
    /* 后台用Map方法向前端传递参数
     * 传递的参数为message1: String, message2: String, user: User对象
     */
    public String passParam(Map <String, Object> map){

        map.put("message1", "Hello, Spring Boot!");

        map.put("message2", "Hello, Spring Boot!");

        User user = new User(18, "Bruce");

        map.put("user", user);

        return "result";

    }
}

最后是视图result.html，其代码如下：

<!DOCTYPE HTML>

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

<head>
    <title>Passing Paraments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script th:inline="javascript">
        function ShowMessage(){
            document.getElementById("message2").innerHTML = "Thymeleaf String by JS: " + [[${message2}]];
            var user = /*[[${user}]]*/ null ;
            document.getElementById("user").innerHTML = "Thymeleaf Beans by JS: name ->"+ user.name +", age -> "+ user.age.toString();
        }
    </script>
</head>

<body>
        <p th:text="${message1}">test</p>
        <p id="message2"></p>
        <p th:text="'name: ' + ${user.name} +', age: ' + ${user.age}"></p>
        <p id="user"></p>
        <button onclick="ShowMessage()">Show Message From Java</button>
</body>

</html>

在上述Thymtleaf渲染的HTML页面中，就用到了之前将的两种办法来接受后台传递过来的参数。在JavaScript部分，user变量被赋予后台传递的user类的值，就是JavaScript中的对象。

程序运行

启动上述Spring Boot项目，在浏览器中输入： http://localhost:8080/params，可以看到页面如下：

这是用Thymeleaf自带的方法接受后台参数，还未显示JavaScript接受的参数。如想显示JavaScript接受的参数，可以点击“Show Message From Java”按钮，页面如下：

本次分享到此结束，如有问题，可参考Thymeleaf的官方说明文档网址： https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html . 当然，也欢迎大家交流~~

微信关注我们

原文链接：https://yq.aliyun.com/articles/615219

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python实践：seaborn的散点图矩阵（Pairs Plots）可视化数据

如何快速创建强大的可视化探索性数据分析，这对于现在的商业社会来说，变得至关重要。今天我们就来，谈一谈如何使用python来进行数据的可视化！一旦你有了一个很好的被清理过的数据集，下一步就是探索性数据分析（EDA）。EDA是确定数据可以告诉我们的过程，我们使用EDA来查找模式、关系或异常情况，以便指导我们后续的工作。然而在EDA中有很多的方法，但最有效的工具之一是对图（也称为散点图矩阵）。散点图矩阵让我们看到了两个变量之间的关系。散点图矩阵是识别后续分析趋势的好方法，幸运的是，它们很容易用Python实现！在本文中，我们将通过使用seaborn可视化库在Python中进行对图的绘制和运行。我们将看到如何创建默认配对图以快速检查我们的数据，以及如何自定义可视化以获取更深入的洞察力。该项目的代码在GitHub上以Jupyter Note

2018-04-11

896

反射的概述： JAVA反射机制是在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法(动态获取的信息)；对于任意一个对象，都能够调用它的任意一个方法和属性(动态调用对象的方法)；这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。简言之：通过字节码文件对象，去使用该文件中的成员变量、构造方法、成员方法。三种获取字节码文件对应的Class类型的对象的方式要想解剖一个类，必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法，所以先要获取到每一个字节码文件对应的Class类型的对象。 .class文件 --> Class类成员变量 --> Field类构造方法 --> Constructor类成员方法 --> Method类获取class文件对象的方式： 1:Object类的getClass()方法 2:数据类型的静态属性class(任意数据类型都具备一个class静态属性) 3:Class类中的静态方法(将类名作为字符串传递给Class类中的静态方法forName) public static ...

2018-04-11

776

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。