Question

我有以下项目结构：

public
src
package.json
server.js

在src文件夹中，我有以下内容：

components
data
routes
styles
views
App.js
index.js

在组件文件夹中，我拥有所有组件，例如 AsidePost ，过滤器， MainNav 等等。

在 views 文件夹中，我的组件包含组件文件夹中的其他组件。

在数据文件夹中，我拥有组件的所有数据。

在路由文件夹中，我有 Routes.js 组件，该组件可导入所有视图并对特定路径进行bilds视图：

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

在 Home 组件中，我导入卡组件

import Card from '../components/Card'

并导入数据

import { cardsData } from '../data/cardsData'

对于 cardsData 中的每个项目，我会渲染卡组件并从项目中提供此组件数据：

        {cardsData.map((item, i) => {
          return (
            <Card data={item}
                  key={i} />
          )
        })}

因此，我使用webpack构建了这个项目，并获得了一个文件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，创建，例如卡模型，然后在主页视图组件渲染卡组件和不是从 CardsData.js 文件中提供此组件数据，而是从数据库中提供。

我知道，如何使用mongoose以及如何从那里加载数据，但是我不明白文件结构应该是什么样子以及我的代码应该连接到数据库的哪个位置？

Answer 1

无法直接从您的反应应用程序连接到您的数据库。即使您能找到方法，它也会对您的应用造成重大安全风险。

另一方面，您可以设置一个nodejs服务器（或您在服务器端喜欢的任何语言）。此服务器将公开REST端点以对此数据执行操作（与标准创建读取更新删除

一样）

在线有很多帮助可以找到如何创建REST端点。完成后，您所要做的就是使用这些端点来使用反应组件中的ajax请求来收集所需的数据。

另一种方法是使用firebase和consort等后端服务。它们为您提供了一个安全的数据库，已经可以作为REST端点使用。

关于您的特定体系结构，您可以创建一个名为server的文件夹，其中包含所有与服务器相关的代码。 Personnaly我喜欢将服务器端分成经典的Controllers / Repository / Models架构。您不需要视图，因为您只提供JSON，但如果您必须自己将模型格式化为JSON，则可能会有所不同。

重构反应项目使其从数据库

1 个答案: