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

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

写在最前面

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

为了提升你们的阅读体验，对语句的结构和内容略有调整。若是发现本文中有存在瑕疵的地方，或者您有任何意见或者建议，能够在评论区留言，或者加个人微信：code_maomao，欢迎相互沟通交流学习。shell

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦数据库

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

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

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

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

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

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

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