Node.js零基础入门教程(第1章)-初识Node.js与内置模块

已于 2022-08-08 21:45:23 修改
阅读量369 收藏 1
点赞数
分类专栏： node.js零基础入门教程 文章标签： 前端 javascript js node.js
于 2022-07-27 21:18:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOUKELOVE/article/details/125980424
版权

同专栏笔记持续更新中

文章目录


在这里插入图片描述

一、初识Node.js

1. 回顾与思考

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
使用JavaScript也可以做后端开发，不过需要借助Node.js来实现

2. Node.js简介

在这里插入图片描述
Node.js的官网地址：link
目前为止，我们已经介绍了两个js的运行环境，分别是浏览器和node，如果写了一段js，放到浏览器中运行那就说明我们在做前端开发，如果放到node里面去执行，说明我们正在做后端开发。
在这里插入图片描述
注意：学习node.js时，里面很重要的部分就是这些内置API如何去使用
在这里插入图片描述
Express框架：链接link
Electron框架：链接link
restify框架：链接link
在这里插入图片描述
在这里插入图片描述

3. Node.js环境的安装

在这里插入图片描述
官网链接：link
在这里插入图片描述
对于初学者，安装LTS版本就够了
安装位置选择默认地址，一直next到最后install,完成安装
在这里插入图片描述

在这里插入图片描述

演示: （版本是16.16.0）
在这里插入图片描述

在这里插入图片描述

4. 在Node.js环境中执行JavaScript代码

在这里插入图片描述

演示：
首先使用命令cd /d 文件所在目录切换到目标目录，然后使用node 要执行js文件的路径执行js文件代码
在这里插入图片描述
技巧：
可以不需要这么繁琐，直接在目标文件夹按住shift键右击鼠标，点击弹出框中的在此处打开Powershell窗口即可
在这里插入图片描述
cmd是比较旧的终端，Powershell是革新之后的终端，以后尽量都使用Powershell

在这里插入图片描述
cls命令就是clear清屏命令

二、fs 文件系统模块

1. 什么是 fs 文件系统模块

在这里插入图片描述

2. 读取指定文件中的内容

在这里插入图片描述
注意：中括号[]包裹的是可选参数，其他没有被包裹的就是必选参数
在这里插入图片描述

事先在file文件夹里存放了一个1.txt文件在这里插入图片描述
失败和成功的结果如下：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
注意：err.message代表反馈消息，dataStr代表文件内容。

3. 向指定的文件中写入内容

在这里插入图片描述

在这里插入图片描述

// 1. 导入 fs 文件系统模块
const fs = require('fs')

// 2. 调用 fs.writeFile()方法，写入文件的内容
//      参数1：表示文件的存放路径
//      参数2：表示要写入的内容
//      参数3：回调函数
fs.writeFile('./file/2.txt','abcd',function(err){
    // 2.1 如果文件写入成功，则 err 的值等于 null
    // 2.2 如果文件写入失败，则 err 的值等于 一个错误对象
    console.log(err);
})

在这里插入图片描述

// 1. 导入 fs 文件系统模块
const fs = require('fs')

// 2. 调用 fs.writeFile()方法，写入文件的内容
//      参数1：表示文件的存放路径
//      参数2：表示要写入的内容
//      参数3：回调函数
fs.writeFile('./file/2.txt','nihao,ts',function(err){
    // 2.1 如果文件写入成功，则 err 的值等于 null
    // 2.2 如果文件写入失败，则 err 的值等于 一个错误对象
    
    if(err) {
    // 如果成功，err为空。如果失败，err等于一个错误对象，即为true
        return console.log('文件写入失败！' + err.message)
    }
    console.log('文件写入成功！')
})

4. 练习 - 考试成绩整理

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Split()方法复习：链接link

案例关键点演示：
使用split()方法将数据按照空格分割
在这里插入图片描述
分割效果
在这里插入图片描述
将整行排列的数据转换成竖行排列：
在这里插入图片描述
整行转竖行效果：
在这里插入图片描述
案例代码如下：

// 1. 导入 fs 模块， 来操作文件
const fs = require('fs')

