如何在 React 中创建静态网站生成器

问题描述

Stack - 节点,用于 DB 的 mongo,用于编辑和 API 的 Strapi CMS,React - 我的应用。

我有一个数据库,其中包含一长串主菜,并且可以随时使用应用程序,允许用户数据库读取数据。我需要的是能够生成一个简单的网站,并将我的数据库中的单个实体作为填充模板的源。

Mockup

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

澄清

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

关于细节的更多信息:

  • 将在本地使用
  • 安全性不容忽视
  • 始终在 DEV 中运行不是问题(以防万一,请考虑其他问题 #2)

一些额外的问题:

  1. 是否可以从应用程序运行 NPM 脚本(例如 -npm build)
  2. 有没有什么办法可以在 DEV 模式下显示一个组件,但在构建用于生产的过程中将其替换为另一个
    App.js
    //...
    
    function App() {
    if() {
      return <AdminUI /> //this one to be shown in DEV mode
    } else {
      return <Website /> //this one to be used insted of AdminUI in the build
    }

更新

好吧,我正在探索创建站生成器的路径,到目前为止我提出了以下基本计划:

  • 准备好我的模板

  • 为我的网站创建新目录

  • 复制模板到新文件

  • 获取html文件,转成字符串修改

  • 用我的数据交换一些位

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

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

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

解决方法

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

App.js 中,编写一个 async 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 管道要简单。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...