单体 JHipster React 前端应用程序属性

Question

我正在使用 React 构建 JHipster 单体应用程序。在后端，我可以使用 application.yml / ApplicationProperties.java 添加可能在不同环境（Dev、Prod 等）之间更改的属性（例如 API 键）。

我的问题是，我可以在 React 前端做同样的事情吗？这是一个 Spring 应用程序，因此相同的 application.yml 和 ApplicationProperties.java 就位。有没有人有向 UI 显示自定义属性的代码示例？

我已经阅读了这个 post () 的答案，但它对我没有帮助，因为在我的情况下它是一个整体应用程序。

Answer 1

另一个 post 的解决方案适用于单体。有关完整解决方案，请参见下文：

首先，确保您已经配置了要公开的配置。同样在ApplicationProperties.java中配置（或设置ignoreUnknownFields为false）：

application:
  my-value: 'TestValue'

创建一个 REST 端点以将配置值公开给客户端（根据其他答案修改）：

package com.mycompany.myapp.web.rest;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Resource to return custom config
 */
@RestController
@RequestMapping("/api")
public class CustomConfigResource {

    @Value("${application.my-value:}")
    private String myValue;

    @GetMapping("/custom-config")
    public CustomConfigVM getCustomConfig() {
        return new CustomConfigVM(myValue);
    }

    class CustomConfigVM {
        private String myValue;

        CustomConfigVM(String myValue) {
            this.myValue = myValue;
        }

        public String getMyValue() {
            return myValue;
        }

        public void setMyValue(String myValue) {
            this.myValue = myValue;
        }
    }
}

创建一个 reducer 来获取和存储信息：

import axios from 'axios';

import { SUCCESS } from 'app/shared/reducers/action-type.util';

export const ACTION_TYPES = {
  GET_CONFIG: 'customConfig/GET_CONFIG',
};

const initialState = {
  myValue: '',
};

export type CustomConfigState = Readonly<typeof initialState>;

export default (state: CustomConfigState = initialState, action): CustomConfigState => {
  switch (action.type) {
    case SUCCESS(ACTION_TYPES.GET_CONFIG): {
      const { data } = action.payload;
      return {
        ...state,
        myValue: data['myValue'],
      };
    }
    default:
      return state;
  }
};

export const getConfig = () => ({
  type: ACTION_TYPES.GET_CONFIG,
  payload: axios.get('api/custom-config'),
});

最后，从一个组件中调用reducer的getConfig方法，例如App.tsx:

import { getConfig } from 'app/shared/reducers/custom-config';
...
useEffect(() => {
    props.getConfig();
  }, []);
...
const mapDispatchToProps = { getConfig };
...

单体 JHipster React 前端应用程序属性

Monolithic JHipster React Front End Application Properties

reactjs

typescript

webpack

jhipster