Node.js学习第一天
文章目录
1.javascript 在浏览器中被执行的原理
- 通过浏览器的JavaScript引擎来实现JavaScript代码的解析
2. JavaScript操作DOM和BOM的原理
- 浏览器中内置了DOM和BOM这样的API函数
- JavaScript函数调用这些函数来实现DOM和BOM的操作
3.JavaScript的运行环境
- 代码正常运行所需的必要条件
4.Node.js
4.1 什么是node.js
- node.js是基于chorm浏览器v8引擎的JavaScript运行环境
4.2 node.js运行环境
-
浏览器是JavaScript的前端运行环境
-
node.js是JavaScript的后端运行环境
-
各自封装的API函数不同,JavaScript调用也就不同,在node.js中无法进行DOM,BOM,ajax的操作
-
图解
4.3 node.js的开发
-
基于Express框架(<Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (expressjs.com.cn)>)
-
基于Electron框架(<Electron | 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 (electronjs.org)>)
-
基于restify框架(<Restify>)
4.4 node.js的学习
- js基础语法
- Node.js内置API模块(fs,path,http)
- 第三方模块(express mysql)
5.Node.js环境下运行js代码
- 在终端(cmd)中输入如下命令
node js文件路径
- js文件
console.log("hello world");
- 效果图
5.1 在当前目录打开powershell
-
快捷键:shift+鼠标右键
-
自动定位到当前目录
-
然后输入命令start cmd 可打开黑窗口
5.2 在powershell中执行js代码
node "当前要执行的js文件路径"
5.3 一些命令行的快捷键
快捷键 | |
---|---|
↑方向键 | 快速定位到上一次执行的命令 |
tab键 | 能够快速补全路径 |
esc键 | 能够快速清空当前已输入的命令 |
cls命令 | 可以清空终端 |
6.fs文件系统模块
- 用来操作文件的模块,提供了一系列的方法和属性
6.1 在JavaScript代码中,使用fs模块,需要先导入模块
const fs=require('fs')
6.2 使用fs的readFile()方法读取文件
fs.readFile(path[,options],callback)
参数名 | 说明 |
---|---|
path | 要读取的文件路径,必选 |
options | 编码格式,可选 |
callback | 回调函数,必选 |
- 回调函数callback中有两个参数 err 和 datastr
- err代表读取失败的结果
- datastr代表读取成功的结果
示例
// 导入fs文件系统模块
const fs = require('fs')
// 读取文件
fs.readFile("./files/1.txt", "utf8", function(err, datastr) {
// 失败的结果
console.log(err);
// 成功的结果
console.log(datastr);
})
- 成功效果图
// 导入fs文件系统模块
const fs = require('fs')
// 读取文件
fs.readFile("./files/11.txt", "utf8", function(err, datastr) {
// 失败的结果
console.log(err);
// 成功的结果
console.log(datastr);
})
- 失败效果图
6.3 判读读取是否成功
- 读取成功:err对象的值为null
- 读取失败:err对象的值为错误对象
示例
const fs = require('fs')
// 读取文件
fs.readFile("./files/1.txt", "utf8", function(err, datastr) {
if (err === null) {
console.log("文件读取成功" + datastr);
} else {
console.log("文件读取失败" + err.message);
}
})
- 效果图
6.4 writeFile()写入文件
- 先指定的文件中写入内容
fs.writeFile(file,data[,options],callback)
- 参数说明
参数 | 说明 |
---|---|
file | 要写入的文件路径,必选 |
data | 要写入的文件内容,必选 |
options | 以何种方式写入文件,可选,默认utf8 |
callback | 回调函数,必选 |
示例
console.log("helo word");
const fs = require('fs')
// 写入文件
fs.writeFile("./files/2.txt", "666", function(err) {
if (err) {
console.log("写入文件失败" + err.message);
} else {
console.log("写入文件成功" + err);
}
})
- 效果图
6.5 成绩整理案例
- 成绩.txt的内容
- 整理后的内容
const fs = require('fs')
fs.readFile("./files/成绩.txt", "utf8", function(err, datastr) {
if (err) {
return console.log("成绩信息读取失败");
} else {
console.log("成绩读取成功");
console.log("开始写文件到成绩-ok------");
// 将=号替换成:号
while (datastr.indexOf("=") != -1) {
datastr = datastr.replace("=", ":")
}
console.log(datastr);
// 使用空格分隔字符串,得到字符数组
var dataarr = datastr.split(" ");
var newStr = dataarr.join("\r\n");
// 整理后的内容写入成绩-ok.txt中
fs.writeFile("./files/成绩-ok.txt", newStr, function(err) {
if (err) {
return console.log("行数据写入失败");
} else {
console.log("数据写入成功");
}
})
}
})
6.6 路径动态拼接的问题
- 使用fs模块读取文件时,如果提供的是以./ 或 …/开头的相对路径时,容易出现路径动态拼接错误
- 原因:代码在运行时,会以执行node命令时所处的目录,动态拼接出文件的完整路径
示例
const fs = require('fs')
fs.readFile("./files/1.txt", "utf8", function(err, datastr) {
if (err) {
return console.log("文件读取失败" + err.message);
} else {
console.log("文件读取成功" + datastr);
}
})
- 效果图
解决方案1
- 使用文件的绝对路径
const fs = require('fs')
fs.readFile("E:\\node.js代码\\day01\\files\\1.txt", "utf8", function(err, datastr) {
if (err) {
return console.log("文件读取失败" + err.message);
} else {
console.log("文件读取成功" + datastr);
}
})
- 效果图
解决方案2(推荐)
- 使用__dirname:代表当前文件所处的目录
const fs = require('fs')
fs.readFile(__dirname+"/files/1.txt", "utf8", function(err, datastr) {
if (err) {
return console.log("文件读取失败" + err.message);
} else {
console.log("文件读取成功" + datastr);
}
})
- 效果图
7. path模块
- 概念:用来处理路径的模块,提供了一系列的属性和方法
7.1 path模块的使用
- 使用前需要导入模块
const path=require('path')
7.2 path.join()方法(推荐使用)
-
将多个字符串拼接成一个完整的路径字符串
-
语法
path.join([...paths])
- 参数说明
参数 | 说明 |
---|---|
…path | 路径片段的序列 |
返回值 | string类型,路径字符串 |
示例
const path = require('path')
var str = path.join('a/b/v', '../', '/m/n', 'c');
console.log(str);
var str2 = path.join(__dirname, "./files/1.txt");
console.log(str2);
- 效果图
注意点
-
../
路径拼接后会抵消一层目录 -
以后凡涉及路径拼接的操作,都推荐使用path.join()方法处理,不推荐使用+号拼接字符串
7.3 path.basename()方法
-
获取文件路径的最后一个部分,即文件名的部分
-
语法
path.basename(path[,ext])
- 参数说明
参数 | 说明 |
---|---|
path | 一个路径名的字符串 |
ext | 可选参数,表示文件扩展名 |
返回值 | string类型,文件路径的最后一个部分 |
示例
const path = require('path')
var pathstr = "a/b/c/index.html"
// 获取路径的最后一个部分
var strName = path.basename(pathstr)
console.log(strName);
// 添加文件扩展名参数,则返回值中不包含文件扩展名
var strName2 = path.basename(pathstr, '.html');
console.log(strName2);
- 效果图
7.4 path.extname()方法
-
获取一个路径名中的扩展名的部分
-
语法
path.extname(path)
- 参数说明
参数 | 说明 |
---|---|
path | 路径的字符串 |
返回值 | 扩展名字符串 |
示例
const path = require('path')
// 定义一个文件存放路径
var fpath = "a/b/c/index.html"
// 获取文件路径中的扩展名
var extName = path.extname(fpath);
console.log(extName);
- 效果图
8.一个时钟案例(拆分HTML文件中的style标签的内容和script标签内的内容)
思路
- 代码实现
// 导入fs模块
const fs = require('fs')
// 导入path模块
const path = require('path')
// 定义一个匹配style标签的正则表达式
// \s 代表任意空白字符,\S代表任意非空白字符,*代表匹配多次,结束标签中的<\/style> 的\用于转义,防止不合法
var regStyle = /<style>[\s\S]*<\/style>/
// 定义一个匹配script标签内容的正则表达式
var regScript = /<script>[\s\S]*<\/script>/
// 获取files下index.html文件的字符串内容
var htmlPath = path.join(__dirname, "./index.html");
fs.readFile(htmlPath, "utf8", function(err, datastr) {
if (err) {
return console.log('读取文件失败' + err.message);
} else {
console.log('读取文件成功');
// 存放文件字符串
var htmlStr = datastr;
resloveCss(htmlStr);
resloveJs(htmlStr);
resloveHtml(htmlStr);
}
})
// 将内嵌的style标签的内容写入css文件
function resloveCss(htmlStr) {
// 匹配正则表达式
var styleStr = regStyle.exec(htmlStr);
// 将标签名去除
// console.log(styleStr);
var cssStr = styleStr[0].replace("<style>", "").replace("</style>", "");
var cssPath = path.join(__dirname, "./files/index.css");
fs.writeFile(cssPath, cssStr, function(err) {
if (err) {
return console.log("写入文件失败" + err.message);
} else {
console.log("写入index.css成功");
}
})
}
// 将内嵌script标签内的内容写入 js文件中
function resloveJs(htmlStr) {
var scriptStr = regScript.exec(htmlStr);
var jsStr = scriptStr[0].replace("<script>", "").replace("</script>", "");
var jsPath = path.join(__dirname, "./files/index.js")
fs.writeFile(jsPath, jsStr, function(err) {
if (err) {
return console.log("写入文件失败" + err.message);
} else {
console.log("写入index.js成功");
}
})
}
// 将html文件中的内嵌式style 和 script 标签的内容替换为 外联式的引用
function resloveHtml(htmlStr) {
var newHtml = htmlStr.replace(regStyle, "<link rel='stylesheet' href='./index.css'/>").replace(regScript, "<script src='./index.js'></script>");
var newpath = path.join(__dirname, "./files/index.html");
fs.writeFile(newpath, newHtml, function(err) {
if (err) {
return console.log("html文件写入失败" + err.message);
} else {
console.log("html文件写入成功");
}
})
}
- 效果图
注意点
- fs.writeFile()方法只能用来创建文件,不能用来创建目录(目录前提要存在才能在改目录下创建文件)
- 重复调用fs.writeFile()写入同一个文件,新写入的内容会覆盖之前的旧内容