使用Node.js构建Web应用程序的步骤 – 预备知识和简单写作 –

1 年 ago
科, 雅
2 minutes

本次的目标

今回的内容是关于Node.js的安装以及对HTTP通讯的大致理解，还有通过简单编写代码建立Node服务器的部分。

安装Node.js

首先，需要确认是否已经安装了node.js。
在终端中输入node -v，如果显示出版本号就表示OK。

$ node -v
v10.11.0

如果无法显示，请从官方网站获取node.js的软件包并安装。
https://nodejs.org/ja/

如果没有特别原因的话，我们应该安装LTS版本。
※LTS代表长期支持，表示这个版本是稳定的，并且将长期提供支持。

试着用Node服务器直接编写

首先，网络页面的显示机制

首先，我们要了解网页是如何显示出来的。简化来说，可以如下解释。

image.png

我们逐个来看吧。

当你输入网址（URL / URI）http://hoge.com时，Web浏览器（如Chrome，Firefox等）会帮你寻找位于hoge.com的服务器。

image.png

如果用现实世界来比喻，就像是在给东京市○○区△△9999-9999发送指令！

网页浏览器会根据输入的地址，也就是URL，向DNS服务器之类的询问并查找名为hoge.com的服务器的位置。

当找到hoge.com的服务器后，会通过该服务器的80号端口开始通信。我不会详细描述，但服务器有很多入口和出口，HTTP通信，也就是HTML交互通信会使用80号出口，请将其视为大致情况。

这就是发送的请求。

image.png

然后，服务器根据该请求信息返回相应的数据。这就是响应。

image.png

这次返回的是HTML文件。
Web浏览器会读取这个信息，并在Web浏览器上以人们易懂的形式展示出来。

image.png

请记住，”请求”和”响应”这个概念将在未来变得更加重要。

让我们来看一下这个请求和响应实际上写了些什么。请在终端输入以下命令。

curl -v [好きなURL]

肯定会出现这样的画面。（从过去的资料中转用）

image.png

请注意请求行和HOST。

GET /scrayping-handson/index.html 
HOST: cha1ra.github.io

GET是一种方法。在HTTP中，有一个叫做方法的规则，用户必须描述他们想要执行的操作。

方法有几种类型。可以参考这些内容。https://qiita.com/r_fukuma/items/a9e8d18467fe3e04068e

这次的GET是指想要获取资源（数据）的意思。
所以，它会返回给你一个HTML文件。

主人是刚才说的地址。

所以，以上的命令文翻译成中文就是这样。

マンションHOGE XXX号室 にある情報をください(GET)
住所： 東京都○○区9999-9999

而另一个需要您注意的是响应中的Content-Type部分。

Content-Type: text/html;

需要在响应中告知返回资源的种类。这篇文章总结了列表！你可以看看：
https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

这次是text/html格式，所以我会返回一个HTML文件，就是这个意思噢！

好吧，在考虑这样的情况下，让我们实际上用Node.js来编写程序试试看。

写Node.js程序

进行npm init

老实说，在这个任务中我们只使用了Node.js的标准模块，所以这项工作是不必要的。我之所以写下这些是为了作为规范要遵循的意思。

现在，我们继续流畅地编写程序。
让我们创建一个喜欢的目录。
（我这次创建了一个名为nodejs_example的目录。）

在终端中，当移动到所创建的目录后，输入以下命令。

$ npm init

这是一个命令，用于为创建node.js项目的初始文件。

虽然会被问到很多不同的问题，像是”告诉我开发者的名字！”或者”给我介绍一下这个应用的概要！”之类的问题，但只是像这次一样进行简单的测试的话，只需要重复按下回车键就可以了。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs_sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/cha1ra/Sites/nodejs/nodejs_express_example/nodejs_sample/package.json:

{
  "name": "nodejs_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

如果完成一切并且生成了名为package.json的文件，那就算是成功了。

$ ll
total 8
-rw-r--r--  1 cha1ra  staff   209B  3 12 16:29 package.json

创建并运行一个名为server.js的文件。

现在，我们终于开始编写代码了。不过，这其实非常简单。
请创建一个名为 server.js 的文件，并尝试按照以下方式进行编写。

const http = require('http')
const server = http.createServer()

server.on('request', function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/plain'})
    res.write('Example Response!')
    res.end()
})
server.listen(3000)
console.log('Server is working on port 3000')

请前往终端将server.js所在的位置，并输入下方命令。

如果屏幕上显示出“服务器正在3000端口上运行”的句子，那就表示成功了。

$ node server.js
Server is working on port 3000

请尝试在当前状态下访问 http://localhost:3000/ 。

image.png

如果出现这样的显示，那就成功了！！！

你做了什么事情？

好吧，突然快速地解释了一下。我想有人会说：“告诉我你做了什么！”但实际上，基本上解释已经结束了。

让我们重新看一下server.js的代码。

写下该要求的文档

const http = require('http')
const server = http.createServer()

我正在使用这个说明来调用Node.js的HTTP接口。
https://nodejs.org/api/http.html
在这个模块中，我正在使用其中的createServer。
https://nodejs.org/api/http.html#http_http_createserver_options_requestlistener

$ node hoge.js

当以该方式运行文件时，它会读取require部分的内容。

设置请求和响应

在接下来的部分中，我们将在server.on…部分执行之前解释设置的响应。

server.on('request', function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/plain'})
    res.write('Example Response!')
    res.end()
})

res是Response的缩写。
Content-type不是HTML，而是纯文本，所以被指定为text/plain。

server.listen(3000)
console.log('Server is working on port 3000')

最后，我们使用listen来指定端口号(服务器所具有的门的编号)，将其设置为3000。这样我们就可以访问http://localhost:3000/了！

顺便说一下，如果对于“localhost是什么？”感到困惑的话，我想在这个链接中你能够明白。

我希望下一步能够使用express-generate来总结创建Web应用程序。

请参考以下链接来了解有关Node.js的HTTP服务器的详细信息：https://ja.stackoverflow.com/questions/44422/node-js%E3%81%AEhttp-server-on%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

✖
广告
将在 10 秒后关闭
bannerAds