初识 Node.js
回顾与思考
浏览器中的 JavaScript 的组成部分
![](https://img-blog.csdnimg.cn/direct/751f794808ef466ab9e4f6e7e5d76a8a.png)
为什么 JavaScript 可以在浏览器中被执行
![](https://img-blog.csdnimg.cn/direct/63fbe4d9fd344f5bb5483c8e18953d00.png)
为什么 JavaScript 可以操作 DOM 和 BOM
![](https://img-blog.csdnimg.cn/direct/5591e8af4c2a4171a9517fcb8f8d7a7a.png)
浏览器中的 JavaScript 运行环境
![](https://img-blog.csdnimg.cn/direct/5fc76c06ff8b40558efca5da29d29d81.png)
思考:JavaScript 能否做后端开发
Node.js 简介
1. 什么是 Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js 是 一个基于 Chrome V8 引擎的 JavaScript 运行环境 。
Node.js 的官网地址: https://nodejs.org/zh-cn/
2. Node.js 中的 JavaScript 运行环境
3. Node.js 可以做什么
Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。然而,基于 Node.js 提供的这些基础能,很多强大
的工具和框架如雨后春笋,层出不穷,所以学会了 Node.js ,可以让前端程序员胜任更多的工作和岗位:
① 基于 Express 框架(
http://www.expressjs.com.cn/
),可以快速构建 Web 应用
② 基于
Electron
框架(
https://electronjs.org/
),可以构建跨平台的桌面应用
③ 基于 restify 框架(
http://restify.com/
),可以快速构建 API 接口项目
④ 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…
总之:Node.js 是
大前端时代
的“大宝剑”,有了 Node.js 这个超级 buff 的加持,前端程序员的
行业竞争力
会越来越强!
4. Node.js 好学吗
好学!
会 JavaScript,就能学会 Node.js!!!
4. Node.js 怎么学
浏览器中的 JavaScript 学习路径:
JavaScript 基础语法 + 浏览器内置 API(DOM + BOM) + 第三方库(jQuery、art-template 等)
Node.js 的学习路径:
JavaScript 基础语法
+
Node.js 内置 API 模块
(fs、path、http等)+
第三方 API 模块
(express、mysql 等)
Node.js 环境的安装
如果希望通过 Node.js 来运行 Javascript 代码,则必须在计算机上安装 Node.js 环境才行。
安装包可以从 Node.js 的官网首页直接下载,进入到 Node.js 的官网首页(
https://nodejs.org/en/
),点击
绿色的按钮,下载所需的版本后,双击直接安装即可。
![](https://img-blog.csdnimg.cn/direct/70e11f7345b84253a1172ab2542cebe2.png)
1.区分 LTS 版本和 Current 版本的不同
① LTS 为长期稳定版,对于
追求稳定性
的
企业级项目
来说,推荐安装 LTS 版本的 Node.js。
② Current 为新特性尝鲜版,对
热衷于尝试新特性
的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本中可
能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用 Current 版本的 Node.js。
2. 查看已安装的 Node.js 的版本号
打开
终端
,在终端输入命令
node –v
后,按下回车键,即可查看已安装的 Node.js 的版本号。
Windows 系统快速打开终端的方式:
使用快捷键(
Windows徽标键
+
R
)打开运行面板,输入
cmd
后直接回车,即可打开终端。
3. 什么是终端
在 Node.js 环境中执行 JavaScript 代码
1. 终端中的快捷键
在 Windows 的 powershell 或 cmd 终端中,我们可以通过如下快捷键,来提高终端的操作效率:
① 使用
↑
键,可以快速定位到上一次执行的命令
② 使用
tab
键,能够快速补全路径
③ 使用
esc
键,能够快速清空当前已输入的命令
④ 输入
cls
命令,可以清空终端
fs 文件系统模块
什么是 fs 文件系统模块
fs 模块
是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求。
例如:
⚫
fs.readFile()
方法,用来
读取
指定文件中的内容
⚫
fs.writeFile()
方法,用来向指定的文件中
写入
内容
如果要在 JavaScript 代码中,使用 fs 模块来操作文件,则需要使用如下的方式先导入它:
![](https://img-blog.csdnimg.cn/direct/75c322ede20745b4889e1cc449bc7e2d.png)
fs 文件系统模块
读取指定文件中的内容
1. fs.readFile()
的语法格式
使用
fs.readFile()
方法,可以读取指定文件中的内容,语法格式如下:
![](https://img-blog.csdnimg.cn/direct/5316586b811d4f15bb1cef91c9c33b9e.png)
参数解读:
⚫
参数
1
:
必选
参数,字符串,表示文件的路径。
⚫
参数
2
:可选参数,表示以什么
编码格式
来读取文件。
⚫
参数
3
:
必选
参数,文件读取完成后,通过回调函数拿到读取的结果。
2. fs.readFile()
的示例代码
以
utf8
的编码格式,读取指定文件的内容,并打印
err
和
dataStr
的值:
![](https://img-blog.csdnimg.cn/direct/455626dec7fa40d0ac241249a2503b84.png)
3.
判断文件是否读取成功
可以判断
err
对象是否为
null
,从而知晓文件读取的结果
![](https://img-blog.csdnimg.cn/direct/c11d3d1f41b34264bc9caae0812017b0.png)
向指定的文件中写入内容
1. fs.writeFile()
的语法格式
![](https://img-blog.csdnimg.cn/direct/3191bc74031846ffab9cf17729e79739.png)
参数解读:
⚫
参数
1
:
必选
参数,需要指定一个
文件路径的字符串
,表示文件的存放路径。
⚫
参数
2
:
必选
参数,表示要写入的内容。
⚫
参数
3
:可选参数,表示以什么格式写入文件内容,默认值是
utf8
。
⚫
参数
4
:
必选
参数,文件写入完成后的回调函数。
2. fs.writeFile()
的示例代码
向指定的文件路径中,写入文件内容:
![](https://img-blog.csdnimg.cn/direct/5d3c522c13484ea7b7a33aabe3acb428.png)
3.
判断文件是否写入成功
可以判断
err
对象是否为
null
,从而知晓文件写入的结果:
![](https://img-blog.csdnimg.cn/direct/239eb8c0fbf046869ad0e715cca71b8e.png)
练习-考试成绩整理
使用
fs
文件系统模块,将素材目录下
成绩
.txt
文件中的考试数据,整理到
成绩
-ok.txt
文件中。
整理前,
成绩
.txt
文件中的数据格式如下:
![](https://img-blog.csdnimg.cn/direct/3969917837df4b11aee96c7f5dca03fe.png)
整理完成之后,希望得到的
成绩
-ok.txt
文件中的数据格式如下:
![](https://img-blog.csdnimg.cn/direct/27ba3ab20103425cb70993d4cb2c6821.png)
核心实现步骤
①导入需要的
fs
文件系统模块
②使用
fs.readFile()
方法,读取素材目录下的
成绩
.txt
文件
③判断文件是否读取失败
④文件读取成功后,处理成绩数据
⑤将处理完成的成绩数据,调用
fs.writeFile()
方法,写入到新文件
成绩
-ok.txt
中
fs模块-路径动态拼接的问题
在使用
fs
模块操作文件时,如果提供的操作路径是以
./
或
../
开头的
相对路径
时,很容易出现路径动态拼接错误的问题。
原因:代码在运行的时候,
会以执行
node
命令时所处的目录
,动态拼接出被操作文件的完整路径。
解决方案:在使用
fs
模块操作文件时,
直接提供完整的路径
,不要提供
./
或
../
开头的相对路径,从而防止路径动态拼接的问题。
![](https://img-blog.csdnimg.cn/direct/7eb0c27e79c1452592e6568399f64e30.png)
path 路径模块
什么是path 路径模块
path
模块
是
Node.js
官方提供的、用来
处理路径
的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理
需求。
例如:
⚫
path.join()
方法,用来
将多个路径片段拼接成一个完整的路径字符串
⚫
path.basename()
方法,用来从路径字符串中,将文件名解析出来
如果要在
JavaScript
代码中,使用
path
模块来处理路径,则需要使用如下的方式先导入它:
![](https://img-blog.csdnimg.cn/direct/ebae368d0b8942b9a404926f4594cb9c.png)
路径拼接
1.
path.join()
的语法格式
使用
path.join()
方法,可以把多个路径片段拼接为完整的路径字符串,语法格式如下:
![](https://img-blog.csdnimg.cn/direct/6750a09215f1478c84827892b83c6812.png)
参数解读:
⚫
...paths <string>
路径片段的序列
⚫
返回值
: <string>
2.
path.join()
的代码示例
使用
path.join()
方法,可以把多个路径片段拼接为完整的路径字符串:
![](https://img-blog.csdnimg.cn/direct/4316d86465424796a712826329655f59.png)
注意:
今后凡是涉及到路径拼接的操作,都要使用
path.join()
方法进行处理
。不要直接使用
+
进行字符串的拼接
获取路径中的文件名
1. path.basename()
的语法格式
使用
path.basename()
方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名,语法格式如下:
![](https://img-blog.csdnimg.cn/direct/694f3e29954043c1862e90eae7560b85.png)
参数解读:
⚫
path <string>
必选参数,表示一个路径的字符串
⚫
ext<string>
可选参数,表示文件扩展名
⚫
返回
: <string>
表示路径中的最后一部分
获取路径中的文件名
1. path.basename()
的语法格式
使用
path.basename()
方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名,语法格式如下:
![](https://img-blog.csdnimg.cn/direct/44a24ed0cc01480c8926010005b08361.png)
参数解读:
⚫
path <string>
必选参数,表示一个路径的字符串
⚫
ext<string>
可选参数,表示文件扩展名
⚫
返回
: <string>
表示路径中的最后一部分
2. path.basename()
的代码示例
使用
path.basename()
方法,可以从一个文件路径中,获取到文件的名称部分:
![](https://img-blog.csdnimg.cn/direct/00982efd1bca4078b322c62196f56e9b.png)
获取路径中的文件扩展名
1. path.extname()
的语法格式
使用
path.extname()
方法,可以获取路径中的扩展名部分,语法格式如下:
![](https://img-blog.csdnimg.cn/direct/ff3225df31f6417384c4cb6e9e3ab6b0.png)
参数解读:
⚫
path <string>
必选参数,表示一个路径的字符串
⚫
返回
: <string>
返回得到的扩展名字符串
2. path.extname()
的代码示例
使用
path.extname()
方法,可以获取路径中的扩展名部分:
![](https://img-blog.csdnimg.cn/direct/d1e7d888d40143cc86f72df2c29b1a9f.png)
综合案例-时钟案例
1.
案例要实现的功能
![](https://img-blog.csdnimg.cn/direct/2c40a1bc1303449ab0803fcfec3418d9.png)
2.
案例的实现步骤
①创建两个正则表达式,分别用来匹配
和
<>>
标签
②使用
fs
模块,读取需要被处理的
HTML
文件
③自定义
resolveCSS
方法,来写入
index.css
样式文件
④自定义
resolveJS
方法,来写入
index.js
脚本文件
⑤自定义
resolveHTML
方法,来写入
index.html
文件
步骤
1 -
导入需要的模块并创建正则表达式
![](https://img-blog.csdnimg.cn/direct/9080f46e10124efaa16603c609c5edde.png)
步骤
2 -
使用
fs
模块读取需要被处理的
html
文件
![](https://img-blog.csdnimg.cn/direct/b2d07eedd0e44a62ac31c8fa4ca9dbcd.png)
步骤
3
–自定义
resolveCSS
方法
![](https://img-blog.csdnimg.cn/direct/e2e4298d0cda4f938cda4aea8a4c28fd.png)
步骤
4
–自定义
resolveJS
方法
![](https://img-blog.csdnimg.cn/direct/4b547c23b9164424a2eed65ac58f891e.png)
步骤
5
–自定义resolveHTML方法
![](https://img-blog.csdnimg.cn/direct/c5af8da005af49dc8fb78f5300d24ed3.png)
案例的
两个注意点
①
fs.writeFile()
方法只能用来创建文件,不能用来创建路径
②重复调用
fs.writeFile()
写入同一个文件,新写入的内容会覆盖之前的旧内容
http 模块
什么是http 模块
回顾:什么是
客户端
、什么是
服务器
?
在网络节点中,负责消费资源的电脑,叫做客户端;
负责对外提供网络资源
的电脑,叫做服务器。
http
模块
是
Node.js
官方提供的、用来
创建
web
服务器
的模块。通过
http
模块提供的
http.createServer()
方法,就
能方便的把一台普通的电脑,变成一台
Web
服务器,从而对外提供
Web
资源服务。
如果要希望使用
http
模块创建
Web
服务器,则需要先导入它:
![](https://img-blog.csdnimg.cn/direct/6213dda122344803b1a3df4e6a1f2f08.png)
进一步理解http 模块的作用
服务器和普通电脑的
区别
在于,服务器上安装了
web
服务器软件
,例如:
IIS
、
Apache
等。通过安装这些服务器软件,就能把一台普通的电脑变成一台web
服务器。
在
Node.js
中,我们
不需要使用
IIS
、
Apache
等这些
第三方
web
服务器软件
。因为我们可以基于
Node.js
提供的http 模块,
通过几行简单的代码,就能轻松的手写一个服务器软件
,从而对外提供
web
服务。
服务器相关的概念
1. IP
地址
IP
地址
就是互联网上
每台计算机的唯一地址
,因此
IP
地址具有唯一性。如果把“个人电脑”比作“一台电话”,那么“
IP
地
址”就相当于“电话号码”,只有在知道对方
IP
地址的前提下,才能与对应的电脑之间进行数据通信。
IP
地址的格式:通常用“
点分十进制
”表示成(
a.b.c.d
)的形式,其中,
a,b,c,d
都是
0~255
之间的十进制整数。例如:用
点分十进表示的
IP
地址(
192.168.1.1
)
注意:
①互联网中每台
Web
服务器,都有自己的
IP
地址
,例如:大家可以在
Windows
的终端中运行
ping
www.baidu.com
命
令,即可查看到百度服务器的
IP
地址。
②在开发期间,自己的电脑既是一台服务器,也是一个客户端,为了方便测试,可以在自己的浏览器中输入
127.0.0.1 这个IP
地址,就能把自己的电脑当做一台服务器进行访问了。
2.
域名
和
域名服务器
尽管
IP
地址能够唯一地标记网络上的计算机,但
IP
地址是一长串数字,
不直观
,而且
不便于记忆
,于是人们又发明了另一套
字符型
的
地址方案
,即所谓的
域名(
Domain Name
)地址
。
IP
地址
和
域名
是
一一对应的关系
,这份对应关系存放在一种叫做
域名服务器
(DNS
,
Domain name server)
的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,
域名服务器就是提供
IP
地址和域名
之间的转换服务的服务器
。
注意:
①单纯使用
IP
地址,互联网中的电脑也能够正常工作。但是有了域名的加持,能让互联网的世界变得更加方便。
②在开发测试期间,
127.0.0.1
对应的域名是
localhost
,它们都代表我们自己的这台电脑,在使用效果上没有任何区别。
3.
端口号
计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖
送到你的手中。
同样的道理,在一台电脑中,可以运行成百上千个
web
服务。每个
web
服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给
对应的
web
服务
进行处理
![](https://img-blog.csdnimg.cn/direct/de21f1c8953f4a80ac2e744bc38b6e9d.png)
注意:
①每个端口号不能同时被多个
web
服务占用。
②在实际应用中,
URL
中的
80
端口可以被省略
。
创建最基本的web 服务器
1.
创建
web
服务器的基本步骤
①导入
http
模块
②创建
web
服务器实例
③为服务器实例绑定
request
事件,
监听客户端的请求
④启动服务器
步骤
1 -
导入
http
模块
如果希望在自己的电脑上创建一个
web
服务器,从而对外提供
web
服务,则需要导入
http
模块:
![](https://img-blog.csdnimg.cn/direct/5276c9a09a894ca991b3dce3eb09f217.png)
步骤
2 -
创建
web
服务器实例
调用
http.createServer()
方法,即可快速创建一个
web
服务器实例
![](https://img-blog.csdnimg.cn/direct/f755226e9edc4142a07359882ac546ad.png)
步骤
3 -
为服务器实例绑定
request
事件
![](https://img-blog.csdnimg.cn/direct/07ea36b9cb834e5a86550c80f6bb3718.png)
步骤
4 -
启动服务器
调用服务器实例的
.listen()
方法,即可启动当前的
web
服务器实例
![](https://img-blog.csdnimg.cn/direct/b3303ce48dde4df9b47cfa6d19409778.png)
req
请求对象
只要服务器接收到了客户端的请求,就会调用通过
server.on()
为服务器绑定的
request
事件处理函数
。如果想在事件处理函数中,
访问与客户端相关的
数据
或
属性
,可以使用如下的方式:
![](https://img-blog.csdnimg.cn/direct/3b7f1ae54c8745d28b15c99b3709aa3a.png)
res
响应对象
在服务器的
request
事件处理函数中,如果想
访问与服务器相关的
数据
或
属性
,可以使用如下的方式:
![](https://img-blog.csdnimg.cn/direct/22fce402254243408efc5a7f77c4e1ea.png)
解决
中文乱码
问题
当调用
res.end()
方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动
设置内容的编码格式
:
![](https://img-blog.csdnimg.cn/direct/9f772de1e8f14018bed5e0b5caec55d8.png)
根据不同的url 响应不同的html 内容
1.
核心实现步骤
①获取
请求的
url
地址
②设置
默认的响应内容
为
404 Not found
③判断用户请求的是否为
/
或
/index.html
首页
④判断用户请求的是否为
/about.html
关于页面
⑤设置
Content-Type
响应头
,防止中文乱码
⑥使用
res.end()
把内容响应给客户端
2.
动态响应内容
![](https://img-blog.csdnimg.cn/direct/306987aa87a54382bdef9a2ac7e926d5.png)
案例-实现clock 时钟的web 服务器
1.
核心思路
把文件的
实际存放路径
,
作为
每个资源的
请求
url
地址
。
![](https://img-blog.csdnimg.cn/direct/eaafe03056ad46cca97fce2519f60651.png)
2.
实现步骤
①导入需要的模块
②创建基本的
web
服务器
③将资源的请求
url
地址映射为文件的存放路径
④读取文件内容并响应给客户端
⑤优化资源的请求路径
步骤
1 -
导入需要的模块
![](https://img-blog.csdnimg.cn/direct/8830a340c98a4eb19b9424b48fec3307.png)
步骤
2 -
创建基本的
web
服务器
![](https://img-blog.csdnimg.cn/direct/d68fa2172105490597d980fc89b8ff90.png)
步骤
3 -
将资源的请求
url
地址映射为文件的存放路径
![](https://img-blog.csdnimg.cn/direct/254a331d257545e9a7551157d83fdb26.png)
步骤
4 -
读取文件的内容并响应给客户端
![](https://img-blog.csdnimg.cn/direct/fbf7120f5c57494499f5ee1e3b735dbb.png)
步骤
5
–优化资源的请求路径
![](https://img-blog.csdnimg.cn/direct/2da8b4c5d716402d843bdca53769d700.png)