Node.js学习笔记
学习视频:https://b23.tv/rS0WlI5
- JavaScript可以在浏览器运行的原因:浏览器内置了JavaScript解析引擎(chrome浏览的引擎性能最好)
- 为什么JavaScript可以操作DOM和BOM:每个浏览器都内置了DOM、BOM和Ajax的API函数,所以浏览器中的JavaScript可以调用它们
- Node.js是一个基于Chrome V8引擎的JavaScript运行环境。
- 如果js代码在浏览器运行说明在做前端开发,如果放在Node.js执行说明在做后端开发。浏览器是JavaScript的前端运行环境,Node.js是JavaScript的后端运行环境。Node.js中无法调用DOM和BOM等浏览器内置API。
- 如何在Node.js环境中执行JavaScript代码?
首先,打开终端。
然后,输入node空格要执行的js文件路径。(要切换到文件所在目录才能执行)
- 终端快捷键:
- tab补全路径
- Esc清空当前输入的命令
- 输入cls清空终端
fs文件系统模块
fs模块是Node.js官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求。
例如:
- fs.readFile()方法,用来读取指定文件中的内容
- fs.writeFile()方法,用来向指定的文件写入内容
如果要在JavaScript代码中,使用fs模块来操作文件,则需要使用如下方式先导入它:
const fs = require('fs')
读取指定文件中的内容
fs.readFile()的语法格式
使用fs.readFile()方法,可以读取指定文件中的内容,语法格式如下:
fs.readFile(path[,options],callback)//被中括号包起来的是可选参数项,没有被括起来的是必选参数
参数:
- 参数1:必选参数,字符串,表示文件路径。
- 参数2:可选参数,表示以什么编码格式来读取文件。
- 参数3:必选参数,文件读取完成后,通过回调函数拿到读取的结果。
示例代码:
以utf8的编码格式,读取指定文件的内容,并打印err和dataStr的值:
const fs = require('fs')
fs.readFile('./files/11.txt','utf8',function(err,dataStr){
consloe.log(err)
consloe.log('-----')
consloe.log(dataStr)
})
判断文件是否读取成功:
读取成功,err对象为null,读取失败为错误对象
//1.导入fs
const fs=require('fs')
//2.调用readFile方法
fs.readFile('./files/1.txt','utf8',function(err,dataStr){
//打印失败的结果,读取成功err为null,失败为错误对象
if(err){
return console.log('文件读取失败'+err.message);
}
console.log('文件读取成功,内容是'+dataStr)
})
读取成功如图所示:
读取失败如图所示:
向指定文件写入内容
fs.writeFile()的语法格式
使用fs.writeFile()方法,可以向指定的文件写入内容,语法格式如下:
fs.writeFile(file,data[,options],callback)
参数:
- 参数1:必选参数,需要指定一个文件路径的字符串,表示文件的存放路径。
- 参数2:必选参数,表示要写入的内容。
- 参数3:可选参数,表示以什么格式写入文件内容,默认值是utf8。
- 参数4:必选参数,文件写入完成后的回调参数。
示例代码:
const fs = require('fs')
fs.writeFile('./files/2.txt','Hello Node.js!',function(err){
console.log(err)
})
判断文件是否写入成功:
写入成功,err对象为null,写入失败为错误对象
const fs = require('fs')
fs.writeFile('./files/2.txt','Hello Node.js!',function(err){
if(err){
return console.log('文件写入失败!'+err.message);
}
console.log('文件写入成功!')
})
写入成功,如图所示:
写入失败,如图所示:
整理成绩格式案例
目的:
把这样格式的成绩
转成这样格式
代码:
const fs = require('fs');
fs.readFile('./files/grades.txt', 'utf8', function (err, dataStr) {
if (err) {
return console.log('读取文件失败!' + err.message);
}
console.log('读取文件成功!' + dataStr);
//先把成绩的数据,按照空格进行分割
const arrOld = dataStr.split(' ')
//循环分割后的数组,对每一项的数据,进行字符串的替换操作
const arrNew = []
arrOld.forEach(item => {
arrNew.push(item.replace('=', ':'))
})
console.log(arrNew);
//把新数组的每一项进行合并,得到一个新的字符串
const newStr = arrNew.join('\r\n')
// console.log(newStr);
fs.writeFile('./files/grades_ok.txt', newStr, function (err) {
if (err) {
return console.log('写入文件失败' + err.message);
}
console.log('成绩写入成功');
})
})
fs模块路径动态拼接问题
在使用fs操作文件时,如果提供的操作路径是以./或…/开头的相对路径,很容易出现路径动态拼接错误的问题。
原因:代码在运行时,会执行node命令时所处的目录,动态拼接出被操作文件的完整路径。即使输入node命令时添上了路径。
解决方法1:直接提供完整路径。(移植性差,不利于维护)
注意:js中路径分隔用\\或/。
fs.readFile('D:\\Desktop\\NodeJs-projects\\day1\\code\\files\\1.txt','utf-8',function(err,dataStr){
if(err){
return console.log(err);
}
console.log(dataStr);
})
解决方法2:__dirname表示当前文件所处的目录。(两个下划线)
fs.readFile(__dirname+'/files/1.txt','utf-8',function(err,dataStr){
if(err){
return console.log(err);
}
console.log(dataStr);
})
path路径模块
path模块是Node.js官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。
例如:
- path.join()方法,用来将多个路径片段拼接成一个完整的路径字符串
- path.basename()方法,用来从路径字符串中,将文件名解析出来
如果要在JavaScript代码中,使用path模块来处理路径,则需要使用如下的方式先导入它:
const path = require('path')
路径拼接
path.join()的语法格式
使用path.join()方法,可以将多个路径片段拼接成一个完整的路径字符串,语法格式如下:
path.join([...paths])
参数:
- …paths路径片段的序列
- 返回值:
示例代码:
const path=require('path')
// ../会抵消前面的一个路径,这里会抵消前面的c,两个../会抵消两层路径,抵消b和c
const pathStr=path.join('/a','/b/c','../','./d','e')
console.log(pathStr);// \a\b\d\e
注意:凡是路径拼接问题,都要使用path.join()方法来处理,不能直接用+来拼接。
fs.readFile(path.join(__dirname,'files/1.txt'),'utf-8',function(err,dataStr){
if(err){
console.log('读取文件失败'+err.message);
}
console.log('读取文件成功'+dataStr);
})
获取路径中的文件名
path.basename()的语法格式
使用path.basename()方法,可以获得路径中的最后一部分,通过这个方法获取路径中的文件名,语法格式如下:
path.basename(path[,ext])
参数:
- path必选参数,表示一个路径的字符串
- ext可选参数,表示文件扩展名
- 返回:表示路径中的最后一部分
代码示例:
const path=require('path')
//定义文件存放路径
const fpath='a/b/c/index.html'
//获取完整文件名(带后缀)
const fullname=path.basename(fpath)
console.log(fullname);
//获取文件名,不带后缀
const nameWithoutExt=path.basename(fpath,'.html')
console.log(nameWithoutExt);
获取路径中的扩展名
path.extname()的语法格式
使用path.extname()方法,可以获取路径中的扩展名部分,语法格式如下:
path.extname(path)
参数:
- path必选参数,表示一个路径的字符串
- 返回:返回得到的扩展名字符串
代码示例:
const path=require('path')
const fpath='a/s/d/index.html'
const fext=path.extname(fpath)
console.log(fext);// .html
时钟案例拆分成html,js,css文件
const fs=require('fs')
const path=require('path')
//匹配<style></style>标签的正则
// 其中 \s表示空白字符,\S表示非空白字符,*表示匹配任意次
const regStyle=/<style>[\s\S]*<\/style>/
//匹配<script></script>标签的正则
const regScript=/<script>[\s\S]*<\/script>/
//调用fs的readFile方法读取文件
fs.readFile(path.join(__dirname,'html/index.html'),'utf-8',function(err,dataStr){
//读取失败
if(err){
return console.log('读取文件失败'+err.message);
}
//读取成功,调用对应的方法拆分css,js,html文件
resolveCSS(dataStr)
resolveScript(dataStr)
resolveHTML(dataStr)
})
//定义处理css样式的方法
function resolveCSS(dataStr){
//使用正则提取<style></style>标签
const r1=regStyle.exec(dataStr)
//把标签替换成空白
const newCSS=r1[0].replace('<style>','').replace('</style>','')
//把提取后的css样式,写入css文件
fs.writeFile(path.join(__dirname,'clock/index.css'),newCSS,err=>{
if(err){
return console.log('写入css样式失败!'+err.message);
}
console.log('css样式写入成功!');
})
}
//定义处理js文件的方法
function resolveScript(dataStr){
//通过正则提取<script></script>标签内容
const r2=regScript.exec(dataStr)
//替换掉标签
const newJs=r2[0].replace('<script>','').replace('</script>','')
//写入js文件
fs.writeFile(path.join(__dirname,'clock/index.js'),newJs,err=>{
if(err){
return console.log('写入js失败!'+err.message);
}
console.log('写入js成功!');
})
}
//定义处理html文件
function resolveHTML(dataStr){
//将字符串调用replace方法,把内嵌的style和script标签,替换为link和script标签
const newHTML=dataStr.replace(regStyle,'<link rel="stylesheet href="./index.css" />').replace(regScript,'<script src="./index.js"></script>')
//写入html文件
fs.writeFile(path.join(__dirname,'clock/index.html'),newHTML,err=>{
if(err){
return console.log('写入html文件失败'+err.message);
}
console.log('写入html文件成功');
})
}
注意:
- fs的writeFile()方法只能创建文件不能创建目录。
- 重复调用writeFile()方法,写入的新内容会覆盖旧内容。
http模块
什么是客户端、什么是服务器?
在网络节点中,负责消费资源的电脑,叫做客户端;负责对外提供网络资源的电脑,叫做服务器。
http模块是Node.js官方提供的、用来创建web服务器的模块。通过http抹开提供的http.createServer()方法,就能方便的把一台普通的电脑,编程一台web服务器,从而对外提供web资源服务。
如果希望使用http模块创建Web服务器,则需要先导入它:
const http=require('http')
http模块的作用:
服务器和普通电脑的区别在于,在服务器上安装了web服务器软件,例如:IIS,Apache等。通过安装这些服务器软件,就能把一台普通的电脑变成一台web服务器。
Apache举例:下载phpStudy软件,启动,将网页文件复制到phpstudy文件夹下的WWW文件夹中就可以用127.0.0.1访问了。
在Node.js中,不需要使用IIS、Apache等第三方服务器软件。基于Node.js提供的http模块,通过几行简单的代码,就能手写一个服务器软件,从而对外提供web服务。
服务器相关的概念:
-
IP地址:
IP地址是互联网上每台计算的唯一地址,具有唯一性。IP地址相当于每台电话的电话号码,通过IP地址才能与对应的电脑进行数据通信。
格式:“点分十进制”,即(a.b.c.d),取值范围0~255
注意:
- 互联网中每台web服务器,都有自己的IP地址。可以用ping网址查看IP地址。
- 开发期间,自己的电脑既是服务器也是客户端,在浏览器中输入127.0.0.1这个IP地址就可以把自己的电脑当作一台服务器访问了。
-
域名和域名服务器:
由于IP地址不直观不便于记忆,所以有了域名。域名与IP地址一一对应,存放他们的对应关系在一个叫做域名服务器(DNS,Domain name server)的电脑中,使用者通过域名就可以访问对应的服务器,转换工作由DNS来实现。
注意:
- 用IP地址就可以访问,域名只是更方便
- 127.0.0.1对应的域名是localhost,二者使用效果相同
-
端口号:
端口号相当于门牌号,一台电脑可以运行成百上千个web服务,每个web服务对应唯一的端口号。客户端发过来的网络请求,通过端口号,可以被准确交给对应的web服务进行处理。
注意:
- 每个端口号不能同时被多个web服务占用。
- 在实际应用中,URL中的80端口可以被省略。
创建最基本的web服务器:
基本步骤:
-
导入http模块
const http=require('http')
-
创建web服务器实例
const server=http.createServer()
-
为服务器实例绑定request事件,监听客户端的请求
//使用服务器实例的.on()方法,为服务器绑定一个request事件 server.on('request',(req,res)=>{ //只要有客户端来请求自己的服务器,就会触发request事件,从而调用这个事件处理函数 console.log('Someone visit our web server.') })
-
启动服务器
//调用server.listen(端口号,callback回调)方法,即可启动web服务器 server.listen(80,()=>{ console.log('http server running at http://127.0.0.1')//80端口可省略 }) server.listen(8080,()=>{ console.log('http server running at http://127.0.0.1:8080') })
req请求对象
只要服务器接收到了客户端的请求,就会调用通过server.on()为服务器绑定的request事件处理函数。如果想在事件处理函数中,访问与客户端相关的数据或属性,可以使用如下的方式:
server.on('request',(req)=>{
//req是请求对象,它包含了与客户端相关的数据和属性,例如:
//req.url是客户端请求的URL地址,这个地址是从端口号后面开始的
//req.method是客户端的method请求类型
const str=`Your request url is ${req.url},and request method is ${req.method}`//注意这里不是单引号是`
console.log(str)
})
res响应对象
在服务器的request事件处理函数中,如果向访问与服务器相关的数据或属性,可以使用如下的方式:
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)
})
解决中文乱码问题
当调用res.end()方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式:
server.on('request',(req,res)=>{
//发送的内容包含中文
const str=`您请求的url地址是${req.url},请求的method类型是${req.method}`
//为了防止中文显示乱码问题,需要设置响应头Content-Type的值为text/html;charset=utf-8
res.setHeader('Content-Type','text/html;charset=utf-8')
//把包含中文的内容,响应给客户端
res.end(str)
})
根据不同的url响应不同的html内容
核心实现步骤:
- 获取请求的url地址
- 设置默认的响应内容为404Not found
- 判断用户情求的是否为/或/index.html首页
- 判断用户请求的是否为/about.html关于页面
- 设置Content-Type响应头,防止中文乱码
- 使用res.end()把内容响应给客户端
动态响应内容:
server.on('request',function(req,res){
const url=req.url //1
let content='<h1>404 Not found!</h1>' //2
if(url==='/'||url==='/index.html'){
content='<h1>首页</h1>' //3
}else if(url==='/about.html'){
content='<h1>关于页面</h1>' //4
}
res.setHeader('Content-Type','text/html;charset=utf-8') //5
res.end(content) //6
})
实现clock时钟的web服务器
实现步骤:
- 导入需要的模块
//导入http模块
const http=require('http')
//导入fs模块
const fs=require('fs')
//导入path路径处理模块
const path=require('path')
- 创建基本的web服务器
//创建web服务器
const server=http.createServer()
//监听web服务器的request事件
server.on('request',function(req,res){})
//启动web服务器
server.listen(80,function(){
console.log('server listen at http://127.0.0.1')
})
- 将资源的请求url地址映射为文件的存放路径(放到监听事件函数中)
//获取到客户请求的url地址
// /clock/index.html
// /clock/index.css
// /clock/index.js
const url=req.url
//把请求的url地址,映射为本地文件的存放路径
const fpath=path.join(__dirname,url)
- 读取文件内容并响应给客户端(放到监听事件函数中)
//根据映射过来的文件路径读取文件
fs.readFile(fpath,'utf-8',(err,dataStr)=>{
//读取失败,向客户端响应固定的错误信息
if(err) return res.end('404 Not found')
//读取文件成功,将读取成功的内容响应给客户端
res.end(dataStr)
})
- 优化资源的请求路径
//把获取的请求url地址简化,不需要输入/clock了
//预定义空白的文件存放路径
let fpath=''
if(url==='/'){
//如果请求路径是/,手动指定文件的存放路径
fpath=path.join(__dirname,'./clock/index.html')
}else{
//如果不为/,则动态拼接文件的存放路径
// /index.html
// /index.css
// /index.js
fpath=path.join(__dirname,'./clock',url)
}