学习目标
- 能够知道什么是 Node.js
- 能够知道 Node.js 可以做什么
- 能够说出 Nodejs 中的 JavaScript 的组成部分
- 能够使用fs模块读写操作文件
- 能够使用path模块处理路径
- 能够使用http 模块写一个基本的 web 服务器
1.初始node.js
1.1 node.js简介
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Nodejs 的官网地址: https://nodejs.org/en
1.2 node.js的运行环境
①浏览器是JavaScript的前端运行环境
②Node.js是JavaScript的后端运行环境
③在Node.js中不能调用DOM、BOM等浏览器内置API
1.3 Node.js 可以用来做什么?
①基于Express 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用
②基于 Electron 框架(https://electronjs.org/),可以构建跨平台的桌面应用
③基于restify 框架(http://restify.com/),可以快速构建API 接口项目
④读写和操作数据库、创建实用的命令行工具辅助前端开发、etc...
1.4 Node.js 环境的安装
1.4.1 区分 LTS 版本和 Current 版本的不同
- DLTS为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装 LTS 版本的 Node,js。
- Curent 为新特性尝鲜版,对热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本中可2能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用Current 版本的 Nodejs。
1.4.2 查看已安装的 Node.js 的版本号
打开终端,在终端输入命令 node -v 后,按下回车键,即可查看已安装的 Node.js 的版本号
Windows 系统快速打开终端的方式
使用快捷键(Windows徽标键 + R)打开运行面板,输入 cmd 后直接回车,即可打开终端。
运行node程序:node 文件名称
1.4.3 什么是终端
终端(英文: Terminal) 是专门为开发人员设计的,用于实现人机交互的一种方式。作为一名合格的程序员,我们有必要识记一些常用的终端命令,来辅助我们更好的操作与使用计算机。
终端中的快捷键:
在Windows的 powershell 或cmd 终端中,我们可以通过如下快捷键,来提高终端的操作效率:
- 使用箭↑键,可以快速定位到上一次执行的命令
- 使用 tab 键,能够快速补全路径
- 使用 esc键,能够快速清空当前已输入的命令
- 输入 cls 命令,可以清空终端
2.fs文件系统模块
2.1 什么是fs文件系统模块
fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求.例如:
- fs.readFile0 方法,用来读取指定文件中的内容
- fs.writeFile0 方法,用来向指定的文件中写入内容
如果要在JavaScript代码中,使用fs 模块来操作文件,则需要使用如下的方式先导入它:
const fs = require('fs')
2.2 读取指定文件中的内容
2.2.1 fs.readFile()的语法格式
fs.readFile(path[, options],callback)
参数解读:
- path:必选参数,字符串,表示文件的路径
- options:可选参数,表示以什么编码格式来读取文件
- callback:必选参数,文件读取完成后,通过回调函数拿到读取的结果
2.2.2 fs.readFile()的示例代码
const fs = require('fs')
fs.readFile('./eg.js','utf8',function(err,result){
console.log('err',err)
console.log('result',result)
})
2.2.3 判断文件是否读取成功
可以判断err对象是否为null,从而知晓文件读取的结果
const fs = require('fs')
fs.readFile('./eg.js', 'utf8', function (err, result) {
if (err) {
return console.log('读取文件失败!', err.message)
}
console.log('读取文件成功!内容是', result)
})
2.3 向指定文件中写入内容
2.3.1 fs.writeFile()的语法格式
fs.writeFile(file,data[,option],callback)
参数解读:
- 参数1:必选参数,需要指定一个文件路径的字符串,表示文件的存放路径
- 参数2:必选参数,表示要写入的内容。
- 参数3:可选参数,表示以什么格式写入文件内容,默认值是utf8。
- 参数4:必选参数,文件写入完成后的回调函数
2.3.2 fs. writeFile()的示例代码
const fs = require('fs')
fs.writeFile('./eg2.js','你好啊!',function(err){
if(err){
return console.log('文件写入失败!'+err.message)
}
console.log('文件写入成功');
})
2.4 练习-考试成绩整理
要求:使用fs文件系统模块,将素材目录下成绩.txt的文件中的考试数据,整理到成绩-ok.txt文件中
核心实现步骤
①需要的fs文件系统模块
②使用fs.readFile()方法,读取素材目录下的 成绩txt 文件
③判断文件是否读取失败
④文件读取成功后,处理成绩数据
⑤将处理完成的成绩数据,调用 fs.writeFile() 方法,写入到新文件 成绩-ok.txt 中
代码:(视频中处理数据是先将字符串转成数组然后循环数组将=替换成:(中文),下面的代码是按照我的思路完成的)
.txt文件内容:
const fs = require('fs')
fs.readFile('./成绩.txt','utf8', function (err, result) {
if (err) {
return console.log('文件读取失败:' + err.message)
}
console.log("文件读取成功,内容是:" + result)
//全局替换-将等号换成:
let newStr = result.replace(/=/g,':')
//将字符串以空格的形式分割成数组
let arrOld = newStr.split(' ')
console.log("arrOld--1", arrOld)
//将数组处理成可换行的字符串
let newArr = arrOld.join('\r\n')
console.log("newArr--2", newArr)
fs.writeFile('./成绩-ok.txt',newArr,'utf8',function(err){
if(err){
return console.log('文件写入失败!'+err.message);
}
console.log('文件写入成功');
})
})
2.5 fs 模块 - 路径动态拼接的问题
在使用fs 模块操作文件时,如果提供的操作路径是以./或../开头的相对路径时,很容易出现路径动态拼接错误的问题.
原因:代码在运行的时候,会以执行 node 命令时所处的目录,动态拼接出被操作文件的完整路径。
这个原因我这里描述的或许不太懂,可以直接看解决方法,按照正确的操作文件路径的方法就不会出现问题
方法一:直接提供一个完整的文件存放路径,但是移植性差,维护性差
const fs = require('fs')
fs.readFile('C:\\Usersllescookl\Desktopl Node.js基\day1\lcodel\filesll1.txt', 'utf8', function(err, datastr) {
if (err){
return console.log('读取文件失败!' + err.message)
}
console.log('读取文件成功!'+ dataStr)
})
方法二:_ _dirname:表示当时文件所处的目录
const fs = require('fs')
fs.readFile(__dirname+'/files/1.txt', 'utf8', function(err, datastr) {
if (err){
return console.log('读取文件失败!' + err.message)
}
console.log('读取文件成功!'+ dataStr)
})
3.path路径模块
3.1 什么是path路径模块
path模块是Node.js官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。
- path.join()方法,用来将多个路径片段拼接成一个完整的路径字符串
- path.basename() 方法,用来从路径字符串中,将文件名解析出来
如果要在JavaScript代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它:
const path = require( 'path' )
3.2 路径拼接
3.2.1 path.join()的语法格式
path.join([...paths])
参数解读:
- ...paths<string>路径片段的序列
- 返回值:<string>
代码示例:
使用path.join()方法可以把多个路径片段拼接为完整的路径字符串
3.2.2 示例代码
示例一:
const path = require('path')
//注意: ../会抵消前面的路径
let pathStr = path.join('/a','/b/c','../','./d','e')
console.log('pathStr',pathStr);//输出 \a\b\d\e
示例二:
const path = require('path')
//输出的是文件全路径
let pathStr = path.join(__dirname,'./eg.js')
console.log('pathStr',pathStr);//输出 D:\study-resource\nodejs_base_knowledge\eg.js
注意:今后凡是遇到路径拼接的操作都要用path.join()方法进行处理。不要直接使用+进行字符串拼接。
3.2.3读取文件使用path.join()拼接示例代码
const path = require('path')
const fs = require('fs')
fs.readFile(path.join(__dirname,'./eg.js'),'utf8',(err,result)=>{
if(err){
return console.log('读取文件失败!'+err.message)
}
console.log('读取文件成功!内容是'+result);
})
3.3 获取路径中的文件名
3.3.1 path.basename()语法格式
使用path.basename()方法,可以获取路径中的最后一部分,经常会用这个方法获取路径中的文件名,语法格式如下:
paht.basename(path[,ext])
参数解读:
- path:<string>必选参数,表示一个路径的字符串
- ext:<string>可选参数,表示文件扩展名
- 返回<string>表示路径中的最后一部分
3.3.2 path.basename()示例代码
const path = require('path')
const fPath = '/files/code/index.html'
let fName = path.basename(fPath)
console.log(fName);//输出:index.html
let name = path.basename(fPath,'.html')
console.log(name);//输出:index
3.4 获取路径中的文件扩展名
3.4.1 path.extname()的语法格式
path.extname(path)
参数解读:
- path:<string>必选参数,表是一个路径的字符串
- 返回:<string> 返回得到的扩展名字符串
3.4.2 path.extname()代码示例
const path = require('path')
let fPath = '/files/code/index.css'
let extName = path.extname(fPath)
console.log(extName) //输出:.css
3.5 综合案例-时钟案例
3.5.1 题目要求
将素材目录下的index.html页面拆分成三个文件,分别是:
- index.css
- index.js
- index.html
并且将拆分出来的3个文件,存放到 clock 目录中。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index首页</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: linear-gradient(to bottom right, red, gold);
}
.box {
width: 400px;
height: 250px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 6px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
box-shadow: 1px 1px 10px #fff;
text-shadow: 0px 1px 30px white;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 70px;
user-select: none;
padding: 0 20px;
/* 盒子投影 */
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
}
</style>
</head>
<body>
<div class="box">
<div id="HH">00</div>
<div>:</div>
<div id="mm">00</div>
<div>:</div>
<div id="ss">00</div>
</div>
<script>
window.onload = function () {
// 定时器,每隔 1 秒执行 1 次
setInterval(() => {
var dt = new Date()
var HH = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
// 为页面上的元素赋值
document.querySelector('#HH').innerHTML = padZero(HH)
document.querySelector('#mm').innerHTML = padZero(mm)
document.querySelector('#ss').innerHTML = padZero(ss)
}, 1000)
}
// 补零函数
function padZero(n) {
return n > 9 ? n : '0' + n
}
</script>
</body>
</html>
3.5.2.案例的实现步骤
- 创建两个正则表达式,分别用来匹配<style>和<script>标签
- 使用fs模块,读取需要被处理的HTML文件
- 自定义 resolveCSS 方法,来写入index.css 样式文件
- 自定义resolveJS方法,来写入indexjs 脚本文件
- 自定义resolveHTML方法,来写入index.html文件
3.5.3 步骤一:导入需要的模块并创建正则表达式
// 1.1 导入 fs 文件系统模块
const fs = require('fs')
// 1.2 导入 path 路径处理模块
const path = require('path')
// 1.3 匹配style标签的正则
// 其中\s表示空白字符 \S 表示非空白字符 *表示任意字符 \表示转义字符,不然/会和其他的/发生冲突
let regStyle =/<style>[\s\S]*<\/style>/
// 1.4 匹配script标签的正则
let regScript = /<script>[\s\S]*<\/script>/
3.5.4 步骤二:使用fs读取需要被处理的html文件
//2.1 使用fs模块读取要被处理的html文件
fs.readFile(path.join(__dirname,'../素材/index.html'),'utf8',(err,result)=>{
//2.2 读取html文件失败
if(err){
return console.log('读取文件失败!'+err.message);
}
//2.3读取文件成功后,调用对应的处理文件的方法,拆出CSS JS HTML文件
// console.log('读取文件成功!内容是'+result);
resolveCSS(result)
resolveJS(result)
resolveHTML(result)
})
3.5.4 步骤三:自定resolveCSS的方法
// 3.1 处理CSS样式
function resolveCSS(htmlStr){
//3.2 使用正则提取页面中<style></style>标签
const r1 = regStyle.exec(htmlStr)
// 3.3 将提取出来的CSS字符串做进一步的处理
const newCSS = r1[0].replace('<style>','').replace('</style>','')
// 3.4 将处理好的CSS字符串使用fs.writeFile()方法写入到index.css文件中
fs.writeFile(path.join(__dirname,'./clock/index.css'),newCSS,err=>{
if(err) return console.log('写入CSS文件失败',err.message);
})
}
3.5.5 步骤四:自定义resolveJs的方法
// 4.1 处理JS
function resolveJS(htmlStr){
// 4.2 使用正则提取页面中的<script></script>标签
const r2 = regScript.exec(htmlStr)
// 4.3 将提取出来的字符串祖宗进一步的处理
const newJS = r2[0].replace('<script>','').replace('</script>','')
// 4.4 将处理好的JS字符串使用fs.writeFile()方法写入到index.js文件中
fs.writeFile(path.join(__dirname,'./clock/index.js'),newJS,err=>{
if(err) return console.log('写入JS文件失败',err.message);
})
}
3.5.6 步骤五:自定义resolveHtml的方法
// 5.1 处理HTML
function resolveHTML(htmlStr) {
//5.2 使用字符串的replace方法,将内嵌的<style>和<script>标签替换为内链的<link>和<script>标签
const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css"/>').replace(regScript, '<script src="./index.js"></script>')
//5.3 将替换后的字符串写入到index.html文件中
fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML,err=>{
if(err) console.log('写入HTML文件失败'+err.message);
})
}
3.5.7 案例的两个注意点
- ①fs.writeFile()文件只能用来创建文件,不能用来创建路径(踩坑了,运行后一直不生成clock文件夹和对应的文件)
- ②重复调用fs.writeFile()方法写入同一个文件,新写的内容会覆盖之前的旧内容
4. http模块
4.1 什么是http模块
回顾:什么是客户端,什么是服务器?
在网络节点中,负责消费资源的电脑叫做客户端;负责对外提供网络资源的电脑,叫做服务器。
http模块是Node.js官方 提供的、用来创建web服务器的模块。通过http模块提供的http.createServer方法就能把一台普通的电脑变成能一台Web服务器,从而对外提供Web资源服务。
如果希望使用http模块创建web服务器,则需要先导入它:
const http = require('http')
4.2 进一步理解http模块的作用
服务器和普通电脑的区别在于,服务器安装web服务器软件,例如IIS,Apache等,通过这些服务器软件,就能把一台普通电脑变成一台web服务器。
在Node.js 中,我们不需要使用 IIS、Apache 等这些第三方 web 服务器软件。因为我们可以基于 Node.js 提供的http 模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供 web 服务。
4.3 服务器相关概念
4.3.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 地址,就能把自己的电脑当做一台服务器进行访问了。
4.3.2 域名和域名服务器
尽管IP 地址能够唯一地标记网络上的计算机,但IP地址是一长数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,即所谓的域名 (Domain Name) 地址。
IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS,Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,域名服务器就是提供 地址和域名之间的转换服务的服务器。
注意:
①单纯使用1P 地址,互联网中的电脑也能够正常工作。但是有了域名的加持,能让互联网的世界变得更加方便;
②在开发测试期间127.0.0.1 对应的域名是 lcalhost,它们都代表我们自己的这台电脑,在使用效果上没有任何区别。
4.3.2 端口号
计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖送到你的手中。
同样的道理,在一台电脑中,可以运行成百上千个 web 服务。每个web 服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的 web 服务进行处理 。
注意:
①每个端口号不能同时被多个web服务占用。
②实际应用中,URL中的80端口号可以被忽略。
4.4 创建web服务的基本步骤
4.4.1 基本步骤
①导入http模块
const http = require('http')
②创建web服务器实例
调用http.createServer()方法,即可快速创建一个web服务器实例
const server = http.createServer()
③为服务器绑定request事件,监听客户端的请求
为服务器绑定request事件,即可监听客户端发送过来的网络请求:
server.on('request',(req,res)=>{
console.log('Someone visit our web server.');
})
④启动服务器
调用服务器实例的.listen方法,即可启动当前的web服务器实例:
//用服务器的 .on()方法,为服务器绑定一个request事件
server.listen(8080,()=>{
console.log('Server is running at http://127.0.0.1:8080');
})
启动服务后,在浏览器输入http://127.0.0.1:8080 后终端会打印'Someone visit our web server.',说明有人请求当前的web服务器,这个实例就创建完成。
4.4.2 req请求对象
只要服务器接收到了客户端的请求,就会调用通过 server.on() 为服务器绑定的 request 事件处理函数如果想在事件处理函数中,访问与客户端相关的数据或属性,可以使用如下的方式:
const http = require('http')
const server = http.createServer()
//req是请求对象,包含了与客户端相关的数据和属性
server.on('request',(req=>{
//req.url:是客户端请求的 URL 地址
const url = req.url
//req.method:是客户端请求的 method 类型
const method = req.method
const str = `Your request url is ${url},and request method is ${method}`
console.log('str:',str);//str: Your request url is /,and request method is GET
}))
server.listen(80,()=>{
console.log('Server is running at http://127.0.0.1');
})
4.4.3 res响应对象
const http = require('http')
const server = http.createServer()
server.on('request',(req,res)=>{
// res是响应对象,它包含了与服务器相关的数据和属性
// 要发送到客户端的字符串
const str=`Your request url is ${req.url},and request method is ${req.method}.`
//res.end()方法的作用
//向客户端发送指定内容,并结束本次请求
res.end(str)
})
server.listen(80,()=>{
console.log('Server is running at http://127.0.0.1');
})
在postman中测试如图:
4.4.4 解决中文乱码问题
在使用res.end()方法,向客户端发送中文内容的时候会出现乱码问题,此时,需要手动设置内容的编码格式:
server.on('request',(req,res)=>{
const str = `您的请求地址是 ${req.url},请求方式是${req.method}`
res.end(str)
})
解决:
server.on('request',(req,res)=>{
const str = `您的请求地址是 ${req.url},请求方式是${req.method}`
//为了防止中文显示乱码的情况,需要设置响应头Content-Type的值为text/html chartset=utf-8
res.setHeader('Content-Type','text/html;charset=utf-8')
//把包含中文的内容返回给客户端
res.end(str)
})
4.5 根据不同的url响应不同的html内容
4.5.1 核心实现步骤
- 获取请求的 url 地址
- 设置默认的响应内容为 404 Not found
- 判断用户请求的是否为/或/index.html 首页
- 判断用户请求的是否为 /about.html关于页面
- 设置 Content-Type 响应头,防止中文乱码
- 使用 res.end() 把内容响应给客户端
const http = require('http')
const server = http.createServer()
server.on('request',(req,res)=>{
//1.获取请求的url地址
let url = req.url
//2.设置默认的内容为 404 Not found
let content='<h1>404 Not found!</h1>'
//3.首页
if(url=='/'||url=='/index.html'){
content = '<h1>这是首页</h1>'
//4.关于页面
}else if(url=='/abount.html'){
content = '<h1>这是关于页面</h1>'
}
//5.设置Content-Type ,防止出现中文乱码情况
res.setHeader('Content-Type','text/html;charset=utf-8')
//6.返回数据到客户端
res.end(content)
})
server.listen(80,()=>{
console.log('Server running at http://127.0.0.1');
})
4.6 案例 - 实现 clock 时钟的 web 服务器
4.6.1 核心思路
把文件的实际存放路径,作为每个资源的请求 url 地址
4.6.2 实现步骤
- 导入需要的模块
//1.1导入http模块 const http = require('http') //1.3导入文件系统模块fs const fs = require('fs') //1.3导入路径处理模块path const path = require('path')
- 创建基本的 web 服务器
//2.1创建web服务器 const server = http.createServer() //2.2监听web服务器的request事件 server.on('request',(req,res)=>{}) //2.3启动web服务器 server.listen(80,()=>{ console.log('Server is running at http://127.0.0.1'); })
- 将资源的请求url地址映射为文件的存放路径
// 3.1获取到客户端请求的URL地址 const url = req.url // 3.2根绝URL地址映射为具体文件的存放路径 const fPath = path.join(__dirname,url)
- 读取文件内容并响应给客户端
//4.1根据映射过来的文件路径读取文件 fs.readFile(fPath,'utf8',(err,result)=>{ //4.2读取文件失败后,向客户端响应固定的“错误消息” if(err) return res.end('404 Not found!') // res.setHeader('Content-Type','text/html;charset=utf-8') // 4.3读取文件成功后,将读取成功的文件内容返回给客户端 res.end(result) })
- 优化资源的请求路径
let fPath = ''
if(url=='/'){
fPath = path.join(__dirname,'/clock/index.html')
}else{
fPath = path.join(__dirname,'/clock',url)
}
完整代码:
//1.1导入http模块
const http = require('http')
//1.3导入文件系统模块fs
const fs = require('fs')
//1.3导入路径处理模块path
const path = require('path')
//2.1创建web服务器
const server = http.createServer()
//2.2监听web服务器的request事件
server.on('request', (req, res) => {
// 3.1获取到客户端请求的URL地址
const url = req.url
// 3.2根绝URL地址映射为具体文件的存放路径
// const fPath = path.join(__dirname,url)
// 预定义空白的存放路径
let fPath = ''
if(url=='/'){
fPath = path.join(__dirname,'/clock/index.html')
}else{
fPath = path.join(__dirname,'/clock',url)
}
//4.1根据映射过来的文件路径读取文件
fs.readFile(fPath,'utf8',(err,result)=>{
//4.2读取文件失败后,向客户端响应固定的“错误消息”
if(err) return res.end('404 Not found!')
// 4.3读取文件成功后,将读取成功的文件内容返回给客户端
res.end(result)
})
})
//2.3启动web服务器
server.listen(80, () => {
console.log('Server running at http://127.0.0.1');
})