如何将NodeJS后端与ReactJS前端应用程序结合在一起。

最新推荐文章于 2022-02-28 16:21:23 发布

dfsgwe1231

最新推荐文章于 2022-02-28 16:21:23 发布

阅读量1.4k

点赞数 1

文章标签： javascript 后端前端 ViewUI

在本文中，我想展示如何使用NodeJS作为后端来构建网站的前端和后端。我们将使用node创建端点，并以JSON格式设置数据库。然后，我们将使用React创建一个前端应用程序，该应用程序将发布到数据库，并从数据库中获取数据。

对于此示例，我将制作一个留言簿，用户可以在其中提交其姓名并留下消息。因为用户不需要登录或检索任何数据，所以我不需要在会话中存储任何内容。这可能会起作用：

基本上，我们将在一个完整的一页上显示所有页面，并带有一个用于提交消息的表格以及实际的留言簿。为了完成这项工作，我们将从为POST和GET请求创建端点开始。我们将建立我们的数据库，进行部署，以便我们可以创建一个React应用，并从在线API中提取数据。

这是我喜欢做事的顺序。您可能希望以其他方式工作。这个过程对我来说很有意义，因为每个步骤都建立在之前的步骤之上。在本教程中，我将详细介绍每个步骤。

要查看完成的项目如何工作，这是我的项目的链接：

http://ethan.jarrell.webdeveloper.surge.sh/GuestBook

步骤1 -

我们的数据库集合将包含2个项目：

用户名
用户写的消息

如果尚未这样做，请继续安装MongoDB，并使其在端口27017上运行。然后，在命令行上，我们将创建数据库。

我们称其为数据库签名。还有集合guest_signatures。

> Show dbs
> Use signatures
switched to db signatures
> show collections
> db.createCollection(guest_signatures)

现在我们已经完成了设置，我们可以切换到文本编辑器，并为数据库创建模型。

第2步 -

使用命令行启动新的Express应用程序。创建新目录，然后使用npm init创建应用程序。这将自动创建您的pkg.JSON文件。

由于这将是一个非常基本的应用程序，因此我们的快速应用程序中仅需要2个其他文件。一为我们的路线。我也希望在此文件中包含所有依赖项。然后，我们的第二个填充将用于我们的模型/模式。我们将首先处理模型文件。它看起来应该像这样：

const mongoose = require('mongoose');

let Schema = mongoose.Schema;

const signatureSchema = new Schema({
  guestSignature: {
    type: mongoose.Schema.Types.Mixed,
    required: true,
  },
  message: {
    type: mongoose.Schema.Types.Mixed,
    required: true,
  },
})

const Signature = mongoose.model('Signature', signatureSchema);

module.exports = Signature;

步骤3-

在这里创建端点之前，让我们继续在文件顶部列出我们的依赖项。我们不需要太多。

//====LIST DEPENDENCIES===//

const express = require('express');
const parseurl = require('parseurl');
const bodyParser = require('body-parser');
const path = require('path');
const expressValidator = require('express-validator');
const mongoose = require('mongoose');
const Signature = require('./models/signature.js')
const app = express();
const url = 'mongodb://localhost:27017/signatures';

//=========================//

您不一定需要连接到猫鼬，因此，如果愿意，可以随时使用MongoClient。我们还使用了上一步中刚刚创建的Signature模式。

现在，让我们创建端点。我们只有一个模型，并且现在只打算对其进行读写，所以我们只有2个端点。

我们的根目录“ /”，我们将在其中重定向到API
我们的api，我们将其称为“ / api / signatures”，在其中进行读写。

在我们的API端点，我们将有一个GET和一个POST。我们将分别使用find（）和create（）方法分别用于GET和POST来引用我们的模型。而且我们的响应将必须为JSON格式，以便我们以后可以轻松地从React那里访问数据。这些端点的外观如下：

//====ROOT DIRECTORY===//

app.get('/', function(req, res) {
  res.json('you did it');
});

//==========================//

//====GET ALL SIGNATURES===//

app.get('/api/signatures', function(req, res) {
  Signature.find({}).then(eachOne => {
    res.json(eachOne);
    })
  })

//==========================//

//====POST NEW SIGNATURE===//

app.post('/api/signatures', function(req, res) {
  Signature.create({
    guestSignature: req.body.SignatureOfGuest,
    message: req.body.MessageofGuest,
  }).then(signature => {
    res.json(signature)
  });
});

//==========================//

