如何使用 Node 和 Express 将客户端连接到服务器端。

前端设置

后端设置

让我们想象一下

测试时间

有没有想过数据是如何从前端（HTML、CSS 和 JavaScript）传递到后端的？不用再想了。我将向你展示一个简单的设置，告诉你如何完成这个过程。

先决条件

1) 你了解 HTML
2) 你对 Node.js 有基本的了解（如果你不了解也没关系。点击此处了解 Node.js 的基础知识及其基本设置。）
3) 对异步编程有一定的了解。4
) 你的电脑上安装了 Node.js。
注意：从官方网站下载 Node.js。确保下载带有 LTS 的版本。安装非常简单。只需单击下一步即可完成。5
) 对 Linux 终端命令有一定的了解。（我猜你可能安装了某种 Linux 终端，比如 Git Bash）

前端设置

我喜欢将客户端与服务器端分开，这样可以更轻松地部署我的应用程序。您可以在桌面上创建一个空文件夹（您可以随意命名。我将其命名为 testapp），然后在 IDE 中打开它并创建一个名为 client 的文件夹。在 client 文件夹中，我们只需创建两个 HTML 文件。一个名为 Login，另一个名为 signup。您应该看到类似这样的内容：在 login.html 中，我们将执行此操作。在 signup.html 中，我们将执行相同的操作，只是我们添加了一个带有name“fullname”属性的额外输入。代码说明：现在查看该图，您会注意到一些事情。表单元素包裹着输入元素，并且表单元素被赋予了属性和属性。这些属性有什么作用？将属性视为一种引导，它将用户的输入或请求引导到正确的服务器端路由。它只是将信息传递到服务器上的适当位置。现在让我们来谈谈方法，它是什么？方法只是描述了用户正在执行的操作类型。有、、、和方法。假设用户想要单击一个按钮来获取一些信息，这将是一个方法，或者如果他们想要从列表中删除一个项目，那么这将是一个方法。如果他们想要更新列表中的所有内容，他们会使用一个方法，但如果他们只想更新列表中选定的字段，他们会使用一个方法。在本教程中，用户正在尝试登录他们的帐户，这意味着他们需要将他们的数据发送到我们的服务器，因此使用了一个方法。如果您还查看输入元素，您将看到我们有一个附加到它的属性。这是做什么的？它用于在提交表单后引用表单数据。

actionmethodactionPOSTGETDELETEPUTPATCHGETDeletePUTPATCHPOSTname

后端设置

对于服务器端，我们将使用 Node.js 和 Express（一个 Node 框架）来启动服务器。那么，让我们开始吧。首先，在根目录中创建一个名为 server 的文件夹。输入，切换到 server 文件夹cd server。你应该会看到类似这样的内容。

注意：你的代码看起来会有点不同。我的文件路径之所以看起来如此，是因为我的 testapp 文件夹位于名为 Learning Materials 的文件夹中。不用担心，这不会影响你的代码。

设置依赖项

由于我们位于服务器文件夹中，因此我们将npm init在终端中输入。只需在所有出现的提示符下按 Enter 键即可。这将创建一个“packge.json”文件。此文件将保存服务器运行所需的依赖项。完成后，我们将运行另一组命令。在终端中输入npm install express cors body-parser nodemon。这些命令会将 Node 模块及其依赖项安装到您的服务器中。您的 package.json 文件应如下所示

设置服务器文件

接下来我们需要创建启动并运行服务器的实际文件。确保你仍在服务器文件夹中。接下来创建一个 index.js 文件。现在我们将在其中添加以下代码。



const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000



// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

//You can use this to check if your server is working
app.get('/', (req, res)=>{
res.send("Welcome to your server")
})


//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

//Start your server on a specified port
app.listen(port, ()=>{
    console.log(`Server is runing on port ${port}`)
})

代码说明：还记得我们之前安装的依赖项吗？我们需要在 index.js 文件中使用它们。我们需要将它们导入到文件中。我们通过引用它们并将它们赋值给一个变量来实现这一点。你可以随意命名变量，但像这里这样命名是比较普遍的做法。



const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

这些依赖项有什么作用？好问题。第一个依赖项是 express。Express 可以轻松地使用 node 创建服务器，而无需键入多行代码。我们首先需要导入它，然后将其分配给一个名为的变量，app这样我们就可以在任何地方轻松使用它。下一个是 body-Parser。它负责在处理传入的请求主体之前，在中间件中解析它。CORS（跨域资源共享）由于我们的前端和后端将位于不同的服务器上，因此我们需要一些允许它们共享数据的东西，而浏览器出于安全原因不允许这样做。我们有一个名为的变量，port其值为3000（您可以为端口指定任意数字）。这就是我们的后端服务器所在的位置。最后一个依赖项是 nodemon。它只是帮助我们检测服务器脚本中所做的更改并更新我们的服务器。可以将其视为后端开发的实时服务器。接下来的几行是我们使用已安装的各种软件包。



// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

下面几行描述了我们的路由。用户将把他们的登录和注册信息发送到这些路由，在这里，我们要么保存信息，要么通过登录/登录来响应用户。



//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

在这里，我们只是告诉 express 在我们之前指定的端口上设置我们的服务器。



app.listen(port, ()=>{
    console.log(`Server is running on port ${port}`)
})

让我们想象一下

因此，为了检查我们的设置是否正常工作，我们需要启动两个服务器。首先，让我们运行客户端。由于我们只有 2 个 HTML 文件，因此您可以使用“live server”运行它。这将在您的浏览器中打开 HTML 文件。接下来，我们需要运行后端服务器。确保您仍在服务器目录/文件夹中，然后键入nodemon index.js。这将在端口 3000 或您指定的任何端口上打开您的服务器。您应该在终端中看到类似这样的内容。记住，我们留下了这个 ```javascript

//您可以使用它来检查您的服务器是否正常工作
app.get('/', (req, res)=>{
res.send("欢迎使用您的服务器")
})

在我们的代码库中测试服务器是否正常运行。只需打开浏览器并输入http://localhost:3000。你可以将 3000 替换为你使用的任何端口号，你应该会在浏览器中看到“欢迎使用你的服务器”的消息。你应该看到这个

测试时间

在开始从前端向服务器/后端发送请求之前，我们需要确保指定信息发送的位置。打开客户端文件夹，然后单击“打开”signup.html 和 login.html。记住action我们之前描述的表单元素上的属性，我们将添加http://localhost:3000/signup，它将指向我们的服务器注册路由。signup.html 应该有这个
，login.html 应该有这个。现在，您可以转到 signup.html 页面或 login.html 页面，在输入框中输入一些信息，例如这样，按回车键，您在前端输入的任何内容都会显示在您的终端中，例如这样