初识 node.js

1.node.js 简介

1.1.node 含义

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境（如同在前端，浏览器是js的运行环境一样）

1.2.Node.js 中的 JavaScript 运行环境

• 浏览器是 JavaScript 的前端运行环境。
• Node.js 是 JavaScript 的后端运行环境。
• Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API（因为那是浏览器内置的，nodejs中没有这些内置API）

1.3.node.js能做什么

Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API（相对底层），但是基于node.js提供的基础功能，衍生很多相关的框架

0. 基于 Express 框架（www.expressjs.com.cn/），可以快速构建 Web 应用
1. 基于 Electron 框架（electronjs.org/），可以构建跨平台的桌面应用
2. 基于 restify 框架（restify.com/），可以快速构建 API 接口项目
3. 读写和操作数据库、创建实用的命令行工具辅助前端开发等等

1.4.node学习路线

JavaScript 基础语法 + Node.js 内置 API 模块（fs、path、http等）+ 第三方 API 模块（express、mysql 等）

2.node环境安装

通过 Node.js 来运行 Javascript 代码，则必须在计算机上安装 Node.js 环境

安装包可以从 Node.js 的官网首页直接下载，进入到 Node.js 的官网首页（nodejs.org/en/ ），点击绿色的按钮，下载所需的版本后，双击直接安装即可。

2.1 LTS版本和Current版本

• LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本的 Node.js
• Current 为新特性尝鲜版，对热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js，但是对于企业级的项目可能有隐患

2.2 查看nodejs的版本号

打开终端，在终端输入命令 node –v 后，按下回车键，即可查看已安装的 Node.js 的版本号。

Windows 系统快速打开终端的方式：

使用快捷键（Windows徽标键 + R）打开运行面板，输入 cmd 后直接回车，即可打开终端。

终端（Terminal）：是专门为开发人员设计的，用于实现人机交互的一种方式

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

0. 打开终端

1. 输入 node 要执行的js文件的路径

   node 1.js

打开终端的方式（后两种方法不用输入路径，更方便）：

• win＋R，输入cmd回车
• 在所在的页面按住shift+右键打开powershell
• 在文件的路径处输入cmd

3.1 终端中的快捷键

在 Windows 的 powershell 或 cmd 终端中，我们可以通过如下快捷键，来提高终端的操作效率：

• 使用 ↑ 键，可以快速定位到上一次执行的命令
• 使用 tab 键，能够快速补全路径
• 使用 esc 键，能够快速清空当前已输入的命令
• 输入 cls 命令，可以清空终端

fs文件模块系统

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

fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求

• fs.readFile() 方法，用来读取指定文件中的内容
• fs.writeFile() 方法，用来向指定的文件中写入内容

在js代码中，如果要使用fs模块，需要先进行导入，变量命名一般和模块相同

const fs = require('fs')

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

2.1 fs.readFile() 的语法格式

使用 fs.readFile() 方法，可以读取指定文件中的内容，语法格式如下：

fs.readFile(path[,options],callback)

• 第一个参数：必选参数，字符串，表示文件的路径
• 第二个参数：可选参数，表示以什么编码格式来读取文件
• 第三个参数：必选参数，通过回调函数拿到读取的结果

2.2 fs.readFile()示例

以utf8的编码格式读取文件，并打印err和dataStr的值：

// 导入fs模块
const fs = require('fs')
fs.readFile('./file/1.txt','utf8',function(err,data){
    // 打印失败的结果
    console.log(err);
    console.log('-----------');
    // 打印成功的结果
    console.log(data);
})
// 所读取的文件如果存在 err的值为null，data的值为内容
// 所读取的文件如果不存在 err的值为错误对象，data的值为undefined

2.3 判断文件是否读取成功

可以判断 err 对象是否为 null，从而知晓文件读取的结果；如果err为null则读取成功，反之读取失败

const fs = require('fs');
​
fs.readFile('./file/1.txt','utf-8',function(err,dataStr){
    if(err){
        return console.log('文件读取失败',err.message);
    }
    console.log('文件读取成功',dataStr);
})

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

3.1 fs.writeFile() 的语法格式

使用 fs.writeFile() 方法，可以向指定的文件中写入内容，语法格式如下：

