如何使用 Node.js 构建简单的 Web 服务器

文摘   2024-06-12 07:34   广东  

Node.js 是一个开源、跨平台的 JavaScript 运行时环境,允许开发人员在浏览器之外构建服务器端应用程序。它可用于构建性能极佳的关键任务生产应用程序。在本实用指南中,我们将介绍如何使用 Node.js 创建 Web 服务器。

关键要点

  • 使用 Node.js 实现简单的 Web 服务器。本指南介绍如何使用 Node.js 设置和部署 Web 服务器。它逐步讲解了每个步骤,包括项目初始化、Express.js 集成和许多基本功能,为任何 Node.js 新手提供了坚实的基础。

  • 构建动态 Web 应用程序。本指南涵盖了广泛的功能,例如处理表单、响应用户请求和动态提供网页,这些功能对于使您的 Web 应用程序具有交互性和吸引力至关重要。

  • 探索 Node.js 功能。深入了解 Node.js 的 Web 开发功能,包括如何处理静态文件、处理错误和实现表单提交。本指南提供了使用 Node.js 构建功能丰富的 Web 应用程序的实用方法。

第 1 部分:项目设置和安装

步骤 1:安装 Node.js 和 npm

要开始构建我们的 Web 应用程序,请确保您的系统上安装了Node.jsnpm。Node.js提供 JavaScript 运行时环境,而 npm 是 Node.js 的包管理器。您可以从官方网站下载并安装 Node.js。

为了确保 Node.js 和 npm 正确安装,请打开终端并运行以下命令:

node -vnpm -v

第 2 步:初始化新的 Node.js 项目

通过在终端中运行以下命令为您的项目创建一个新目录并初始化一个新的 Node.js 项目:

mkdir book-clubcd book-clubnpm init -y

此命令package.json将为你的项目创建一个文件。它将包含有关项目的元数据,包括其依赖项:

{   "name": "book-club",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": { "test":   "echo \"Error: no test specified\" && exit 1" },   "keywords": [],   "author": "",   "license": "ISC" }

步骤3:安装Express.js

Express.js是 Node.js 的一个流行 Web 框架,具有构建 Web 和移动应用程序的功能。以下命令将安装 Express.js 并将其作为依赖项添加到文件中package.json

npm install express

第 2 部分:设置 Express 服务器

步骤 1:为服务器创建一个新文件

现在项目已设置完毕,请app.js在项目目录中创建一个名为的新文件。此文件将包含 Express 服务器的代码。

第 2 步:导入 Express.js

在文件顶部app.js,导入 Express.js 模块:

const express = require('express');

步骤 3:创建 Express 应用程序

接下来,创建一个 Express 应用程序的实例:

const app = express();

express()函数是 Express 模块导出的顶级函数。它创建一个 Express 应用程序,我们将其分配给变量app

步骤 4:定义路线

定义路径的路线,/并在访问时显示简单的消息:

app.get('/', (req, res) => { res.send('Hello World!');});

这里,app.get()是一个函数,它告诉服务器在对特定路径(在本例中为)发出 GET 请求时该做什么/。此函数接受两个参数:路径和接受请求和响应的回调函数。

步骤 5:启动服务器

最后,让我们在端口 3000 启动服务器:

