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