【问题标题】:React load variables from config file从配置文件反应加载变量
【发布时间】:2023-04-07 08:42:02
【问题描述】:

我现在要使用 React 进行前端开发。

为了确保具有最大的灵活性,我想从特定的 CustomConfigFile 加载一些变量。

如果找不到该文件,则应生成该文件,并且可以在 UI 上加载和编辑。

谁能告诉我这是否可能并给我一个例子?

【问题讨论】:

  • 你想如何生成文件?它是来自任何 API 还是其他任何东西?
  • 实际上,我认为我可以使用演示文件并将其复制并重命名为正确的位置和正确的名称,以防丢失...

标签: reactjs frontend config web-frontend


【解决方案1】:

您需要执行三个步骤:

  1. 如果你想实现这样的目标,你需要将这些值存储在数据库中或服务器中的文件中,你可以使用 JSON、XML 或任何你想要的格式。

  2. 您的客户端需要在运行时加载此文件,您可以使用fetch

  3. 现在,对于编辑部分。您将需要一个可以从客户端调用的端点,该端点能够更新数据库或文件中的这些值。您可以使用 node.js、PHP、ruby 或任何您喜欢的后端语言。

这就是你需要实现的逻辑,我用 React + Laravel + MySQL 完成了这个应用程序:https://bleext.com/music 人们可以更改标题、徽标、语言、主菜单、模板和许多其他内容自定义系统。

【讨论】:

  • 感谢您的快速回复。目前我只需要 7 个变量,所以我更喜欢“服务器中的文件”和 JSON 作为格式你说的 fetch 是什么意思?该文件是通过 HTTP/S 还是通过文件系统提供的?我的 Demo-Data 由一个简单的 SpringBoot REST-API 提供,我也可以将它用于此目的吗?
  • 您必须使用 fetch 通过网络加载该文件,如下所示:fetch('https://yourdomain.com/config/env.json')。鉴于用户可以编辑值,您不能在构建时使用文件系统,而是使用您的服务器来处理值并在运行时向客户端提供数据。
  • 好的,我明白了。但是如何实现编辑后回写文件呢?以及如何保持该文件“安全”?
  • 这取决于您偏好的语言,您需要实施某种用户身份验证,只有具有正确权限的登录用户才能访问使用新值写入文件的端点
猜你喜欢
  • 2017-10-16
  • 2022-12-01
  • 2023-03-14
  • 1970-01-01
  • 2018-03-25
  • 1970-01-01
  • 2016-05-03
  • 1970-01-01
  • 2023-03-06
相关资源
最近更新 更多