fs.writeFile(file,data[,options],callback)

• 参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径
• 参数2：必选参数，表示要写入的内容
• 参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8
• 参数4：必选参数，文件写入完成后的回调函数

3.2 示例代码

const fs = require('fs')
​
fs.writeFile('./file/2.txt','abcd',function(err){
    console.log(err);
})
// 如果文件写入成功，err的值为null，如果没有对应文件也会进行创建
// 如果文件写入失败，err的值为错误对象

3.3 判断文件是否写入成功

跟上面判断是否读取成功的方法类似，代码如下：

const fs = require('fs')
​
fs.writeFile('./file/3.txt','哈哈哈',function(err){
    if(err){
        return console.log('文件写入失败',err.message);
    }
    console.log('文件写入成功');
})

3.4 练习-成绩整理

使用 fs 文件系统模块，将素材目录下素材.txt文件中的考试数据，整理到成绩-ok.txt文件中。

整理前，成绩.txt文件中的数据格式如下：

小红=99 小白=100 小黄=70 小黑=66 小绿=88

整理完成之后，希望得到的成绩-ok.txt文件中的数据格式如下：

小红:99
小白:100
小黄:70
小黑:66
小绿:88

核心实现步骤：

• 导入需要的 fs 文件系统模块
• 使用 fs.readFile() 方法，读取素材目录下的 成绩.txt 文件
• 判断文件是否读取失败
• 文件读取成功后，处理成绩数据
• 将处理完成的成绩数据，调用 fs.writeFile() 方法，写入到新文件 成绩-ok.txt 中

实现代码如下：