// 2. 调用fs.readFile()读取文件的内容
fs.readFile('./file/成绩.txt', 'utf8', function(err, dataStr){
    // 3. 判断是否读取成功
    // 如果读取成功，则 err 的值为 null
    // 如果读取失败，则 err 的值为 错误对象，dataStr的值为 undefined
    if(err){
        return console.log('读取文件失败！' + err.message)
    }
    // console.log('读取文件成功！' + dataStr)
    // 4.1 先把成绩的数据，按照空格进行分割
    const arrOld = dataStr.split(' ')
    // 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作
    const arrNew = []
    arrOld.forEach(item => {
        // 将等号替换成 =
        arrNew.push(item.replace('=', ': '))
    })
    
    // 4.3 把新数组中的每一项，进行合并，得到一个新的字符串
    // join('\r\n') 给元素添加换行效果
    const newStr = arrNew.join('\r\n')
    console.log(newStr);

    // 5. 调用 fs.writeFile()方法，把处理完毕的成绩，写入到新文件中
    fs.writeFile('./file/成绩-ok.txt', newStr ,function(err){
        if(err) {
            return console.log('写入文件失败！' + err.message)
        }
        console.log('成绩写入成功！');
    })
})

5. fs 模块 - 路径动态拼接的问题

在这里插入图片描述

示例：
在这里插入图片描述

读取文件失败，显示路径为：D：\1学习资料\计算机类\Web前端\课程记录\Node.js入门到精通\day1\file\1.txt
实际情况是day1目录下没有file文件夹，readFile是直接将.file/1.txt加到day1文件夹后面形成路径，所以是错误的

三、path路径模块

1. 什么是 path 路径模块

在这里插入图片描述

2. 路径拼接

在这里插入图片描述

在这里插入图片描述
../会抵消一层路径，路径拼接成功之后，../会把它前面的路径抵消掉

演示如下：

const path = require('path')

const pathStr = path.join('/a', '/b/c', '../', './d', 'e')
//  ../../ 意为抵消两层路径（抵消b和c）
const pathStr3 = path.join('/a', '/b/c', '../../', './d', 'e')

console.log(pathStr); // 输出 \a\b\d\e
console.log(pathStr3); // 输出 \a\d\e


const pathStr2 = path.join(__dirname, './file/1/txt')
console.log(pathStr2);

在这里插入图片描述

path.join()方法结合fs文件模块系统使用：
在这里插入图片描述

3. 获取路径中的文件名

在这里插入图片描述

在这里插入图片描述

const path = require('path')

// 定义文件的存放路径
const fpath = 'D:/1学习资料/计算机类/Web前端/课程记录/Node.js入门到精通/day1/code/file/1.txt'

var fullName = path.basename(fpath)
console.log(fullName) // 输出文件名(1.txt)
// 删除文件的扩展名（.txt）
var nameWithoutExt = path.basename(fpath, '.txt')
console.log(nameWithoutExt) // 输出文件名（1）

4. 获取路径中的文件扩展名

在这里插入图片描述

在这里插入图片描述

const path = require('path')

// 定义文件的存放路径
const fpath = 'D:/1学习资料/计算机类/Web前端/课程记录/Node.js入门到精通/day1/code/file/1.txt'
// 确定和得到文件扩展名（文件类型）
const newName = path.extname(fpath)

var fullName = path.basename(fpath)
console.log(fullName) // 输出文件名(1.txt)
console.log(newName)  // 输出文件扩展名（.txt）
// 删除文件的扩展名（.txt）
var nameWithoutExt = path.basename(fpath, newName)
console.log(nameWithoutExt) // 输出文件前缀名（1）

5. 综合案例 - 时钟案例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

知识复习：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
完整代码：

// 1.1 导入 fs 文件系统模块
const fs = require('fs')
// 1.2 导入 path 路径处理模块
const path = require('path')

// 1.3 匹配 <style></style> 标签的正则
// 其中 \s 表示空白字符； \S 表示非空白字符；* 表示匹配任意次（可以出现任意次）
// [\s\S]组合表示任意字符  \是和/起转义作用，避免和外面的/发生冲突
const regStyle = /<style>[\s\S]*<\/style>/
// 1.4 匹配 <script></script> 标签的正则
const regScript = /<script>[\s\S]*<\/script>/

// 2.1 读取需要被处理的 HTML 文件
fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr){
    // 2.2 读取 HTML 文件失败
    if(err) return console.log('读取 HTML 文件失败' + err.message)

    // 2.3 读取 HTML 文件成功后，调用对应的方法，拆解出 css、js 和 html 文件
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)
})

// 3.1 处理 css 样式
// 接收一个参数htmlStr，意为html的字符串
function resolveCSS(htmlStr) {
    // 3.2 使用正则提取页面中的 <style></style> 标签
    const r1 = regStyle.exec(htmlStr)
    // 3.3 将提取出来的样式字符串，做进一步的处理
    const newCSS = r1[0].replace('<style>', '').replace('/<style>', '')
    // 3.4 将提取出来的 css 样式，写入到 index.css文件中
    fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, err => {
        if(err) return console.log('写入 CSS 样式失败！' + err.message)
        console.log('写入 CSS 样式成功！')
    })
    
}

