问题描述
Stack - 节点,用于 DB 的 mongo,用于编辑和 API 的 Strapi CMS,React - 我的应用。
我有一个数据库,其中包含一长串主菜,并且可以随时使用应用程序,允许用户从数据库读取数据。我需要的是能够生成一个简单的网站,并将我的数据库中的单个实体作为填充模板的源。
这是一个模型,希望它能让事情更清楚一些。
澄清
经过一天的思考任务,我相信我需要一个类似最简单的静态网站生成器的东西——一个允许我从列表中选择一点数据并生成一个填充它的小网站的应用程序。最终目标是在我的应用程序的某个子文件夹中创建一个网站,我可以在其中获取并根据需要使用它。
关于细节的更多信息:
- 将在本地使用
- 安全性不容忽视
- 始终在 DEV 中运行不是问题(以防万一,请考虑其他问题 #2)
一些额外的问题:
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
}
更新
好吧,我正在探索创建站点生成器的路径,到目前为止我提出了以下基本计划:
如果按预期工作,整个过程可能会通过从固定模板移动到组件来改进,这将使用 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 管道要简单。