Question

我正在尝试一个项目MERN，我是这个环境中的新手，我想从MongoDB获取数据 - > NodeJS-＆gt; Express-＆gt; React。所以，这是我在NodeJs项目中的server.js文件：

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const url = 'mongodb://127.0.0.1:27017/'
var router = express.Router();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

const MongoClient = require('mongodb').MongoClient
var db
MongoClient.connect(url, (err, client) => {
  if (err){
    return console.log(err);
  }else{
    console.log('Connection established to', url);
  db = client.db('database-test') 
  app.listen(3100, () => {
    console.log('listening on 3100')
  })}
});

app.get('/quotes', (req, res) => {
  db.collection('quotes').find({_name :'Henry'}).next(function(err, doc)
{
  if(err)
  console.log(err);
  res.json(doc);
})
});

使用GET我想从名为quotes：

的MongoBD集合中获取数据

MongoDB查询

db.quotes.find()

{ "_id" : ObjectId("5aa94f93bd03af418d4d0acf"), "name" : "Henry" }

现在我想在ReactJS项目中显示我的数据，所以我使用代理将调用重定向到nodeJS Project

ReactJS项目，文件package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3100"
}

在App.js文件中我想显示我的数据

ReactJS项目，App.js文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const URL = 'http://localhost:3100'

class App extends Component {

  state = {
    quotes: []
  }

  componentDidMount() {
    fetch('/quotes')
      .then(res => res.json())
      .then(quotes => this.setState({ quotes }));
  }

  render() {
    return (
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h1 className="App-title">Welcome to React</h1>
           </header>
           <p className="App-intro">{this.name.response}</p>
         </div>
       );
  }
}

export default App;

我想知道的是什么是正确的方法，如何在server.js文件中查询我的数据库以及如何从App.js文件中调用它来显示我的数据。显然，我的代码中的内容不起作用。感谢。

Answer 1

我认为问题在于您将该URL保存为App.js文件顶部的变量，但从未在获取函数中调用它。

获取MongoDB + Express + NodeJS + React

1 个答案: