如何在 ReactJs 应用程序中读取 Spring Boot application.properties？

Question

我们有 2 个配置文件：一个在我们的 Spring 引导应用程序 (application.properties) 中，另一个在我们的 ReactJs 应用程序中（我们在 create-react-app 中使用 .env）。决定在 ReactJs 应用程序中也使用 Spring Boot application.properties。谁能指导我如何实现这一目标？我已阅读 "properties-reader" 并尝试使用它，但我的 ReactJs 应用程序中没有 webpack.config.js 文件。

Answer 1

Thymeleaf 提供了通过模板 (index.html) 文件将数据从 application.properties 文件传递到 Javascript 的最简单方法。

或者，也可以使用普通 JSP 来完成。

以下是工作示例：

选项 1：百里香

第 1 步： 将感兴趣的数据属性定义为 index.html 文件中的隐藏元素

<div id="root"></div>  ---> Div to be updated by react
....
<span id="myData" hidden></span>

<!-- Script to set variables through  Thymeleaf -->
              
<script th:inline="javascript"> 
    var myData = "[${myData}]]";
    document.getElementById("myData").innerHTML = myData;
</script>

重要提示： 确保相同的 index.html 文件存在于 Reactjs 项目的 '/public' 文件夹中spring 引导项目的 /src/main/resources/templates/ 文件夹。

步骤 2: 在 Spring Boot 中使用 model.addAttribute() 方法调用 Thymeleaf 设置数据在 index.html 文件中

@GetMapping("/")
public String index(Model model) {

    // Get the value of my.data from application.properties file
    @Value("${my.data}")
    private String myData;

    // Call Thymeleaf to set the data value in the .html file
    model.addAttribute("myData", myData);

    return "index";
}

第 3 步： 更新 ReactJS 代码以使用 document.getElementById

读取有趣的属性

let myData = document.getElementById("myData").innerHTML

更多信息：

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

https://attacomsian.com/blog/thymeleaf-set-javascript-variable

选项 2：JSP

第 1 步： 将感兴趣的数据属性定义为 index.jsp 文件中的隐藏元素

index.jsp的位置： src/main/webapp/WEB-INF/jsp/index.jsp

<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
    <head>
        <!-- Head section here -->
    </head>
    <body>
        <!-- Div to be updated by react -->
        <div id="root">
        </div>

        <!-- Include the interesting attribute as a hidden field -->
        <span id="myData" hidden>${myData}</span>
    </body>
</html>

重要提示：

确保reactjs项目的/public/index.html文件与src/main/webapp/WEB-INF/jsp/index.jsp spring 引导项目的文件)

第2步：在Spring中使用map.put()引导控制器更新[=中的数据125=]

import java.util.Map;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomePageController{

    // Read data from application.properties
    @Value("${my.data}")
    private String myData;

    // Update data attributes of JSP using map.put
    @GetMapping("/")
    public String index( Map<String, Object> map ) {
        map.put("myData", myData);
        return "index";
    }
}

第 3 步： 更新 ReactJS 代码以使用 document.getElementById

读取有趣的属性

let myData = document.getElementById("myData").innerHTML

更多信息：

https://mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/

如何在 ReactJs 应用程序中读取 Spring Boot application.properties？

How to read Spring Boot application.properties in ReactJs app?

spring

properties-file

reactjs

spring-boot

选项 1：百里香

选项 2：JSP