翻译 | 《JavaScript Everywhere》第3章 具有Node和Express的Web应用程序（^_^）

翻译 | 《JavaScript Everywhere》第3章 具有Node和Express的Web应用程序

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者您有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

第3章具有Node和Express的Web应用程序

在实现我们的API之前，我们将构建一个基本的服务器端Web应用程序，以作为我们API后端的基础。我们将使用Express.js框架，“ Node.js的极简主义Web框架”，意味着它没有很多功能，但是可高度配置。我们将使用Express.js作为API服务器的基础，但是Express也可以用于构建功能齐全的服务器端Web应用程序。

用户界面（例如网站和移动应用程序）在需要访问数据时与Web服务器进行通信。这些数据可以是从Web浏览器中呈现页面所需的HTML到用户搜索结果的任何数据。客户端接口使用HTTP与服务器通信。数据请求从客户端通过HTTP发送到服务器上运行的Web应用程序。然后，Web应用程序再次通过HTTP处理请求并将数据返回给客户端。

在本章中，我们将构建一个小的服务器端Web应用程序，这将成为我们API的基础。为此，我们将使用Express.js框架构建一个发送基本请求的简单Web应用程序。

Hello World

现在你已经了解了服务器端Web应用程序的基础，让我们开始吧。在 我们的API项目的 src目录中，创建一个名为index.js的文件，并添加以下内容：

const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000, () => console.log('Listening on port 4000!'));

在本例中，首先我们需要express依赖项并使用导入的express .js模块创建app对象。

然后，我们使用app对象的get方法指引我们的应用程序在用户访问根URL(/)时发送一个响应“Hello World”。

最后，我们指引应用程序在端口4000上运行。这将允许我们通过URL http://localhost:4000本地查看应用程序。

现在要运行应用程序，在你的终端输入以下命令node src/index.js。

完成此操作后，你应该会在终端中看到一个日志，它在端口4000上读取侦听。

如果是这样，你应该能够打开一个浏览器窗口在http://localhost:4000看到结果

图3 - 1。

图3-1。浏览器中我们的Hello World服务器代码的结果

Nodemon

现在，假设这个例子的输出没有恰当地表达我们的兴奋之情。我们希望更改代码以便在响应中添加感叹号。继续执行该操作，将res.send的值更改为Hello World!!现在完整的一行应该是:

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

如果转到Web浏览器并刷新页面，则会注意到输出未更改。这是因为我们对Web服务器所做的任何更改都要求我们重新启动它。为此，请切换回你的终端，然后按Ctrl + C来停止服务器。

现在，通过再次键入来重新启动它node index.js。

现在，当你切换回到浏览器并刷新页面时，应该会看到更新后的响应。

你可以想象，为每次更改而停止并重新启动我们的服务器会变得多么乏味。

谢天谢地，我们可以使用Node包nodemon在发生更改时自动重新启动服务器。如果你看到这个项目的package.json文件，可以在scripts对象中看到一个dev命令，该命令指示nodemon监视index.js文件：

"scripts": {
    
      ...  "dev": "nodemon src/index.js"  ...}

package.json Scripts

scripts对象中还有一些其他的辅助命令。我们将在以后的章节中进行探讨。

现在，要从终端启动应用程序，请输入：

npm run dev

切换到浏览器并刷新页面，你会看到一切正常。为了确认nodemon 自动重启服务器，让我们再次更新我们的 res.send 值，使其显示为：

res.send('Hello Web Server!!!')

现在，你应该能够在浏览器中刷新页面并看到更新，而无需手动重新启动服务器了。

扩展端口选项

当前，我们的应用程序在端口4000上运行。这对于本地开发非常有用，但是在部署应用程序时，我们需要灵活地将其设置为其他端口号。让我们采取步骤来立即对此进行更换。我们将从添加一个port变量开始 ：

const port = process.env.PORT || 4000;

此更改将使我们能够在Node环境中动态设置端口，但在未指定端口的情况下退回到端口4000。现在让我们调整

app.listen 代码以使用此更改并使用console.log来输出正确的端口：

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

现在，我们的最终代码应为：

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

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

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

这样，我们现在了解了可以启动并运行Web服务器代码的基础知识。如果测试一切正常的话，请确保控制台中是否没有错误，然后在http://localhost:4000重新加载Web浏览器 。

结论

服务器端Web应用程序是API开发的基础。在本章中，我们使用Express.js框架构建了一个基本的Web应用程序。在开发基于Node的Web应用程序时，你可以选择多种框架和工具。Express.js的灵活性、社区支持力度和作为项目的成熟度是一个不错的选择。在下一章中，我们将把我们的Web应用程序变成一个API。

译者语和书籍详情

如果有理解不到位的地方，欢迎大家纠错。如果觉得还可以，麻烦您点赞收藏或者分享一下，希望可以帮到更多人。