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.js和npm。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，导入messages 消息：

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并添加以下代码：

      
Welcome to our Book Club!>/h1>

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

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文件中，添加一个带有单个输入字段和一个提交按钮的表单：

    Submit

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

第 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 请求

现在，创建一个新的节点来处理app.js文件中的 POST 请求：

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 请求的更新处理程序将提交book 值添加到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!');});

此中间件函数有4个参数，而不是平常的3个（req、res、next）。此时只要应用程序出现错误，就会调用此函数。

步骤 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，并添加以下代码：

        
<%= message %>    
                Submit    
    
Submitted Books:    
        <% books.forEach(function(book) { %>            
<%= book %>        <% }); %>    

占位<%= 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/路由处理程序以将书籍数组（array）传递给index.ejs：

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

步骤 7：更新返回路由

现在是时候运行该应用程序并查看其运行情况了。我们可以通过在终端中运行以下命令来启动服务器：

node app.jsServer is running at http://localhost:3000

你应该会在终端中看到这样一条消息。

或者，你也可以通过向package.json文件中添加脚本来简化启动过程：

现在无需运行node app.js，而是可以直接调用npm start：

npm start

结语

恭喜您！我们已经使用 Node.js 和 Express.js 构建了一个全新 Web 应用程序。此应用程序提供静态文件处理、处理不同的路由、使用中间件等基本功能。

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

希望本指南对各位有所帮助，请点赞转发。祝愿您编码愉快！

作者：万能的大雄