// 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 样式，写入到index.js文件中
    fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, err => {
        if(err) return console.log('写入 JS 脚本失败！' + err.message)
        console.log('写入 JS 脚本成功！')
    })
}

// 5. 处理 html 文件
function resolveHTML(htmlStr) {
    // 5.1 使用字符串的 replace 方法，把内嵌的 <style> 和 <script> 标签，替换为外联的 <link> 和 <script> 标签
    const newHTML = htmlStr
        .replace(regStyle, '<link rel="stylesheet" href="./index.css">')
        .replace(regScript, '<script src="./index.js"></script>')
    // 5.2 将替换完成之后的 html 代码，写入到 index.html 文件中
    fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, err => {
        if(err) return console.log('写入 HTML 文件失败！' + err.message)
        console.log('写入 HTML 页面成功！')
    })
}

四、http模块

1. 什么是 http 模块

在这里插入图片描述

2. 进一步理解 http 模块的作用

在这里插入图片描述

3. 服务器相关的概念

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4. 创建最基本的 web 服务器

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码如下：

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)
})
server.listen(880, () => {
    console.log('server running at http://127.0.0.1')
})

演示：
首先在终端node启动该js文件，然后使用Postman向我们的地址http://127.0.0.1:880/Send一系列请求，观察终端信息的更新（如下），收到了req请求
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
代码：

const http = require('http')
const server = http.createServer()
// req 是请求对象，包含了与客户端相关的数据和属性
server.on('request', (req, res) => {
    // 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)
    // 调用 res.end() 方法，向客户端响应一些内容
    res.end(str)
})
server.listen(880, () => {
    console.log('server running at http://127.0.0.1')
})

测试响应消息
在这里插入图片描述

在这里插入图片描述

演示：
代码（会出现乱码）
在这里插入图片描述
效果：（出现乱码）
在这里插入图片描述
代码改进：
在这里插入图片描述
效果如下（改进后）：
在这里插入图片描述

5. 根据不同的 url 响应不同的 html 内容

在这里插入图片描述

在这里插入图片描述
代码如下：

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

server.on('request', (req, res) => {
    // 1. 获取请求的 url 地址
    const url = req.url
    // 2. 设置默认的响应内容为 404 Not found
    let content = `<h1>404 Not found</h1>`
    // 3. 判断用户请求的是否为 / 或 /index.html  首页
    // 4. 判断用户请求的是否为 /about.html  关于首页
    if (url === '/' || url === '/index.html') {
        content = `<h1>首页</h1>`
    } else if(url === '/about.html') {
        content = `<h1>关于首页</h1>`
    }
    // 为了防止中文显示乱码的问题，需要设置响应头 
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    // res.end() 将内容响应content给客户端
    res.end(content)
})

// 调用 server.listen() 方法，即可启动 web 服务器
server.listen(888, () => {
    console.log('server running at http://127.0.0.1')
})

效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 案例 - 实现clock时钟的 web 服务器

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

// 1.1 导入 http 模块
const http = require('http')
// 1.2 导入 fs 文件系统模块
const fs = require('fs')
// 1.e 导入 path 路径处理模块
const path = require('path')

// 2.1 创建 web 服务器
const server = http.createServer()

// 2.2 监听 web 服务器的 request 事件
server.on('request', function(req, res) {
    // 3.1 获取到客户端请求的 url 地址
const url = req.url
// 3.2 把请求的 url 地址，映射为本地文件的存放路径
// const fpath = path.join(__dirname, url)
// *** 将 3.2 的实现方式，改为如下代码
// 5.1 预定义空白的文件存放路径
let fpath = ''
if (url === '/') {
    // 5.2 如果请求的路径是 /, 则手动指定文件的存放路径
    fpath = path.join(__dirname, './clock/index.html')
} else {
    // 5.3 如果请求的路径不是 /, 则动态拼接文件的存放路径
    // 在 url 前面补全 /clock
    fpath = path.join(__dirname, '/clock', url)
}

// 4.1 根据“映射”过来的文件路径读取文件
fs.readFile(fpath, 'utf8', (err, dataStr) => {
    // 4.2 读取文件失败后，向客户端响应固定的“错误消息”
    if(err) return res.end('404 Not found.')
    // 4.3 读取文件成功后，将“读取成功的内容”响应给客户端
    res.end(dataStr)
})
})

// 2.3 启动 web 服务器
server.listen(888, function() {
    console.log('server listen at http://127.0.0.1')
})

效果如下：
在这里插入图片描述
在这里插入图片描述
服务器文件夹中没有about.html文件，所以读取失败，则提示错误信息404 Not found
在这里插入图片描述

Rookie_wbe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值