Node.js学习第一天

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()写入同一个文件，新写入的内容会覆盖之前的旧内容