我唯一没有真正提及的是req.body.SignatureOfGuest和req.body.MessageofGuest。本节中的其他所有内容都涉及我们已经创建的内容，例如数据库，集合和模型。这是指我们将在React App中使用的字段名称，我们的输入将必须使用名称SignatureOfGuest和MessageofGuest，因此我们需要记住这一点。

第四步 -

现在，我们要从文本编辑器连接到本地数据库。如果您还记得的话，我们在清单中有这个常数：

const url = 'mongodb://localhost:27017/signatures';

我们将使用此常量编写一个函数以连接到我们的本地数据库。

//====MONGOOSE CONNECT===//

mongoose.connect(url, function (err, db) {
 if (err) {
   console.log('Unable to connect to the mongoDB server. Error:', err);
 } else {
   console.log('Connection established to', url);
 }
});

//==========================//

为了确保一切正常，我们还需要在文件末尾添加一个app.listen。

此时，最好暂停一下，并确保端点和本地连接正常工作。您可以使用Postman进行GET和POST请求来实现。如果端点或连接不起作用，您应该能够根据收到的错误消息在此处诊断问题。如果一切正常，它应该允许您适当地读写数据库。

一切正常后，就该在Heroku和Mlab上设置我们的帐户了。

步骤5

在此处注册一个Heroku帐户。并在此处创建一个mLab帐户。

步骤6-

创建mLab帐户后，单击“新建”按钮，然后选择“单节点”沙箱。也有付费选项，但是沙盒有足够的空间开始使用。为您的数据库命名。由于我的本地数据库是签名，因此我在我的mLab数据库中使用了相同的名称。
现在您已经创建了数据库，您可以从此处开始新的集合。
您还需要添加一个或多个可以访问数据库的用户。如果不执行此步骤，并且将自己添加为具有访问权限的用户，则在尝试部署身份验证时始终会失败。

现在，您的数据库正在mLab上运行。当您单击数据库时，您应该在顶部看到一些信息，告诉您如何集成连接。它看起来应该像这样：

mongodb://<dbuser>:<dbpassword> @ds7 9234.mlab.com:9234/signatures

数据库的实际URL将只用用户名和密码替换用户名和密码。

现在让我们回到文本编辑器。当前，我们在此位置本地运行数据库：

const url = 'mongodb://localhost:27017/signatures';

要对其进行更改，以使我们连接到mLab，只需使用mLab中的信息更新url变量。它看起来应该像这样：

const url = 'mongodb://username:password@ds79234.mlab.com:9234/signatures';

但是，您可能会将其放在github或其他公共场所。您不希望将mlab用户名和密码放在任何人都可以看到的公共空间中。为了解决这个问题，我们将在命令行上设置一个环境变量，然后在文本编辑器中再次更新url变量。在命令行上，使用以下命令：

export MONGOLAB_URI="mongodb://username:password@ds79234.mlab.com:9234/signatures';

当然，用您自己的用户名，密码，数字和数据库名称替换它。现在，回到文本编辑器中，我们将url变量更改为以下内容：

const url = process.env.MONGOLAB_URI;

我们还希望更改app.listen以反映新端口。它可能看起来像这样：

app.listen(process.env.PORT || 3000);
console.log('starting applicaiton.  Good job!');

这样，它将尝试从mongolab运行，但如果无法建立连接，则默认情况下仍会在端口3000上监听。如果您想测试本地版本的更改，这也将允许您在本地或从mlab运行该应用程序。

建立连接的最后一步是将代码部署到Heroku App。为此，您可以从命令行使用以下代码：

heroku config:set MONGOLAB_URI=mongodb://username:password@ds79234.mlab.com:9234/signatures

您的应用程序应该已成功部署在heroku上，现在可以从那里打开它。如果出现错误，请仔细检查以确保它在本地运行。如果是这样，则可能是连接过程中的错误。

在最后两个步骤中，有很多重复的代码。我将在这里概述高级代码。

步骤7-

从命令行使用'create-react-app'创建一个新的react应用。

步骤8-

现在，我们要创建一个表单，以允许用户输入。这是我们的方法。

在一个新组件中，我们将创建一个新类。

class GuestBook extends Component

2.我们将使用构造函数和super方法向下传递props。

