Node.js学习笔记(学习自用)

Node.js学习笔记

学习视频:https://b23.tv/rS0WlI5

  1. JavaScript可以在浏览器运行的原因:浏览器内置了JavaScript解析引擎(chrome浏览的引擎性能最好)
  2. 为什么JavaScript可以操作DOM和BOM:每个浏览器都内置了DOM、BOM和Ajax的API函数,所以浏览器中的JavaScript可以调用它们
  3. Node.js是一个基于Chrome V8引擎的JavaScript运行环境。
  4. 如果js代码在浏览器运行说明在做前端开发,如果放在Node.js执行说明在做后端开发。浏览器是JavaScript的前端运行环境,Node.js是JavaScript的后端运行环境。Node.js中无法调用DOM和BOM等浏览器内置API。
  5. 如何在Node.js环境中执行JavaScript代码?

​ 首先,打开终端。

​ 然后,输入node空格要执行的js文件路径。(要切换到文件所在目录才能执行)

  1. 终端快捷键:
    • 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服务。

服务器相关的概念:

  1. IP地址:

    IP地址是互联网上每台计算的唯一地址,具有唯一性。IP地址相当于每台电话的电话号码,通过IP地址才能与对应的电脑进行数据通信。

    格式:“点分十进制”,即(a.b.c.d),取值范围0~255

    注意:

    • 互联网中每台web服务器,都有自己的IP地址。可以用ping网址查看IP地址。
    • 开发期间,自己的电脑既是服务器也是客户端,在浏览器中输入127.0.0.1这个IP地址就可以把自己的电脑当作一台服务器访问了。
  2. 域名和域名服务器:

    由于IP地址不直观不便于记忆,所以有了域名。域名与IP地址一一对应,存放他们的对应关系在一个叫做域名服务器(DNS,Domain name server)的电脑中,使用者通过域名就可以访问对应的服务器,转换工作由DNS来实现。

    注意:

    • 用IP地址就可以访问,域名只是更方便
    • 127.0.0.1对应的域名是localhost,二者使用效果相同
  3. 端口号:

    端口号相当于门牌号,一台电脑可以运行成百上千个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)
}
  • 41
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值