Node.js——初识Node.js与内置模块(二)
1.path路径模块
1.1 什么是 path 路径模块
1.2 路径拼接
1. path.join() 的语法格式
path.join() 方法里面可以传任意多个路径的片段；返回值是路径拼接好的字符串
2. path.join() 的代码示例
../路径会抵消它前面的一个路径/c
const path = require('path')
const fs = require('fs')
// 注意： ../ 会抵消前面的路径
// const pathStr = path.join('/a', '/b/c', '../../', './d', 'e')
// console.log(pathStr) // \a\b\d\e
//两个../抵消前面的两个\a\d\e
// fs.readFile(__dirname + '/files/1.txt')
fs.readFile(path.join(__dirname, './files/1.txt'), 'utf8', function(err, dataStr) {
if (err) {
return console.log(err.message)
}
console.log(dataStr)
})
1.3 获取路径中的文件名
1. path.basename() 的语法格式
2. path.basename() 的代码示例
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)
1.4 获取路径中的文件扩展名
1. path.extname() 的语法格式
2. path.extname() 的代码示例
const path = require('path')
// 这是文件的存放路径
const fpath = '/a/b/c/index.html'
const fext = path.extname(fpath)
console.log(fext)
1.5 综合案例 - 时钟案例
1. 案例要实现的功能
// 1.1 导入 fs 模块 fs读写文件
const fs = require('fs')
// 1.2 导入 path 模块 path处理路径
const path = require('path')
// 1.3 定义正则表达式，分别匹配 和 标签
//需要被替换的内容
const regStyle = /', '')
// 3.4 调用 fs.writeFile() 方法，将提取的样式，写入到 clock 目录中 index.css 的文件里面
fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
if (err) return console.log('写入 CSS 样式失败！' + err.message)
console.log('写入样式文件成功！')
})
}
// 4.1 定义处理 js 脚本的方法
function resolveJS(htmlStr) {
// 4.2 通过正则，提取对应的 标签内容
const r2 = regScript.exec(htmlStr)
// 4.3 将提取出来的内容，做进一步的处理
const newJS = r2[0].replace('', '')
// 4.4 将处理的结果，写入到 clock 目录中的 index.js 文件里面
fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
if (err) return console.log('写入 JavaScript 脚本失败！' + err.message)
console.log('写入 JS 脚本成功！')
})
}
// 5.1 定义处理 HTML 结构的方法
function resolveHTML(htmlStr) {
// 5.2 将字符串调用 replace 方法，把内嵌的 style 和 script 标签，替换为外联的 link 和 script 标签
const newHTML = htmlStr.replace(regStyle, '').replace(regScript, '')
// 5.3 写入 index.html 这个文件
fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
if (err) return console.log('写入 HTML 文件失败！' + err.message)
console.log('写入 HTML 页面成功！')
})
}
2. 案例的实现步骤
3. 步骤1 - 导入需要的模块并创建正则表达式
3. 步骤2 - 使用 fs 模块读取需要被处理的 html 文件
3. 步骤3 – 自定义 resolveCSS 方法
r1/2/3应该是数组 ，replace将style标签替换为空字符串，将数组变成真正的css/js/html文件
3. 步骤4 – 自定义 resolveJS 方法
3. 步骤5 – 自定义 resolveHTML 方法
4. 案例的两个注意点
在执行09-js文件的时候，必须先创建好clock文件夹，创建了文件夹才能执行fs.writeFile()往里头写文件，不创建clock文件夹相当于让fs.writeFile()自己去创建文件夹（路径）报错
2.http模块
2.1 什么是 http 模块（可自己手写web服务器）
2.2 进一步理解 http 模块的作用
2.3 服务器相关的概念
1. IP 地址
2. 域名和域名服务器
3. 端口号
除了80端口，剩下的端口都要在127.0.0.1 后面加端口号
2.4 创建最基本的 web 服务器
1. 创建 web 服务器的基本步骤
// 1. 导入 http 模块
const http = require('http')
// 2. 创建 web 服务器实例
const server = http.createServer()
// 3. 为服务器实例绑定 request 事件，监听客户端的请求
server.on('request', function (req, res) {
console.log('Someone visit our web server.')
})
// 4. 启动服务器
server.listen(8080, function () {
console.log('server running at http://127.0.0.1:8080')
})
2. 步骤1 - 导入 http 模块
2. 步骤2 - 创建 web 服务器实例
2. 步骤3 - 为服务器实例绑定 request 事件
.on()接收两个参数：1.事件名称 2. 触发这个事件时会执行的回调req，res两个形参
2. 步骤4 - 启动服务器
3. 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(80, () => {
console.log('server running at http://127.0.0.1')
})
//终端运行打开网址按住ctrl加鼠标左键
4. res 响应对象
res.end响应一些内容并且结束处理过程，代码在上面，加了个end();
5. 解决中文乱码问题
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
// 定义一个字符串，包含中文的内容
const str = `您请求的 URL 地址是 ${req.url}，请求的 method 类型为 ${req.method}`
// 调用 res.setHeader() 方法，设置 Content-Type 响应头，解决中文乱码的问题
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// res.end() 将内容响应给客户端
res.end(str)
})
server.listen(80, () => {
console.log('server running at http://127.0.0.1')
})
2.5 根据不同的 url 响应不同的 html 内容
1. 核心实现步骤
2. 动态响应内容
const http = require('http')
const server = http.createServer()
//上面：创建基本web服务器
server.on('request', (req, res) => {
// 1. 获取请求的 url 地址
const url = req.url
// 2. 设置默认的响应内容为 404 Not found
let content = '404 Not found!
'
// 3. 判断用户请求的是否为 / 或 /index.html 首页
// 4. 判断用户请求的是否为 /about.html 关于页面
if (url === '/' || url === '/index.html') {
content = '首页
'
} else if (url === '/about.html') {
content = '关于页面
'
}
// 5. 设置 Content-Type 响应头，防止中文乱码
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// 6. 使用 res.end() 把内容响应给客户端
res.end(content)
})
server.listen(80, () => {
console.log('server running at http://127.0.0.1')
})
2.6 案例 - 实现 clock 时钟的 web 服务器
1. 核心思路
2. 实现步骤
3. 步骤1 - 导入需要的模块
http：创建服务器；fs：读取文件；path：处理文件路径
3. 步骤2 - 创建基本的 web 服务器
3. 步骤3 - 将资源的请求 url 地址映射为文件的存放路径
clock相当于现在是个客户端
3. 步骤4 - 读取文件的内容并响应给客户端
3. 步骤5 – 优化资源的请求路径
2.6完整代码
// 1.1 导入 http 模块
const http = require('http')
// 1.2 导入 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 地址
// /clock/index.html
// /clock/index.css
// /clock/index.js
const url = req.url
// 3.2 把请求的 URL 地址映射为具体文件的存放路径
//__dirname05这个文件处于code里面和clock一样，根目录一样
// const fpath = path.join(__dirname, url)
// 5.1 预定义一个空白的文件存放路径
let fpath = ''
if (url === '/') {
//用户请求/根路径，手动拼接/clock/index.html，直接访问
fpath = path.join(__dirname, './clock/index.html')
} else {
// /index.html
// /index.css
// /index.js
//帮用户补全/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 启动服务器
server.listen(80, () => {
console.log('server running at http://127.0.0.1')
})