constructor(props) {
    super(props);

3.使用this关键字处理来宾的名称和消息，并将其绑定到（this）。

this.handleSignatureOfGuest = this.handleSignatureOfGuest.bind(this);
    this.handleMessageofGuest = this.handleMessageofGuest.bind(this);

4.将来宾的名称和消息的状态设置为空字符串。

this.state = {
      SignatureOfGuest: "",
      MessageofGuest: "",
    };

5.侦听有关名称和消息输入状态的事件。

handleSignatureOfGuest(event) {
    this.setState({ SignatureOfGuest: event.target.value });
  }
  handleMessageofGuest(event) {
      this.setState({ MessageofGuest: event.target.value });
    }

6.创建一个将名称和消息更改为目标输入值的函数。

addToGuestBook = event => {
    event.preventDefault();
    this.setState({
      SignatureOfGuest: event.target.value,
      MessageofGuest: event.target.value,
});

7.我现在正在使用axios将输入数据发布到我们的数据库，该数据库位于heroku上。

axios.post('< your-heroku-url here>' , {
        SignatureOfGuest: this.state.SignatureOfGuest,
        MessageofGuest: this.state.MessageofGuest,
      })
    .then(response => {
      console.log(response, 'Signature added!');
    })
    .catch(err => {
      console.log(err, 'Signature not added, try again');
    });

8.然后将输入的状态重置为空字符串。

this.setState({
      SignatureOfGuest: "",
      MessageofGuest: "",
    });
};

9.最后，我们将创建一个render方法，并返回包含输入字段的页面。在每个字段的输入中，我们给它一个onChange，名称和值。每个字段的onChange都将设置为.handlemessage或this.handlename。每个字段的名称将设置为我们在节点应用程序中称为的名称。该值将使用状态，我们将其设置为this.state.message和this.state.name。

<input
           onChange={this.handleSignatureOfGuest}
           name="SignatureOfGuest"
           className="NameinputForm"
           value={this.state.SignatureOfGuest}
           placeholder="Enter your name"
            />
  <textarea
              onChange={this.handleMessageofGuest}
              name="MessageofGuest"
              className="MessageinputForm"
              value={this.state.MessageofGuest}
              placeholder="Type a message"
               />

10.然后，我们将添加一个提交按钮，我们从前面开始调用该函数。

<button
            className="submitbuttonguestbook"
            type="submit"
            onClick={this.addToGuestBook}
              >
            Submit to Guestbook<i className="GuestBookButton2" aria-hidden="true" />
            </button>

步骤9-

现在，我们将制作另一个组件，以呈现要存储在数据库中的数据。然后，我们可以导出该组件，并将其放在我们的留言簿页面上。

在此组件内，我们将执行以下操作：

在一个新组件中，我们将创建一个新类。

class GuestNames extends Component {

2.我们将使用构造函数和super方法向下传递props。

constructor(props) {
    super(props);

3.使用this.state将访客留言的状态设置为空字符串。

this.state = {
      messages: "",
    };

4.使用componentDidMount生命周期方法

componentDidMount() {

5.在该方法内，我们将使用fetch和heroku api的url从数据库中获取信息。

fetch('<your-heroku-url-goes-here> ' )
    .then(results => {
      return results.json();

6.我们将在数据上映射，并返回所需的数据。

data.map((msg) => {
        return(
          <div key={msg.results}>
            <h3 className="h3msg">{msg.message}</h3>

<h2 className="h2sig">-{msg.guestSignature}</h2>
          </div>

7.现在，我们将使用this.setState使用刚刚获取的数据将消息的状态设置为新状态。

this.setState({messages: messages});

8.现在，我们将创建渲染方法。

render() {

9.在render方法内部，我们将创建JSX元素以在组件内部渲染数据。我在<h6>标记内使用this.state.messages。

return (

<div className="guestdataContainer">
          <h6>Guestbook Messages</h6>
          {this.state.messages}
        </div>

10.最后，我们将导出组件，以便可以在其他页面上使用它。

export default GuestNames;

同样，如果您有任何疑问，请随时与我们联系。谢谢！

From: https://hackernoon.com/how-to-combine-a-nodejs-back-end-with-a-reactjs-front-end-app-ea9b24715032

dfsgwe1231

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何将NodeJS后端与ReactJS前端应用程序结合在一起。

在本文中，我想展示如何使用NodeJS作为后端来构建网站的前端和后端。我们将使用node创建端点，并以JSON格式设置数据库。然后，我们将使用React创建一个前端应用程序，该应用程序将发布到数据库，并从数据库中获取数据。对于此示例，我将制作一个留言簿，用户可以在其中提交其姓名并留下消息。因为用户不需要登录或检索任何数据，所以我不需要在会话中存储任何内容。这可能会起作用：基本上，...
复制链接

扫一扫