0

技术栈——Node.js，用于数据库的MongoDB ，用于编辑和 API的Strapi CMS，React——我的应用程序。

我有一个包含一长串条目的数据库和一个允许用户从数据库中读取数据的即用型应用程序。我需要能够生成一个简单的网站，其中包含来自我的数据库的单个实体作为填充模板的源。

小样

这是一个模型。希望它能让事情变得更清楚一些。

澄清

经过一天的思考，我相信我需要一个简单的静态网站生成器之类的东西——一个允许我从列表中选择一个数据位并生成一个充满它的小网站的应用程序。最终目标是在我的应用程序的某个子文件夹中获取一个网站，我可以在其中获取它并根据需要使用它。

关于细节的更多信息：

  • 将在本地使用
  • 安全性可以忽略
  • 始终在开发中运行不是问题（以防万一，考虑其他问题 #2）

几个额外的问题：

  1. 是否可以从应用程序运行 NPM 脚本（如npm build）
  2. 有没有办法在开发模式下显示一个组件，但在构建生产时用另一个替换它？
    App.js
    //...

    function App() {
    if() {
      return <AdminUI /> // This one is to be shown in development mode
    } else {
      return <Website /> // This one is to be used instead of AdminUI in the build
    }

更新

好吧，我正在挖掘创建站点生成器的路径，到目前为止，我提出了以下基本计划：

  • 准备好我的模板

  • 为我的网站创建一个新目录

  • 将模板复制到新文件夹

  • 获取一个 HTML 文件，将其解析为要修改的字符串

  • 用我的数据交换一些位

  • 从修改后的字符串保存到文件

  • 如果需要其他文件，请重复。

如果按预期工作，整个过程可能会通过从固定模板移动到组件来改进，该组件将使用 JavaScript 捆绑器准备并在 node-cmd 之类的帮助下启动（从我的应用程序运行 shell 命令)...

4

1 回答 1

0

您想要的可能是可以实现的，但是如果它只是一个字符串而不是其他东西，我会说在启动时从给定文件中获取数据并从那里填充要简单得多。您可以将 JSON 文件放在public文件夹下（连同其他静态数据，如图像），并将该文件作为您的配置。

在App.js文件中，编写一个异步 componentDidMount()，然后您可以使用您的配置执行await axios.get("") 。

所以App.js看起来像（动态编写的代码，没有签入 IDE）：

  export class App extends React.App {
    constructor(props) {
      super(props);
      this.state = { loading: true, };
    }
    async componentDidMount() {
      const response = await axios.get("your/data.json");
      this.setState({ loading: false, ... whatever})
    }

    render = () => (
      <>
         (this.state.loading && <div>Still loading...</div>)
         (this.state.adminData && <AdminUI data={this.state.admingData} />)
         (this.state.devData && <Website data={this.state.devData} />)
      </>
    )
  }

如果你不关心安全性，不会像这样简单得多吗？而且，如果您使用TypeScript，您在处理数据方面也会变得更加简单。

也许值得做一个 AdminUI 来生成 JSON，另一个 UI 读取 JSON，所以你最终会做两个 UI。模板生成的 UI 甚至可以要求 JSON 文件直接引导给用户，如果它简化的话……一般来说，基于简单 JSON 的方法听起来比使用CI / CD管道更简单。

于 2021-04-15T07:21:05.233 回答