了解node基本用法语法、fs文件系统模块、path路径模块
Node.js简介
概念：是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 的官网地址： https://nodejs.org/zh-cn/
Node.js 中的 JavaScript 运行环境
注意：
① 浏览器是 JavaScript 的前端运行环境。
② Node.js 是 JavaScript 的后端运行环境。
③ Node.js 中无法调用 DOM 和 BOM 等
浏览器内置 API。
Node.js 环境的安装
Node.js 的官网首页（https://nodejs.org/en/）双击下载
LTS 版本和 Current 版本的区别
① LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本的 Node.js。
② Current 为新特性尝鲜版，对热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js。但是，Current 版本中可
能存在隐藏的 Bug 或安全性漏洞，因此不推荐在企业级项目中使用 Current 版本的 Node.js。
查看已安装的 Node.js 的版本号
使用快捷键（Windows徽标键 + R）打开运行面板，输入 cmd 后直接回车，即可打开终端
打开终端，在终端输入命令 node –v 后，即可查看下载的版本
终端中的快捷键
① 使用 ↑ 键，可以快速定位到上一次执行的命令
② 使用 tab 键，能够快速补全路径
③ 使用 esc 键，能够快速清空当前已输入的命令
④ 输入 cls 命令，可以清空终端
fs 文件系统模块
fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求
JavaScript 代码中，使用 fs 模块来操作文件，则需要使用如下的方式先导入它：
读取指定文件中的内容
1、fs.readFile() 的语法格式
参数解读：
• 参数1：必选参数，字符串，表示文件的路径。
• 参数2：可选参数，表示以什么编码格式来读取文件。
• 参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果。
示列：
1 // 1. 导入 fs 模块，来操作文件 2 const fs = require('fs') 3 // 2. 调用 fs.readFile() 方法读取文件 4 // 参数1：读取文件的存放路径 5 // 参数2：读取文件时候采用的编码格式，一般默认指定 utf8 6 // 参数3：回调函数，拿到读取失败和成功的结果 err dataStr 7 fs.readFile('./files/11.txt', 'utf8', function(err, dataStr) { 8 // 2.1 打印失败的结果 9 // 如果读取成功，则 err 的值为 null 10 // 如果读取失败，则 err 的值为 错误对象，dataStr 的值为 undefined 11 // console.log(err) 12 // console.log('-------') 13 // 2.2 打印成功的结果 14 console.log(dataStr) 15 // 判断文件是否读取成功 16 if (err) { 17 return console.log("读取文件失败！" + err.message) 18 } 19 console.log("读取文件成功！" + dataStr) 20 })
向指定的文件中写入内容
2、fs.writeFile() 的语法格式
参数解读：
• 参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。
• 参数2：必选参数，表示要写入的内容。
• 参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8。
• 参数4：必选参数，文件写入完成后的回调函数。
示列：
1 // 1. 导入 fs 文件系统模块 2 const fs = require('fs') 3 // 2. 调用 fs.writeFile() 方法，写入文件的内容 4 // 参数1：表示文件的存放路径 5 // 参数2：表示要写入的内容 6 // 参数3：回调函数 7 fs.writeFile('./files/3.txt', 'ok123', function(err) { 8 // 2.1 如果文件写入成功，则 err 的值等于 null 9 // 2.2 如果文件写入失败，则 err 的值等于一个 错误对象 10 console.log(err) 11 // 3判断文件是否写入成功 12 if (err) { 13 return console.log('文件写入失败！' + err.message) 14 } 15 console.log('文件写入成功！') 16 })
fs 模块 - 路径动态拼接的问题
在使用 fs 模块操作文件时，如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时，很容易出现路径动态拼接错误的问题。
原因：代码在运行的时候，会以执行 node 命令时所处的目录，动态拼接出被操作文件的完整路径。
解决方案：在使用 fs 模块操作文件时，直接提供完整的路径，不要提供 ./ 或 ../ 开头的相对路径，从而防止路径动态拼接的问题。
path 路径模块
概念：是 Node.js 官方提供的、用来处理路径的模块
1、path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
语法格式
参数解读：
• ...paths <string> 路径片段的序列
• 返回值: <string>
代码示例
注意：今后凡是涉及到路径拼接的操作，都要使用 path.join() 方法进行处理。不要直接使用 + 进行字符串的拼接。
2、path.basename() 获取路径中的文件名
参数解读：
• path <string> 必选参数，表示一个路径的字符串
• ext <string> 可选参数，表示文件扩展名
• 返回: <string> 表示路径中的最后一部分
代码示例
3、path.extname() 获取路径中的文件扩展名
语法格式
参数解读：
• path <string>必选参数，表示一个路径的字符串
• 返回: <string> 返回得到的扩展名字符串
代码示例
综合案例 - 时钟案例
需求：
将素材目录下的 page.html 页面，拆分成三个文件，分别是：
• index.css
• index.js
• index.html
素材 page.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 html, 11 body { 12 margin: 0; 13 padding: 0; 14 height: 100%; 15 background-image: linear-gradient(to bottom right, red, gold); 16 } 17 18 .box { 19 width: 400px; 20 height: 250px; 21 background-color: rgba(255, 255, 255, 0.6); 22 border-radius: 6px; 23 position: absolute; 24 left: 50%; 25 top: 40%; 26 transform: translate(-50%, -50%); 27 box-shadow: 1px 1px 10px #fff; 28 text-shadow: 0px 1px 30px white; 29 30 display: flex; 31 justify-content: space-around; 32 align-items: center; 33 font-size: 70px; 34 user-select: none; 35 padding: 0 20px; 36 37 /* 盒子投影 */ 38 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2))); 39 } 40 </style> 41 </head> 42 43 <body> 44 <div class="box"> 45 <div id="HH">00</div> 46 <div>:</div> 47 <div id="mm">00</div> 48 <div>:</div> 49 <div id="ss">00</div> 50 </div> 51 52 <script> 53 window.onload = function () { 54 // 定时器，每隔 1 秒执行 1 次 55 setInterval(() => { 56 var dt = new Date() 57 var HH = dt.getHours() 58 var mm = dt.getMinutes() 59 var ss = dt.getSeconds() 60 61 // 为页面上的元素赋值 62 document.querySelector("#HH").innerHTML = padZero(HH) 63 document.querySelector("#mm").innerHTML = padZero(mm) 64 document.querySelector("#ss").innerHTML = padZero(ss) 65 }, 1000) 66 } 67 // 补零函数 68 function padZero(n) { 69 return n > 9 ? n : "0" + n 70 } 71 72 </script> 73 </body> 74 75 </html>
拆分代码如下所示：
1 // 1 导入 2 // 导入fs文件模块 3 const fs = require("fs") 4 // 导入路径 5 const path = require("path") 6 // const { join } = require("path/posix") 坑：敲resove这几个字代码后，会自动形成此句代码，导致报错，将其注释或者删除即可正常运行 7 // 2 定义正在表达式 8 // \代表转义符，\s匹配空格（包含换行符、制表符空格符），\S非空格 9 // []匹配方括号中的任意字符, *重复0次或更多次， 10 const regStyle = /<style>[\s\S]*<\/style>/ 11 const regStcript = /<script>[\s\S]*<\/script>/ 12 // 3 读取文件 13 fs.readFile(path.join(__dirname, "./index.html"), "utf8", function (err, data) { 14 // 判断文件是否读取成功 15 if (err) { 16 // 读取文件失败 17 console.log("读取文件失败" + err.message) 18 } else { 19 // 读取文件成功 20 console.log("读取文件成功" + data) 21 // 读取文件成功后，调用对应的 3 个方法，解析出 css、js、html 内容 22 resoveCss(data) 23 resoveJs(data) 24 resoveHTML(data) 25 } 26 // 3 写入html.css样式表 27 function resoveCss(htmlStr) { 28 // 使用正则提取页面中的 <style></style> 29 const r1 = regStyle.exec(htmlStr) 30 // cnsole.log(r1[0]) 31 // 将提取出来的样式字符串，做进一步的处理 32 const newCss = r1[0].replace("<style>", "").replace("</style>", "")
//###注意： 写入文件时，需要先建个文件(如index.css)，然后再终端运行 node .\clock.js,样式表里才会显示出来 33 fs.writeFile( 34 path.join(__dirname, "./index.css"), 35 newCss, 36 function (err, data) { 37 if (err) { 38 console.log("CSS样式文件写入失败" + err.message) 39 } else { 40 console.log("CSS样式文件写入成功") 41 } 42 } 43 ) 44 } 45 // 4 写入html.js样式表 46 function resoveJs(htmlJs) { 47 // exec 检索字符串 中的正在表达式的匹配 48 const r2 = regStcript.exec(htmlJs) 49 // r2[0]拿到匹配成功后索引为0的元素 50 const newJS = r2[0].replace("<script>", "").replace("</script>", "") 51 fs.writeFile( 52 path.join(__dirname, "./index.js"), 53 newJS, 54 function (err, data) { 55 if (err) { 56 console.log("JS文件写入成功" + err.message) 57 } else { 58 console.log("JS文件写入成功！") 59 } 60 } 61 ) 62 } 63 // 4 写入index.html样式表 64 function resoveHTML(html) { 65 const newHTML = html 66 .replace(regStyle, '<link rel="stylesheet" href="./index.css">') 67 .replace(regStcript, '<script src="./index.js"></script>') 68 fs.writeFile(path.join(__dirname, "./index.html"), newHTML, function (err) { 69 if (err) { 70 console.log("HTML文件写入失败！" + err.message) 71 } else { 72 console.log("HTML文件写入成功！") 73 } 74 }) 75 } 76 })
