首页 > 解决方案 > 如何在 MERN 堆栈应用程序中提供 JSON 文件

问题描述

我目前正在构建一个 MERN 堆栈应用程序,用作游戏的管理中心/后端。我的前端开发人员需要能够将他的一端连接到数据库中的我的端点。

我的问题是如何在我的应用程序中设置一个路由来提供从我的 MongoDB 到网页的 json 文件?我不想将 json 文件呈现到表或类似的东西,只需要它是原始 json。非常感谢任何建议!

这是我的意思的一个小例子:

Web 浏览器示例中的 JSON 文件

这是我的服务器端 server.js:

const express = require('express');
const connectDB = require('./config/db');
const path = require('path');

const app = express();

//Connect Database
connectDB();

//Initialize Middleware - Allows for us to use 'req.body'
app.use(express.json({ extended: false }));

//Define Routes
app.use('/api/users', require('./routes/users'));
app.use('/api/auth', require('./routes/auth'));
app.use('/api/userplayers', require('./routes/userPlayers'));

//Serve React in Production
if(process.env.NODE_ENV === 'production') {
    //Set static folder
    app.use(express.static('client/build'));
}

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

这是我的客户端app.js:

import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/layout/Navbar/Navbar";
import Home from "./components/pages/Home";
import Players from "./components/pages/Players.js";
import Login from "./components/auth/Login";
import General from './components/pages/General';
import ContactState from "./context/contact/ContactState";
import AuthState from "./context/auth/AuthState";
import AlertState from "./context/alert/AlertState";
import setAuthToken from './utils/setAuthToken';
import Test from "./components/pages/Test";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  return (
    <AuthState>
      <ContactState>
        <AlertState>
          <Router>
            <Fragment>
              <Navbar />
              <div className="container">
                <Switch>
                  <Route exact path="/" component={Login} />
                  <Route exact path="/home" component={Home} />
                  <Route exact path="/players" component={Players} />
                  <Route exact path="/general" component={General} />
                  <Route exact path="/test" component={Test} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertState>
      </ContactState>
    </AuthState>
  );
};

export default App;

标签: node.jsjsonreactjsmongodbexpress

解决方案


推荐阅读