const port = 3000;app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`);});

app.listen()函数启动服务器并使其监听指定端口上的请求。

第 3 部分:构建应用程序功能

现在我们已经设置好了 Express 服务器,让我们通过创建一些不同的路由来开始构建应用程序的功能。

步骤 1:创建新的消息文件

在您的项目目录中,创建一个名为 的新文件messages.js。此文件将包含您的服务器将作为响应发送的消息:

module.exports = { home: 'Welcome to our Book Club!', about: 'About Us', notFound: '404 Not Found'};

第 2 步:将消息导入服务器文件

在文件顶部app.js,导入消息:

const messages = require('./messages');

步骤 3:在路线中使用消息

现在,在路线中使用这些消息:

app.get('/', (req, res) => { res.send(messages.home);});app.get('/about', (req, res) => { res.send(messages.about);});app.use((req, res) => { res.status(404).send(messages.notFound);});

这里app.use()是每次向服务器发出请求时都会调用的方法。我们在这里使用它来处理所有未定义的路由并发送消息404 Not Found

第 4 部分:添加静态文件服务

步骤 1:为静态文件创建一个新目录

创建一个名为 的新目录public。此目录将包含所有静态文件:

mkdir public

第 2 步:添加一些静态文件

为了本指南的目的,让我们添加一个简单的 HTML 文件和一个 CSS 文件。在您的public目录中,创建一个名为的新文件index.html并添加以下代码:

<!DOCTYPE html><html><head>  <title>Book Club</title>  <link rel="stylesheet" type="text/css" href="/styles.css"></head><body>  <h1>Welcome to our Book Club!>/h1></body></html>

styles.css另外,在目录中创建一个名为的新文件public并添加以下代码:

body {  font-family: Arial, sans-serif;}

步骤 3:使用 express.static 提供静态文件

app.js在路由定义之前将以下行添加到文件中:

app.use(express.static('public'));

express.static函数是 Express.js 中的内置中间件函数。它提供静态文件,并将要提供文件的目录名称作为参数。

第 5 部分:处理 POST 请求

步骤 1:添加表单index.html

在您的index.html文件中,添加一个带有单个输入字段和一个提交按钮的表单:

<form action="/submit" method="post">  <input type="text" name="book" placeholder="Enter a book title">  <button type="submit">Submit</button></form>

此表单将向路径发送 POST 请求/submit。请求正文将包含输入字段的值。

第 2 步:安装 body-parser

您需要安装一个名为body-parser的中间件来处理 POST 请求中发送的数据:

npm install body-parser

步骤 3:导入并使用 body-parser

将 body-parser 导入到app.js文件中:

const bodyParser = require('body-parser');app.use(bodyParser.urlencoded({ extended: false }));

bodyParser.urlencoded()函数解析属性下可用的传入请求主体req.body

步骤 4:处理 POST 请求

现在,创建一个新的端点来处理文件中的此 POST 请求app.js

app.post('/submit', (req, res) => {  const book = req.body.book;  console.log(`Book submitted: ${book}`);  res.send(`Book submitted: ${book}`);});

第 6 部分:添加数据存储

在本部分中,我们将向应用程序添加一个简单的数据存储,以存储用户提交的书籍。为简单起见,我们将使用数组来存储数据。

步骤 1:创建数据存储

在文件顶部app.js,创建一个数组来存储书籍:

const books = [];

步骤 2:更新 POST 请求处理程序

更新 POST 请求的处理程序以将提交的书籍添加到books数组中:

app.post('/submit', (req, res) => {    const book = req.body.book;    books.push(book);    console.log(`Book submitted: ${book}`);    res.send(`Book submitted: ${book}`);});

步骤 3:创建查看所有图书的路线

创建一个新的路由处理程序,返回所有已提交的书籍:

app.get('/books', (req, res) => {  res.send(books.join(', '));});

注意:在实际应用中,您可能会将数据存储在数据库中。此时,每次重新启动服务器时,数组中的数据都会丢失。

第 7 部分:添加错误处理

在本部分中,我们将创建一个错误处理程序。 Express.js 提供了一个内置的错误处理程序。 但您也可以创建自己的错误处理中间件。

步骤 1:创建错误处理中间件

在您的app.js文件中,在文件末尾添加以下代码:

app.use((err, req, res, next) => {  console.error(err.stack);  res.status(500).send('Something Went Wrong!');});

此中间件函数有四个参数,而不是通常的三个(reqresnext)。只要应用程序出现错误,就会调用此函数。

步骤 2:使用下一个函数传递错误

如果将参数传递给next()函数,Express.js 将假定它是一个错误,跳过所有后续的中间件函数,并直接转到错误处理中间件函数:

app.post('/submit', (req, res, next) => {  const book = req.body.book;  if (!book) {    const err = new Error('Book title is required');    return next(err);  }  books.push(book);  console.log(`Book submitted: ${book}`);  res.send(`Book submitted: ${book}`);});

此处理程序检查 POST 请求中是否提供了书名。如果没有,它会创建一个新Error对象并将其传递给next函数。这将跳过所有后续中间件函数并直接转到错误处理中间件。

第 8 部分:提供 HTML 页面

在本部分中,我们将修改应用程序以提供 HTML 页面而不是纯文本。这将允许您创建更复杂的用户界面。

步骤 1:安装 EJS

EJS(嵌入式 JavaScript)是一种简单的模板语言,允许您使用纯 JavaScript 生成 HTML 标记:

npm install ejs

第 2 步:将 EJS 设置为视图引擎

在您的app.js文件中,将 EJS 设置为 Express 应用程序的视图引擎:

app.set('view engine', 'ejs');

这告诉 Express 在渲染视图时使用 EJS 作为视图引擎。

步骤 3:创建 views 目录

默认情况下,Express 会查找以您的视图命名的目录views。在您的项目目录中创建此目录:

mkdir views

步骤 4:创建 EJS 视图

在您的views目录中,创建一个名为的新文件index.ejs并添加以下代码:

<!DOCTYPE html><html><head>    <title>Book Club</title></head><body>    <h1><%= message %></h1>    <form action="/submit" method="post">        <input type="text" name="book" placeholder="Enter a book title">        <button type="submit">Submit</button>    </form>    <h2>Submitted Books:</h2>    <ul>        <% books.forEach(function(book) { %>            <li><%= book %></li>        <% }); %>    </ul></body></html>

占位<%= message %>符用于输出消息变量的值。

步骤 5:更新 POST 请求处理程序

更新 POST/submit路由处理程序以将提交的书籍添加到books数组并将用户重定向回主页:

app.post('/submit', (req, res) => {  const book = req.body.book;  books.push(book);  console.log(`Book submitted: ${book}`);  res.redirect('/');});

注意:在 POST 请求后重定向用户是一种很好的做法。这称为Post/Redirect/Get 模式,它可以防止重复提交表单。

步骤 6:更新回家路线

更新 GET/路由处理程序以将书籍传递arrayindex.ejs

app.get('/', (req, res) => {   res.render('index', { message: messages.home, books: books });});

步骤 7:更新回家路线

现在是时候运行该应用程序并查看其运行情况了。

您可以通过在终端中运行以下命令来启动服务器:

node app.js

Server is running at http://localhost:3000您应该会在终端中看到一条消息。

或者,您可以通过向文件添加脚本来简化启动过程package.json

现在,node app.js您无需运行,而是可以调用npm start

npm start

结论

恭喜!您已使用 Node.js 和 Express.js 构建了一个 Web 应用程序。此应用程序提供静态文件、处理不同的路由、使用中间件等。

如果您想亲自尝试一下,或者想要探索代码,请查看此CodeSandbox 演示

使用 Node.js 和 Express.js 可以做很多事情。您可以添加更多路由、连接到不同的数据库、构建 API、使用 WebSockets 创建实时应用程序等等。可能性无穷无尽。

希望本指南对您有所帮助。祝您编码愉快!

常见问题 (FAQ)

如何处理 Node.js Web 服务器中的路由?

您可以使用http 模块通过检查请求对象 URL 手动处理路由。但是,随着应用程序变得越来越复杂,建议使用 Express.js 之类的框架。它可以帮助您以模块化和干净的方式基于 HTTP 方法和 URL 定义路由。

如何在 Node.js 网络服务器中实现实时通信?

Node.js Web 服务器中的实时通信可以使用 WebSockets 实现。socket.io 库因向 Node.js 服务器添加 WebSocket 支持而广受欢迎。它支持客户端和服务器之间的实时、双向、基于事件的通信。

在 Node.js Web 服务器中管理数据库操作的最佳方法是什么?

在 Node.js 中管理数据库操作的最佳方法是使用 ORM(对象关系映射)或 ODM(对象文档映射)工具。它们为数据库交互提供高级抽象,并简化连接池、查询构建和模式验证。
对于 SQL 数据库:SequelizeTypeORM
对于 NoSQL 数据库:MongooseCouchbase

如何在 Express.js 应用程序中全局处理错误?

Express.js 应用程序中的全局错误处理可以通过定义一个带有四个参数的特殊中间件函数来实现:  (err, req, res, next)。此中间件应添加到所有 app.use() 和路由调用之后。在此函数中,您可以记录错误、设置响应状态代码并发回错误消息。

如何确保 Node.js Web 服务器可扩展?

有几种方法可以确保 Node.js Web 服务器的可扩展性:
使用集群模块充分利用多核系统。
优化代码和数据库查询。
实施缓存策略。
使用负载均衡器在多个应用实例之间分配流量。
此外,设计无状态应用程序允许通过根据需要添加更多实例来实现水平扩展。

欢迎关注我,共同探讨学习科技前沿技术资讯,提升认知赚钱能力。


DearMrGao
程序员最新技术,前沿技术资讯
 最新文章