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

码农天地 - 2020-11-21 07:47:07

---

翻译 | 《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。

译者语和书籍详情

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

有看的么？有看的么？有看的么？

有的话，可以点个赞么？让我知道有人在看。(ಥ_ಥ)

英文书名：《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

中文译名：《随处可见的JavaScript:使用GraphQL、React、React Native和Electron构建跨平台应用程序》

作者：Adam D. Scott

译者：毛毛

出版时间：2020年2月6日。

翻译时间：2020年10月10日

书封面：

目录前言第1章 我们的开发环境第2章 API简介第3章 具有Node和Express的Web应用程序第4章 我们的第一个GraphQL API第5章 数据库第6章 CRUD操作第7章 用户帐户和身份验证第8章 用户操作第9章 详细信息第10章 部署我们的API第11章 用户界面和React第12章 使用React构建Web客户端第13章 设置应用程序样式第14章 使用Apollo Client第15章 Web身份验证和状态第16章 创建，读取，更新和删除操作第17章 部署Web应用程序第18章 带Electron的桌面应用程序第19章 将现有的Web应用程序与Electron集成第20章 Electron部署第21章 使用React Native创建移动应用程序第22章 移动应用程序shell第23章 GraphQL和React Native第24章 移动应用程序认证第25章 移动应用程序发布后记附录A.在本地运行API附录B.在本地运行Web App

Tags 标签