Как читать Spring Boot application.properties в приложении ReactJs? - PullRequest
Новая
       73

Как читать Spring Boot application.properties в приложении ReactJs?

2 голосов
/ 25 мая 2020

У нас есть 2 файла конфигурации: один находится в нашем приложении Spring Boot (application.properties), а другой - в нашем приложении ReactJs (мы используем .env в create-response-app). Было решено использовать Spring Boot application.properties также в приложении ReactJs. Может ли кто-нибудь помочь мне, как я могу этого добиться? Я читал про "средство чтения свойств" и пытался его использовать, но у меня нет файла webpack.config. js в нашем приложении ReactJs.

1 Ответ

2 голосов
/ 26 мая 2020

Thymeleaf обеспечивает самый простой способ передачи данных из файла application.properties в Javascript через файл шаблона (index. html).

В качестве альтернативы это можно сделать используя также обычный JSP.

Вот рабочие примеры:

Вариант 1: Thymeleaf

Шаг 1: Определите интересные атрибуты данных как скрытые элементы в индексе. 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 существует в папке ' / publi c' проекта Reactjs, а также в папке / src / main / resources / templates / папка проекта весенней загрузки.

Шаг 2: Используйте model.addAttribute () метод в Spring Boot, чтобы вызвать Thymeleaf для установки данных в индекс. 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 -вкладывание

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

Вариант 2: JSP

Шаг 1: Определите интересные атрибуты данных как скрытые элементы в индексе. jsp файл

Местоположение индекса. 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>

Важное примечание:

Убедитесь, что файл / public / index. html проекта reactjs имеет такое же содержимое (<body>...</body>), что и src / main / webapp / WEB-INF /jsp/index.jsp файл проекта весенней загрузки)

Шаг 2: Используйте map.put () в контроллере Spring Boot для обновления данные в JSP

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/

...