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

翻译 | 《JavaScript Everywhere》第3章 具有Node和Express的Web应用程序(^_^)_第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日

书封面:

翻译 | 《JavaScript Everywhere》第3章 具有Node和Express的Web应用程序(^_^)_第2张图片

目录

  • 前言
  • 第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

翻译 | 《JavaScript Everywhere》第3章 具有Node和Express的Web应用程序(^_^)_第3张图片

你可能感兴趣的