重构反应项目，使其从数据库中加载数据
我有以下的项目结构：
public src package.json server.js 在src文件夹里面我有以下内容：
components data routes styles views App.js index.js
在组件文件夹中我有所有组件，如AsidePost ， Filter ， MainNav等。
在视图文件夹中，我有包含组件文件夹中的其他组件的组件 。
在数据文件夹中，我有我的组件的所有数据。
在路由文件夹中，我有Routes.js组件，它导入所有视图，并将视图显示到一个特定的路由：
const Routes = () => { return ( <div> <MainNav /> <div className="page-content"> <Switch> <Route path="/home" component={Home} /> ...and so on... <Route path="/blog" component={Blog} /> <Route component={PageNotFound} /> </Switch> </div> </div> ) } export default Routes
在家庭组件我导入卡组件
import Card from '../components/Card'
并导入数据
import { cardsData } from '../data/cardsData'
为我cardData中的每个项目我呈现一个卡组件，并从项目给这个组件数据：
{cardsData.map((item, i) => { return ( <Card data={item} key={i} /> ) })}
所以，我用webpack构build这个项目，得到一个文件bundle.js。 这是从我的server.js文件在主文件夹中的代码：
import express from 'express' const app = express() app.use(express.static(__dirname + '/public')) app.get('/*', (req, res) => { res.sendFile(__dirname + '/public/index.html') }) app.listen(3000)
所以，现在这是如何工作的。 我想改变这个项目，使这样的事情：连接到mongodb数据库，使用mongoose，创build，例如卡模型，然后在主视图组件呈现卡组件，并给这个组件数据不是从CardsData.js文件，而是从数据库。
我知道，如何使用mongoose以及如何从那里加载数据，但我不明白文件结构应该如何看起来像在我的代码应该连接到数据库？
没有办法直接从您的反应应用程序连接到您的数据库。 即使你能find办法，这对你的应用程序来说也是一个重大的安全风险。
你可以做的另一方面是设置一个nodejs服务器（或者你喜欢的任何语言在服务器端）。 此服务器将公开REST端点对这些数据执行操作（如标准创build读取更新删除
在线有许多帮助可以find如何创buildREST端点。 一旦完成，您所要做的就是使用这些端点来在响应组件中使用ajax请求收集所需的数据。
另一种方式是使用后端服务，如firebase和consort。 他们为您提供一个安全的数据库，已经可以作为REST端点使用。
关于您的特定体系结构，您可以创build一个名为server的文件夹，其中将包含所有与服务器相关的代码。 Personnaly我喜欢将服务器端分离成经典的控制器/存储库/模型架构。 你不需要视图，因为你只是在服务JSON，但是如果你真的要自己去模拟JSON的forms，这可能会有所不同。