const fs = require('fs');
​
fs.readFile('./file/素材.txt','utf8',function(err,dataStr){
    if(err){
        console.log('读取失败',err.message);
    }
    // 将字符串按照空格切割成数组
    const oldContent = dataStr.split(' ');
    // 数组循环替换 = 为 ：
    const newContent = [];
    oldContent.forEach(item => {
        newContent.push(item.replace('=',':'))
    })
    // 数组拼接成字符串，并且要换行
    const res = newContent.join('\r\n');
​
    // 将结果写入新文件
    fs.writeFile('./file/成绩-ok.txt',res,function(err){
        if(err){
            console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
})

3.5 路径动态拼接问题

在使用 fs 模块操作文件时，如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时，很容易出现路径动态拼接错误的问题（相对路径才有拼接失错误的问题）

PS D:\Learn-nodejs\nodejs笔记\day1\code> node .\05.动态路径凭借问题.js
文件读取成功
PS D:\Learn-nodejs\nodejs笔记\day1\code> cd ../
PS D:\Learn-nodejs\nodejs笔记\day1> node .\code\05.动态路径凭借问题.js
文件读取失败 ENOENT: no such file or directory, open 'D:\Learn-nodejs\nodejs笔记\day1\file\1.txt'
PS D:\Learn-nodejs\nodejs笔记\day1> cd ../
PS D:\Learn-nodejs\nodejs笔记> node .\day1\code\05.动态路径凭借问题.js
文件读取失败 ENOENT: no such file or directory, open 'D:\Learn-nodejs\nodejs笔记\file\1.txt'
PS D:\Learn-nodejs\nodejs笔记>

js 文件如下：

const fs = require('fs');
​
fs.readFile('./file/1.txt','utf8',function(err,dataStr){
    if(err){
        return console.log('文件读取失败',err.message);
    }
    console.log('文件读取成功');
})

原因：代码在运行的时候，会以执行 node 命令时所处的目录，动态拼接出被操作文件的完整路径

解决方案：在使用 fs 模块操作文件时，直接提供完整的路径，不要提供 ./ 或 ../ 开头的相对路径，从而防止路径动态拼接的问题，代码如下：

const fs = require('fs');
​
fs.readFile('D:\Learn-nodejs\nodejs笔记\day1\code\file\1.txt',function(err,dataStr){
    if(err){
        return console.log('文件读取失败',err.message);
    }
    console.log('文件读取成功');
})

可以在编辑器里直接复制文件的路径进行粘贴，需要注意的是要补充多一个转义符（‘\’）

使用绝对路径的缺点是移植性差，不利于维护

最佳解决方案：使用 __dirname拼接相对路径，__dirname表示当前文件所在的路径（这里的当前文件是演示路径文件的js文件，__dirname不会随着node 执行的目录而改变）。代码如下：

const fs = require('fs');
​
fs.readFile(__dirname + '/file/1.txt',function(err,dataStr){
    if(err){
        return console.log('文件读取失败',err.message);
    }
    console.log(__dirname);
    console.log('文件读取成功');
})

Path 路径模块

1.什么是路径模块

path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。

例如：

• path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
• path.basename() 方法，用来从路径字符串中，将文件名解析出来

在js的代码中要使用该模块，需要先进行导入

const path = require('path');

2.路径拼接

2.1 path.join() 的语法格式

使用 path.join() 方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下：

path.join([...paths])

参数解读：

• ...paths <string> 路径片段的序列，可以有任意个
• 返回值: <string>

2.2 代码示例

const fs = require('fs');
const path = require('path');
​
fs.readFile(path.join(__dirname,'/file/1.txt'),'utf8',function(err,dataStr){
    if(err){
        console.log(err.message);
    }
    console.log('读取成功',dataStr);
})

涉及到路径拼接的操作，都要使用 path.join() 方法进行处理。不要直接使用 + 进行字符串的拼接。使用加号进行处理的时候，当字符串多写了斜线或者点号都会被拼接到路径中，造成文件的读取失败。path.join() 方法就没这个问题，会自动进行处理

3.获取路径中的文件名

3.1 path.basename() 的语法格式

使用 path.basename() 方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下：

path.basename(path[,ext])

参数解读：

• path <string> 必选参数，表示一个路径的字符串
• ext <string> 可选参数，表示文件扩展名
• 返回: <string> 表示路径中的最后一部分

3.2 示例代码

const path = require('path');
​
const fpath = 'a/b/c/index.html' // 假设的路径
​
const fullName =  path.basename(fpath);
console.log(fullName); // 输出 index.html
​
const nameWithoutext = path.basename(fpath,'.html')
console.log(nameWithoutext); // 输出 index

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

4.1 path.extname() 的语法格式

使用 path.extname() 方法，可以获取路径中的扩展名部分，语法格式如下：

path.extname(path)

参数解读

• path <string>必选参数，表示一个路径的字符串
• 返回: <string> 返回得到的扩展名字符串

4.2示例代码

使用 path.extname() 方法，可以获取路径中的扩展名部分

const path = require('path');
​
const fpath = 'a/b/c/index.html' // 假设的路径
​
const ext = path.extname(fpath)
console.log(ext);// 输出结果为 .html

5.时钟案例

5.1要实现的功能

将素材目录下的 index.html 页面，拆分成三个文件，分别是：

• index.css
• index.js
• index.html

并且将拆分出来的 3 个文件，存放到 clock 目录中。素材页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index首页</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-image: linear-gradient(to bottom right, red, gold);
    }
​
    .box {
      width: 400px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 1px 1px 10px #fff;
      text-shadow: 0px 1px 30px white;
​
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 70px;
      user-select: none;
      padding: 0 20px;
​
      /* 盒子投影 */
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
    }
  </style>
</head>
​
<body>
  <div class="box">
    <div id="HH">00</div>
    <div>:</div>
    <div id="mm">00</div>
    <div>:</div>
    <div id="ss">00</div>
  </div>
​
  <script>
    window.onload = function () {
      // 定时器，每隔 1 秒执行 1 次
      setInterval(() => {
        var dt = new Date()
        var HH = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()
​
        // 为页面上的元素赋值
        document.querySelector('#HH').innerHTML = padZero(HH)
        document.querySelector('#mm').innerHTML = padZero(mm)
        document.querySelector('#ss').innerHTML = padZero(ss)
      }, 1000)
    }
​
    // 补零函数
    function padZero(n) {
      return n > 9 ? n : '0' + n
    }
  </script>
</body>
​
</html>

5.2 实现步骤

0. 使用 fs 模块，读取需要被处理的 HTML 文件
1. 创建两个正则表达式，分别用来匹配 <style> 和<script>标签
2. 自定义 resolveCSS 方法，来写入 index.css 样式文件
3. 自定义 resolveJS 方法，来写入 index.js 脚本文件
4. 自定义 resolveHTML 方法，来写入 index.html 文件

5.3 实现代码如下：

// 导入模块
const fs = require('fs');
const path = require('path');
​
// 读取文件
fs.readFile(path.join(__dirname,'file/index.html'),'utf8',function(err,dataStr){
    if(err) return console.log('读取失败' + err.message);
    // 成功读取文件的时候调用的函数
    resolveCSS(dataStr);
    resolveScript(dataStr);
    resolveHtml(dataStr);
})
​
// 匹配 css 和 js 的正则表达式  [s]表示，只要出现空白就匹配 [S]表示，非空白就匹配
// * 就是单个字符匹配任意次
const regCss = /<style>[\s\S]*</style>/
const regScript = /<script>[\s\S]*</script>/
​
// 将css内容提取出来并且写入新文件
function resolveCSS(htmlStr){
    // 通过正则表达式的 exex 方法进行筛选，得到一个数组
    const arrayCSS =  regCss.exec(htmlStr);
    // 取出数组的第一项：style标签及其里面的内容
    const newCSS = arrayCSS[0];
    // 将style标记替换
    const content_css = newCSS.replace('<style>','').replace('</style>','');
    // 将取出来的 css 内容写入新文件中
    fs.writeFile(path.join(__dirname,'/clock/index.css'),content_css,'utf8',function(err){
        if(err) return console.log('写入失败',err.message);
        console.log('写入css成功');
    })
}
​
// 将script内容提取出来并且写入新文件
function resolveScript(htmlStr){
    // 通过正则表达式的 exex 方法进行筛选，得到一个数组
    const arrayScript =  regScript.exec(htmlStr);
    // 取出数组的第一项：script标签及其里面的内容
    const newScript = arrayScript[0];
    // 将style标记替换
    const content_script = newScript.replace('<script>','').replace('</script>','');
    // 将取出来的 css 内容写入新文件中
    fs.writeFile(path.join(__dirname,'/clock/index.js'),content_script,'utf8',function(err){
        if(err) return console.log('写入失败',err.message);
        console.log('写入js成功');
    })
}
​
// 将html文件中的style和script标签替换成外链的方式
function resolveHtml(htmlStr){
    // 通过正则匹配，然后进行替换
    const content_html = htmlStr.replace(regCss,"<link rel='stylesheet' href='./index.css' />")
    .replace(regScript,"<script src='./index.js'></script>")
    // 把内容写入
    fs.writeFile(path.join(__dirname,'/clock/index.html'),content_html,'utf8',function(err){
        if(err) return console.log('写入失败',err.message);
        console.log('写入html成功');
    })
}

5.4 实现效果

分离后的html文件

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index首页</title>
  <link rel='stylesheet' href='./index.css' />
</head>
​
<body>
  <div class="box">
    <div id="HH">00</div>
    <div>:</div>
    <div id="mm">00</div>
    <div>:</div>
    <div id="ss">00</div>
  </div>
​
  <script src='./index.js'></script>
</body>
​
</html>

分离后的css文件

​
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-image: linear-gradient(to bottom right, red, gold);
    }
​
    .box {
      width: 400px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 1px 1px 10px #fff;
      text-shadow: 0px 1px 30px white;
​
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 70px;
      user-select: none;
      padding: 0 20px;
​
      /* 盒子投影 */
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
    }
  

分离后的js文件

​
    window.onload = function () {
      // 定时器，每隔 1 秒执行 1 次
      setInterval(() => {
        var dt = new Date()
        var HH = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()
​
        // 为页面上的元素赋值
        document.querySelector('#HH').innerHTML = padZero(HH)
        document.querySelector('#mm').innerHTML = padZero(mm)
        document.querySelector('#ss').innerHTML = padZero(ss)
      }, 1000)
    }
​
    // 补零函数
    function padZero(n) {
      return n > 9 ? n : '0' + n
    }
  

5.5 注意事项

• fs.writeFile() 方法只能用来创建文件，不能用来创建路径
• 重复调用 fs.writeFile() 写入同一个文件，新写入的内容会覆盖之前的旧内容