微信公众号开发 web开发 html uicollectionview smtp lazyloadjs vuejs 教程 bootstrap模板 oracle显示所有数据库 查看oracle连接数 虚拟机重启命令 mysql增删改查语句 安卓程序源代码 linux管道符 matlab插值函数 linux查找文件内容 python循环 python中import python的lambda函数 python处理json文件 java数据类型 java中的string java中数据类型 javarandom javaworld java时间戳转日期 javahttp linux基础教程 js选项卡 雪地求生 allowoverride ** 机械下载 忧思华光玉 wscript msn格式 mathcad15 wow怎么赚钱 一羽月土米水日古余打一成语 明解c语言
当前位置: 首页 > 学习教程  > 

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

2020/10/16 17:59:59 文章标签: nodejs后端开发

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

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

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

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

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

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

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

步骤1 -

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

  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个端点。

  1. 我们的根目录“ /”,我们将在其中重定向到API
  2. 我们的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-

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

现在,您的数据库正在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-

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

  1. 在一个新组件中,我们将创建一个新类。
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-

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

在此组件内,我们将执行以下操作:

  1. 在一个新组件中,我们将创建一个新类。
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


本文链接: http://www.dtmao.cc/news_show_300262.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?