2.1.1 读取文件内容#

1
# // 导入fs 模块
2
const fs = require('fs')
3
// 操作文件
4
fs.readFile('./files/1.txt', 'utf-8', function (err, dataStrs) {
5
    # // 打印失败的结果
6
    # // 如果读取成功则err的值为null
7
    # // 如果读取失败则err的值为错误信息 undefined
8
    console.log(err);
9
    console.log("-----");
10
    # // 打印成功的结果
11
    console.log(dataStrs);
12
})
13

14
# 1.txt 文件内容的输出结果:
15
null
16
-----
17
1111

2.1.2 异步读取文件#

1
const fs = require('fs')
2
fs.readFile('./files/1.txt', 'utf-8', function (err, dataStrs) {
3
    if (err) {
4
        return console.log('文件读取失败', err.message)
5
    }
6
    return console.log('文件读取成功', dataStrs)
7
})
8
# 输出结果:
9
文件读取成功 1111

2.1.3 写入文件内容#

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

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

• 注意：当我们重复调用fs.writeFile()方法写入文件的时候，会覆盖掉之前的内容。

• fs.writeFile()的示例代码:

1
const fs = require('fs')
2
# //  调用fs.writeFile方法写入文件内容
3
# // 参数1：写入文件的路径
4
# // 参数2：写入的内容
5
# // 参数3：回调函数
6
fs.writeFile('./files/2.txt', 'hello world', function(err){
7
# // 如果没有出错，则返回null，如果出错，则返回错误信息
8
    console.log(err);
9
})
10
# 输出结果:
11
null

2.1.4 异步写入文件内容#

1
const fs = require('fs')
2
# //  调用fs.writeFile方法写入文件内容
3
# // 参数1：写入文件的路径
4
# // 参数2：写入的内容
5
# // 参数3：回调函数
6
fs.writeFile('./files/3.txt', 'hello world', function(err){
7
// 如果没有出错，则返回null，如果出错，则返回错误信息undefined
8
if(err){
9
    return console.log('写入失败', err.message)
10
}
11
    console.log('3.txt,写入成功');
12
})
13
# 输出结果为:
14
3.txt,写入成功

2.1.5 成绩整理案例：#

此案例是结合前面fs模块的读写操作进行对成绩.txt文件的操作，将读取到的内容进行整理，并写入新的文件中。

1
const fs = require('fs')
2
fs.readFile('./files/成绩.txt', 'utf-8', function (err, dataStrs) {
3
    if (err) {
4
        return console.log('文件读取失败', err.message);
5
    }
6
    console.log('文件读取成功', dataStrs);
7

8
    // 1.将数据进行分割
9
    const arrOld = dataStrs.split(' ')
10
    console.log(arrOld);
11

12
    // 2.遍历分割后的数据成为一个新数组
13
    const arrNew = []
14
    arrOld.forEach(item => {
15
        arrNew.push(item.replace('=', ': '))
16
    });
17
    console.log(arrNew);
18

19
    // 3.进行数据的拼接
20
    const newStr = arrNew.join('\r\n')
21
    console.log(newStr);
22

23
    // 4.将拼接后的数据写入到文件中
24
    fs.writeFile('./files/整理后的成绩.txt', newStr, function (err) {
25
        if (err) {
26
            return console.log('文件写入失败', err.message)
27
        }
28
        return console.log('文件写入成功')
29
})
30
})
31

32
// 输出结果：
33
小红: 99
34
小白: 100
35
小黄: 70
36
小黑: 66
37
小绿: 88
38
文件写入成功

2.1.6 fs模块-路径动态拼接的问题#

在使用fs模块操作文件时，如果提供的操作路径是以./或../开头的相对路径，很容易出现路径动态拼接错误的问题。 原因：代码在运行的时候，会以执行node命令时所处的目录，动态拼接出被操作文件的完整路径

示例代码：

1
const fs = require('fs')
2

3
fs.readFile('./files/1.txt', 'utf-8', function (err, dataStrs) {
4
    if(err) {
5
        return console.log('文件读取失败', err.message)
6
    }
7
    console.log('文件读取成功', dataStrs);
8

9
})

1
# 当我们没有处在node.js的根目录下时，在控制台执行以下命令时，会出现报错，文件无法被读取
2
node ./code/ndoe 动态路径错误问题.js

• 解决方法：使用__dirname来获取当前文件的所在目录，并拼接成完整的文件路径

示例代码:

1
const fs = require('fs')
2

3
fs.readFile(__dirname + './files/1.txt', 'utf-8', function (err, dataStrs) {
4
    if(err) {
5
        return console.log('文件读取失败', err.message)
6
    }
7
    console.log('文件读取成功', dataStrs);
8

9
})

2.2.1 什么是path路径模块?#

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

例如:

• path.join()方法用来拼接路径`
• path.basename()方法用来从路径字符串中，将文件名解析出来`

当然如果要在JavaScript代码中，使用path模块来处理路径，则需要先导入模块，代码如下:

1
const path = require('path');

2.2.2 path.join()方法#

使用path.join()方法来拼接路径，可以把多个路径片段拼接成一个完整的路径字符串,代码如下:

• 示例一:

1
// 导入模块
2
const path = require('path')
3
const pathStr = path.join('/a', '/b/c', '../', './d','e')
4
// 注意../是可以抵消一层路径的
5
console.log(pathStr) // 输出结果: \a\b\d\e

• 示例二:

1
// 导入模块
2
const path = require('path')
3
const pathStr1 = path.join(__dirname, './files/1.txt')
4
console.log(pathStr1)
5

6
// 输出结果: D:\Node.js基础\day1\CODE.\files\1.txt
7
// 这里是根据我电脑上的路径来写的,只做演示作用

示例二的方法更加方便简洁，因此在实际开发中，我们推荐使用示例二。

在今后的开发中，凡是涉及到路径拼接的操作，都要使用path.join()方法来拼接路径，不要直接使用 + 进行字符串的拼接

• 示例代码:

1
const fs = require('fs');
2
const path = require('path');
3

4
fs.readFile(path.join(__dirname, '/files/example.txt'), 'utf8', (err, dataStr) => {
5
    if (err) {
6
        console.error('文件读取失败', err.message);
7
    }
8
    console.log(dataStr);
9
})
10

11
// 输出结果:
12
path.join路径演示

2.2.3 path.basename()方法#

path.basename() 的语法格式:

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

1
path.basename(pathp[, ext])

• path 必选参数
• ext 可选参数, 表示文件扩展名
• 返回: 表示路径中的最后一部分

path.basename() 的使用示例:

1
const path = require('path');
2
const fpath = '/a/b/c/index.html';
3

4
var fullName = path.basename(fpath);
5
console.log(fullName); // 输出结果: index.html

1
const path = require('path')
2
const gpath = '/a/b/c/index.html'
3

4
// 参数二为可选参数, 表示文件扩展名
5
var nameWithoutExt = path.basename(gpath, '.html')
6
consolo.log(nameFullName) // 输出结果: index

2.2.4 path.extname()#

path.extname()的语法格式:

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

1
path.extname(path)

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

path.extname()的代码示例:

1
const path = require('path')
2
// 这是文件的存放路径
3
const fpath = '/a/b/c/index.html'
4

5
const fext = path.extname(fpath)
6
console.log(fext)
7

8
// 输出结果：.html

2.2.5 时钟案例#

接下来我将演示一个时钟案例，此案例目的是为了能够让学习者更好的理解node.js中模块化的设定和使用。

这是我们要解耦的html文件中的源码: 可以看到该源码中包含了css 和 javascript部分 后面我们将对这两部分进行解耦

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
  <title>index首页</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;
56 collapsed lines
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
    // 补零函数
69
    function padZero(n) {
70
      return n > 9 ? n : '0' + n
71
    }
72
  </script>
73
</body>
74

75
</html>

• 创建一个clock.js文件

创建一个名为clock.js的文件，并写入以下代码:

1
// 1.导入模块
2
const fs = require('fs')
3
const path = require('path')
4

5
// 2.创建正则表达式,用于匹配对应的字符串
6
// 2.1.匹配style标签
7
const regiStyle = /<style>[\s\S]*<\/style>/
8
// 2.2.匹配script标签
9
const regiScript = /<script>[\s\S]*<\/script>/
10

11
// 调用fs.readFile()方法,读取文件
12
fs.readFile(path.join(__dirname, './index.html'), 'utf8', function (err, dataStr) {
13
    if(err) {
14
        return console.log('读取文件失败！' + err.message)
15
    }
16
    console.log('读取文件成功！', dataStr)
17

18
    // 调用方法, 传入dataStr读取到的内容
19

59 collapsed lines
20
    // 1.拆分HTML中的Css结构方法
21
    resoloveCss(dataStr)
22

23
    // 2.拆分HTML中的JS结构方法
24
    resolveJs(dataStr)
25

26
    // 3.创建Html文件
27
    resolveHtml(dataStr)
28

29
})
30

31
// 创建方法
32
// 1.resolve CSS 方法
33
function resoloveCss(htmlStr) {
34
    // 1.提取(匹配html页面中符合条件的字符串)
35
    const r1 = registStyle.exec(htmlStr)
36
    console.log(r1);
37

38
    // 2.替换
39
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')
40
    console.log('替换后的newHtml为:', newCss);
41
    // 3.写入
42
    fs.writeFile(path.join(__dirname, './files/newCss.css'), newCss, function (err) {
43
        if(err) {
44
            return console.log('写入文件失败', err.message);
45
        }
46
        console.log('写入文件成功');
47
    })
48
}
49

50
// 2.resolveJs()方法
51
function resolveJs(htmlData) {
52
    // 1.提取(符合的字符串) 匹配成功则返回数组,失败则返回null
53
    const s1 = registScript.exec(htmlData)
54
    console.log(s1);
55
    // 2.替换
56
    const newS1 = s1[0].replace('<script>', '').replace('</script>', '')
57
    console.log('newS1替换结构为:', newS1);
58
    // 3.写入
59
    fs.writeFile(path.join(__dirname, './files/newJs.js'), newS1, function(err) {
60
        if(err) {
61
            return console.log('写入文件失败', err.message);
62
        }
63
        console.log('写入文件成功');
64
    })
65
}
66

67
// 3.创建Html文件
68
function resolveHtml(htmlData) {
69
    const newHtml = htmlData.replace(registStyle, '<link rel="stylesheet" href="./newCss.css">').replace(registScript, '<script src="./newJs.js"></script>')
70
    console.log('newHtml打印结果:', newHtml);
71

72
    fs.writeFile(path.join(__dirname, './files/newHtml.html'), newHtml, function(err) {
73
        if(err) {
74
            return console.log('写入文件失败', err.message);
75
        }
76
        console.log('写入文件成功');
77
    })
78
}

运行这个代码，会生成一个名为 newHtml.html 的文件，并写入新的 HTML 内容。 将原本的index.html中html css javascript的内容全部分离出来，并逐个写入新的文件中,最后在通过html的link方法引入css和JavaScript文件，完成页面的模块化，这点与Vue框架并无太大差别

2.3.1 什么是http模块？#

在认识到http模块之前，我们先了解一些概念：

• 什么是客户端，什么是服务器?

  在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑，叫做服务器。

• 而http模块是什么呢?

  http模块是Node.js官方提供的、用来创建Web服务器的模块。通过http模块提供的http.createServer()方法，就能方便的把一台普通电脑，变成一台Web服务器，从而对外提供web资源服务。

2.3.2 如何使用http模块#

如果希望使用http模块，首先需要引入该模块：

1
const http = require('http');

2.3.3 进一步理解http模块的作用#

服务器和普通电脑的区别在于，服务器上安装了web服务器软件，例如：IIS、Apache等。通过安装这些服务器软件，就能把一台电脑变成一台web服务器。

在Node.js中，我们不需要使用IIS、Apache等这些第三方服务器软件，因为我们可以基于Node.js提供的http模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供web服务。

2.3.4 服务器相关的概念#

1. IP地址：

   IP地址就是相当于互联网上每台计算机的唯一地址，因此IP地址具有唯一性，如果把“个人电脑”比作一台电话，那么IP地址就是这个电话的电话号码，只有在知道对方IP地址的前提下，才能对应电脑之间进行数据通信。

   IP地址的格式: 通常用点分十进制表示成(a.b.c.d)的形式，其中a,b,c,d都是0-255之间的十进制整数。例如：用点分十进制表示的IP地址(192.168.1.1)

   • 注意:

     1. 互联网中每台web服务器，都有自己的IP地址， 例如：大家可以在Windows的终端中运行 ping www.baidu.com 命令，就会看到百度的IP地址。

     2. 在开发期间，自己的电脑既是一台服务器，也是一个客户端，为了方便测试，可以在自己的浏览器中输入 127.0.0.1 这个IP地址，就可以访问到自己的电脑。

2. 域名和域名服务器

   尽管IP地址能够唯一地标记网络上的计算机，但IP地址是一长串数字，不直观，而且不方便于记忆，雨伞人们又发明了另一套字符串型的地址方案，即所谓的域名(Domain Name)地址。

   IP地址和域名是一一对应的关系，这份对应关系存放在一种叫做域名服务器(DNS, Domain Name Server)的电脑中。只需要通过好记的域名访问对应的服务器即可，对应的转换工作由域名服务器实现，因此，域名服务器就是提供IP地址和域名之间的转换服务的服务器

   • 注意:

     1. 单纯使用IP地址，互联网中的电脑也能够正常工作，但是有了域名的加持，能让互联网的世界变得更加方便。

     2. 在开发测试期间， 127.0.0.1对应的域名是localhost，它们都代表我们自己的这台电脑，在使用效果上没有任何区别。

3. 端口号

   计算机中的端口号，就好像是现实生活中的门牌号一样，通过门牌号，外卖小哥可以在整栋大楼众多的房间中，准确把外卖送到你手中。

   同样的道理，在一台电脑中，可以运行成百上千个web服务，每个web服务都对应一个唯一的端口号，客户端发送过来的网络请求，通过端口号，可以被准确地交给对应的web服务进行处理

   • 注意:
     1. 每个端口号不能同时被多个web服务占用
     2. 在实际应用中，URL中的80端口可以被省略

2.3.5 创建最基本的web服务器#

1. 创建web服务器的基本步骤

   1. 导入http模块
   2. 创建web服务器实例
   3. 为服务器实例绑定request事件，监听客户端的请求
   4. 启动服务器
   • 步骤一 导入http模块

   1
   const http = require('http');
   

   • 步骤二 创建web服务器实例

     调用http.createServer()方法创建一个web服务器实例

   1
   const server = http.createServer();
   

   • 步骤三 为服务器实例绑定request事件，监听客户端的请求

     为服务器实例绑定request事件，即可监听客户端发送的网络请求

   1
   // 使用服务器实例的 .on 方法，为服务器实例绑定 request 事件
   2
   server.on('request', (req, res) => {
   3
       // 只要有客户端来请求外卖自己的服务器，就会触发request事件，从而调用这个事件处理函数
   4
       console.log('Someone has made a request to our server!');
   5
   })
   

   • 步骤四 启动服务器

     调用服务器实例的 .listen 方法，即可启动当前的web服务器实例:

   1
   // 调用server.listen(端口号，cb回调)， 即可启动服务器
   2
   server.listen(80, () => {
   3
       console.log('Our server is running!');
   4
   })
   

2. req请求对象

   只要服务器接收到了客户端的请求，就会调用通过server.on()为服务器绑定request事件处理函数

   如果想在事件处理器函数中，访问与客户端相关的数据或属性, 可以使用如下的方式:

   1
   const http = require('http');
   2
   const server = http.createServer();
   3
   server.on('request', (req) => {
   4
       // req是请求对象，它包含了与客户端相关的数据和属性，例如:
   5
       // req.url 是客户端请求的URL地址
   6
       const url = req.url;
   7
       // req.method 是客户端的method请求类型
   8
       const method = req.method;
   9
       // 拼接url和method
   10
       const str = `You request url is ${method} and request method is ${url}`;
   11
       // 打印str
   12
       console.log(str);
   13
   
   14
   })
   15
   server.listen(80, () => {
   16
       console.log('server running at http://127.0.0.1');
   17
   })
   

2.3.6 res响应对象#

在服务器的request事件处理函数中，如果想访问与服务器相关的数据或属性,可以使用如下的方式：

1
server.on('request', (req, res) => {
2
    //  res 是响应对象，它包含了与服务器相关的数据和属性，例如：
3
    // 要发送到客户端的字符串
4
    const str = `You request url is ${req.url} and request method is ${req.method}`
5
    // res.end 方法的作用:
6
    // 向客户端发送指定的内容，并结束这次请求的处理过程
7
    res.end(str)
8
})

• 解决中文乱码问题

当调用res.end()方法时，Node.js会默认将数据转换成UTF-8编码，但是对于中文字符，这个编码方式能会导致乱码, 此时, 需要手动设置内容的编码格式, 解决办法也很简单, 设置响应头 Content-Type: text/html; charset=utf-8即可

1
server.on('request', (req, res) => {
2
    const str = '中文乱码'
3
    // 设置响应头
4
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
5
    // 返回响应数据
6
    res.end(str)
7
})

2.3.7 根据不同的url响应不同的html内容#

1. 核心实现步骤

   • 获取请求的url地址
   • 设置默认的响应内容为404 Not Found
   • 判断用户请求的是否为/或者/index.html首页
   • 判断用户请求的是否为/about.html关于页面
   • 设置Content-Type响应头
   • 使用res.end()方法把内容，响应给客户端

2. 示例代码

   1
   const http = require('http');
   2
   const server = http.createServer()
   3
   server.on('request', (req, res) => {
   4
       const url = req.url;
   5
       // 设置默认的内容为 404 Not Found
   6
       let content = `<h1>'404 Not Found'</h1>`;
   7
       if(url === '/') {
   8
           content = `<h1>'首页'</h1>`;
   9
       }else if(url === '/about.html') {
   10
           content = `<h1>'关于'</h1>`;
   11
       }
   12
       // 设置响应头 防止中文乱码
   13
       res.setHeader('Content-Type', 'text/html; charset=utf-8');
   14
       // 返回 页面content 的响应内容
   15
       res.end(content);
   16
   })
   17
   server.listen(80, () => {
   18
       console.log('http server running at http://127.0.0.1');
   19
   })
   

2.3.8 http时钟web服务器案例#

在path路径模块的章节中，我们已经实现了一个http时钟服务器，现在我们来实现一个http时钟服务器，这个服务器会返回当前时间。

1
const fs = require('fs');
2
const path = require('path');
3
const http = require('http');
4

5
const server = http.createServer();
6

7
server.on('request',(req,res) => {
8

9
    const url = req.url;
10
    // 这里的所表达的意思是代表根目录的意思
11
    const fpath = path.join(__dirname, url);
12

13
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
14
        if(err) {
15
            res.end('404 Not Found')
16
            return
17
        }
18
        res.end(dataStr)
19
    })
20

21
})
22
server.listen(80, () => {
23
    console.log('http server running at http://127.0.0.1');
24
})

需要注意的时候，当我们运行这个服务器，进入的默认URL是空路径，也就是根目录，需要我们手动在网址输入框添加/clock/index.html路径访问这个文件夹中的html文件，才能显示页面。

3.5.1 什么是模块作用域？#

和函数作用域类似，在自定义模块中定于的变量、方法等成员，只能在当前模块内被访问。这种模块级别的访问限制，叫做模块作用域。

当我们定义了一个自定义模块命名为custom.js 在其模块内部定义一个函数：

1
const username = '张三'
2

3
function showName() {
4
    console.log('我的名字是' + username)
5
}

当我们在其他模块中引用这个模块时，无法直接访问模块内部定义的变量和函数：

1
const custom = require('./custom')
2

3
console.log(custom) // 输出空对象

• 模块作用域的好处：模块作用域能够很好的防止全局变量污染的问题

3.5.2 向外共享模块作用域中的成员#

1. module对象

在每个.js自定义模块中都有一个module对象，它里面存储了和当前模块的有关的信息 我们可以在控制台打印module

1
console.log(module)
2

3
// module对象 输出结果：
4
{
5
  id: '.',
6
  path: 'D:\\Node.js基础\\day2',
7
  exports: {},
8
  filename: 'D:\\Node.js基础\\day2\\07.module属性.js',
9
  loaded: false,
10
  children: [],
11
  paths: [
12
    'D:\\Node.js基础\\day2\\node_modules',
13
    'D:\\Node.js基础\\node_modules',
14
    'D:\\node_modules'
15
  ],
16
  Symbol(kIsMainSymbol): true,
17
  Symbol(kIsCachedByESMLoader): false,
18
  Symbol(kURL): undefined,
19
  Symbol(kFormat): undefined,
20
  Symbol(kIsExecuting): true
21
}

module对象是一个大对象，在这个大对象中包含许多属性，其中对象中有 exports 属性，这个属性是一个对象，这个对象就是我们向模块外共享的成员。

2. module.exports 对象

在自定义模块中，可以使用module.exports对象，将模块中的成员共享出去。

这里我们自定义一个模块，在模块中定义一个变量，并使用module.exports对象将变量共享出去。

1
module.exports.username = '张三'
2

3
module.exports.showName = function () {
4
    console.log('我的名字是' + this.username)
5
}

在其他模块中，可以通过require方法加载模块，并获取模块中的成员。

1
const username= require('./modules/自定义模块')
2

3
console.log(username)
4

5
// username的输出结果是一个对象:
6
{ username: '张三', showName: [Function (anonymous)] }

当然，外界在使用require方法导入自定义模块时，得到的就是module.exports所指向的对象。

3. 共享成员时的注意点

使用require方法导入模块时，导入的结果，永远以module.exports指向的对象为准

这里我们依旧定义一个自定义模块,进行演示

1
module.exports.username = '张三'
2
module.exports.age = 18
3
module.exports.showName = function () {
4
    console.log('我的名字是' + this.username)
5
}
6

7
// 为module.exports提供一个全新对象
8
module.exports = {
9
    nickname: '小张',
10
    age: 19,
11
    showName: function () {
12
        console.log('我的名字是' + this.nickname)
13
    }
14
}

在外部引用我们自定义好的模块

1
const username = require('./modules/自定义模块2')
2

3
console.log(username);
4

5
// 输出结果：
6
{ nickname: '小张', age: 19, showName: [Function: showName] }

我们不难发现，module.exports是有赋值的，新的值会覆盖掉旧的值。

4. exports对象

由于modules.exports单词写起来笔记复杂，为了简化向外共享成员的代码，Node提供了exports对象。默认情况下，exports和module.exports指向同一个对象，最终共享的结果，还是以module.exports为准。

1
console.log(exports);
2

3
console.log(module.exports);
4

5
console.log(exports === module.exports);
6

7
// 输出结果:
8
{}
9
{}
10
true

5. exports 和 module.exports 的使用误区

需要注意的是，require()模块时，得到的永远是module.exports指向的对象

这里我们定义一个模块用于演示二者的关系

1
exports.a = 1;
2
module.exports = {
3
    b: 2
4
    c: 3
5
};

显而易见的是，当我们外部引用此模块并打印出对象的属性时，得到的是module.exports指向的对象，即{b: 2, c: 3}

那么，exports和module.exports指向的顺序反过来呢？我们可以尝试一下：

1
module.exports.a =1
2
exports = {
3
    b: 2
4
    c: 3
5
};
6

7
// 输出结果:
8
{a: 1 }

从以上的输出结果来看，无论顺序如何变化，我们得到的永远是module.exports指向的对象

当我们同时使用exports和module.exports定义两个变量，又会发送什么呢？这里我们举一个实例

1
exports.a = 1;
2
module.exports.b = 2;
3

4
// 输出结果:
5
{ a: 1, b: 2 }

从该实例的输出结果来看，我们发现当exports和module.exports在定义不同变量时候，彼此并不会冲突，而是会合并成一个对象，并返回给调用者。

3.7.1 什么是包？#

Node.js中的第三方模块又叫做包

1. 包的来源：

不同于Node.js中的内置模块与自定义模块，包是由第三方个人或团队开发出来的, 免费供所有人使用 Node.js中的包都是免费且开源的，不需要付费即可免费下载使用

2. 为什么需要包?

由于Node.js的内置模块仅提供了一些底层的API，导致在基于内置模块进行项目开发时，代码量会非常大，因此，Node.js提供了第三方模块，使得开发人员可以快速开发项目，省去很多重复的代码编写工作。

包是基于内置模块封装出来的，提供了更高级，更方便的API，极大的提高了开发效率。

包和内置模块之间的关系，类似于JQuery和浏览器内置API之间的关系。

3. 从哪里下载包？

国外有一家IT公司，叫做npm, Inc.这家公司旗下有一个非常著名的网站: https://www.npmjs.com/ ，它是全球最大的包共享平台，你可以从这个网站上搜索到任何你需要的包，只要你有足够的耐心!

到目前位置，全球约1100 多万的开发人员，通过这个包共享平台，开发并共享了超过120 多万个包供我们使用。npm, Inc.公司提供了一个地址为 https://registry,npmjs.org/ 的服务器，来对外共享所有的包，我们可以从这个服务器上下载自己所需要的包。

4. 如何下载包？

npm, Inc.公司提供了一个包管理工具，我们可以使用这个包管理工具，从 https://registry,npmjis.org/ 服务器把需要的包下载到本地使用。

这个包管理工具的名字叫做 Node Package Manager(简称 npm包管理工具)，这个包管理工具随着Node.js的安装包一起被安装到了用户的电脑上。

大家可以在终端中执行npm -v命令，来查看自己电脑上所安装的npm包管理工具的版本号

3.7.2 npm 初体验#

初次装包完成后，在项目文件夹中多一个叫node_modules的文件夹，里面存放着npm安装的包和package-lock.json的配置文件

其中node_modules用来存放所有已安装到项目中的包。require()导入第三方包时，就是从这个目录查找并加载包。

package-lock.json文件用来记录node_modules中安装的包的下载信息，例如包的名字、版本号、下载地址等。

1. 安装指定版本的包

默认情况下，使用npm install命令安装包的时候，汇总的安装最新版本的包，如果需要安装指定版本的包，可以在包名之后，通过@符号指定版本号， 例如:

1
npm install express@4.17.1

2. 包的语义化版本规范

包的版本是以 “点分十进制” 形式进行定义的，总共有三位数字，例如4.17.1

其中每一位数字的含义如下：

1. 主版本号

2. 功能版本

3. Bug修改版本

4. 多人协作问题

由于第三方包的体积过大，不方便团队成员之间共享项目源代码

解决方案也很简单, 只需要共享时剔除node_modules

在项目根目录中，创建一个叫做package.json的配置文件，即可用来记录项目中安装了哪些包， 从而方便剔除node_modiles目录之后，在团队成员之间共享项目的源代码。

今后在项目开发中，一定要把node_modules文件夹，添加到.gitignore 忽略文件中

4. 快速创建package.json

npm包管理工具提供了一个快捷命令，可以在指向命令时所处的目录中，快速创建package,json这个包管理

1
npm init -y

1. 值得注意的是 npm init -y 该命令只能在英文的目录下成功运行并且只需运行一遍
2. 运行npm install 命令安装包的时候，npm包管理工具会自动把包的名称和版本号,记录到package.json中。

3.7.3 dependencies节点#

在package.json文件中，有一个dependencies节点，专门用来记录使用npm install命令安装了哪些包。

3.7.4 devDependencies节点#

如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到devDependencies节点中。

与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到dependencies节点中。

可以使用以下命令将包记录到Devdependencies节点中

1
# 简写
2
npm i 包名 -D
3

4
# 完整写法
5
npm install 包名 --save-dev

3.7.5 卸载包命令#

1
npm uninstall

3.7.6 包的分类#

使用npm包管理工具下载的包，共分为两大类，分别是:

1. 项目包

   那些被安装到项目 node_modules目录中的包，都是项目包。

2. 全局包

   2.1 开发依赖包(被记录到devDependencies节点中的包，只会在开发期间用到)

   2.2 核心依赖包(被记录到dependencies节点中的包，在开发期间和项目上线之后都会用到)

   在执行npm install命令时，如果提供了-g参数， 则会把包安装为全局包。

   1
   # 安装全局包
   2
   npm -intall 包名 -g
   3
   
   4
   # 卸载全局包
   5
   npm uninstall 包名 -g
   

   • 注意：

     1. 只有工具性质的包，才有全局安装的必要性，因为它们提供了好用的终端命令。

     2. 判断某个包是否需要全局安装才能使用，可以参考官方提供的使用说明即可。

3.7.7 i5ting_toc morkdown转换html模块#

i5ting_toc是一个可以把md文档转为html页面的小工具，使用步骤如下:

1
npm install -g i5ting_toc
2

3
i5ting_toc -f 要转换的md文件路径 -o

3.7.8 规范的包结构#

在清楚了包的概念，以及如何下载和使用包之后，接下来，我们深入了解以下`包的内部结构

一个规范的包，它的组成结构，必须符合以下3点要求:

1. 包必须以单独的目录而存在
2. 包的顶级目录下的要必须包含package.json这个包管理配置文件
3. package.json中必须包含name,version,main这三个属性，分别代表包的名字、版本号、包的入口

3.7.9 开发属于自己的包#

1. 需要实现的功能

   1.1 格式化日期

   1.2 转义HTML中的特殊字符

   1.3 还原HTML中的特殊字符

2. 初始化包的基本结构

   2.1 新建tools文件夹，作为包的根目录

   2.2 在tools文件夹中，新建如下三个文件：

   1. package.json(包管理配置文件)

   2. index.js(包的入口文件)

   3. README.md(包的说明文档)

   • 初始化package.json文件

   1
   {
   2
   "name": "tools",
   3
   "version": "1.0.0",
   4
   "main": "index.js",
   5
   "description": "提供了格式化时间, HTMLEscape相关的功能",
   6
   "keywords": [
   7
       "itheima",
   8
       "dateformat",
   9
       "escape"
   10
   ],
   11
   "license": "ISC"
   12
   }
   

   • 在index.js中定义方法

   1
   // 这是包的入口文件
   2
   function dateFormat(dateStr) {
   3
       const dt = new Date(dateStr)
   4
   
   5
       const y = padZero(dt.getFullYear())
   6
       const m = padZero(dt.getMonth() + 1)
   7
       const d = padZero(dt.getDate())
   8
   
   9
       const hh = padZero(dt.getHours())
   10
       const mm = padZero(dt.getMinutes())
   11
       const ss = padZero(dt.getSeconds())
   12
   
   13
       return `${y}-${m}-${d}-${hh}-${mm}-${ss}`
   14
   }
   15
   
   16
   // 提供补零方法
   17
   function padZero(n) {
   18
      return n > 9 ? n : '0' + n
   19
   }
   39 collapsed lines
   20
   
   21
   // html转义方法
   22
   function htmlEscape(htmlStr) {
   23
       return htmlStr.replace(/<|>|"|&/g, (match) => {
   24
           switch(match) {
   25
               case '<':
   26
                   return '&lt;'
   27
               case '>':
   28
                   return '&gt;'
   29
               case '"':
   30
                   return '&quot;'
   31
               case '&':
   32
                   return '&amp;'
   33
           }
   34
       })
   35
   }
   36
   
   37
   // html还原方法
   38
   function htmlReturn(str) {
   39
       return str.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
   40
           switch(match) {
   41
               case '&lt;':
   42
                   return '<'
   43
               case '&gt;':
   44
                   return '>'
   45
               case '&quot;':
   46
                   return '"'
   47
               case '&amp;':
   48
                   return '&'
   49
           }
   50
       })
   51
   }
   52
   
   53
   // 暴露方法
   54
   module.exports = {
   55
       dateFormat,
   56
       htmlEscape,
   57
       htmlReturn
   58
   }
   

3. 将不同的功能进行模块化拆分

   3.1 将格式化时间的功能，拆分到src -> dateForamt.js中

   3.2 将处理HTML字符串的功能，拆分到src -> htmlEscape.js中

   3.3 在index.js中，导入两个模块，得到需要向外共享的方法

   3.4 在index.js中，使用modules.exports把对应的方法共享出去

4. 编写包的说明文档

   包根目录中的README.md文件，是包的使用说明文档，通过它，我们可以事先把包的使用说明，以markdown的格式写出来，方便用户参考

   README文件中具体写什么内容，没有强制性要求；只要能够清晰地包的作用、用法、注意事项等描述清楚即可。

   我们所创建这个包的README.MD文档中，会包含以下6项内容： 安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

5. 发布包

   5.1 注册npm账号

   访问https://www.npmjs.com/网站，点击sign up按钮，进入注册用户界面

   填写账号相关的信息：Full Name、Public Email、Username、Password

   点击Create an Account按钮，注册账号

   5.2 登录npm账号

   npm账号注册完成后，可以在终端执行npm login命令，依次输入用户名，密码，邮箱后，即可登录成功。

   5.2 把包发布到npm上

   将终端切换到包的根目录之后，运行npm publish命令，即可将包发布到npm上(注意:包名不能雷同)

6. 删除已发布的包

运行npm unpublish 包名 --force命令，即可从npm删除已发布的包

• 注意：

  1. npm unpublish 命令只能删除72小时以内发布的包

  2. npm unpublish删除的包，在24小时内不允许重复发布

  3. 发布包的时候要慎重，尽量不要往npm上发布没有意义的包

4.1.1 什么是Express?#

官方给出的概念: Express是基于Node.js平台，快速、开放、极简的Web开发框架。

通俗的理解：Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的。

Express的本质: 就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。

Express的中文官网: http://www.expressjs.com.cn/

那么不使用Express能否创建web服务器？

答案是可以的，使用Node.js提供的原生http模块即可。

不过http内置模块用起来很复杂，开发效率低，而EXpress是基于内置的http模块进一步封装处理的，能够极大的提高开发效率

http内置模块和Express是什么关系？

类似于浏览器中的Web API 和 JQuery的关系。后者是基于前者进一步封装出来的。

4.1.2 Express能够做什么？#

对于前端程序员来说，最常见的两种服务器，分别是:

1. Web网站服务器：专门对外提供Web网页资源的服务器。

2. API接口服务器：专门对外提供API接口的服务器。

使用Express，我们可以方便、快速的创建Web网站的服务器或API接口的服务器。

4.2 Express的基本使用#

• 安装

在项目所处的目录中，运行如下的终端命令，即可将express安装到项目中使用：

1
npm i express

4.2.1 创建最基本的Web服务器#

1
// 1. 导入express
2
const express = require('express')
3
// 2.创建web服务器
4
const app = express()
5

6
// 调用app.listen(端口号，启动成功后的回调函数)，启动服务器
7
app.listen(80, ()=> {
8
    console.log('express server running at http://127.0.0.1')
9
})

4.2.2 监听GET请求#

通过app.get()方法，可以监听客户端的GET请求，具体的语法格式如下：

1
app.get('请求URL', function(req,res) {/* 处理函数 */})

4.2.3 监听POST请求#

通过app.post()方法，可以监听客户端的POST请求，具体的语法格式如下：

1
app.post('请求URL', function(req,res) {/* 处理函数 */})

4.2.4 把内容响应给客户端#

通过res.send()方法,可以把处理好的内容,发送给客户端:

1
app.get('/user',(req,res) => {
2
    // 向客户端发送JSON对象
3
    res.send({name: 'zs', age: 20, gender:'男'})
4
})
5

6
app.post('/user', (req,res) => {
7
    // 向客户端发送文本内容
8
    res.send('请求成功')
9
})

4.2.5 获取URL中携带的查询参数#

通过req.query对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数:

1
app.get('/', (req,res) => {
2
    // req.query默认是一个空对象
3
    // 客户端使用? name = zs&age=20 这种查询字符串形式，发送到服务器的参数，
4
    // 可以通过 req.query 对象访问到，例如：
5
    // req.query.name req.query.age
6

7
    console.log(req.query)
8
})

4.2.6 获取URL中的动态参数#

通过req.params对象，可以访问到URL中，通过:匹配到的动态参数:

1
app.get('/user/:id', (req, res) => {
2
    // req.params 默认是一个空对象
3
    // 里面存放着通过：动态匹配到的参数值
4

5
    console.log(req.params)
6
})

4.3.1 express.static()#

express提供了一个非常好用的函数，叫做express.static(), 通过它,我们可以非常方便地创建一个静态资源服务器,通过如下代码就可以将public目录下的图片、css文件、JavaScript文件对外开发访问了：

1
app.use(express.static(`public`))

现在,你就可以访问public目录中的所有文件了

• 注意: Express在在指定的静态目录中查找文件,并对外提供资源的访问路径。因此,存在静态文件的目录名不会出现在URL中。

4.3.2 托管多个静态资源目录#

如果要托管多个静态资源目录, 请多次调用express.static()函数:

1
app.use(express.static(`public`))
2
app.use(express.static(`files`))

访问静态资源文件时,express.static()函数会根据目录的添加顺序查找所需的文件。

4.3.3 挂载路径前缀#

1
app.use('/public', express.static('public'))

4.4.1 为什么要使用nodemon?#

在编写调试Node.js项目中，如果修改了项目的代码，则需要频繁的手动close掉，然后再重新启动，非常繁琐。

现在，我们可以使用nodemon这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发和调试。

• 安装nodemon

在终端中，运行如下命令，即可以将nodemon安装为全局可用的工具：

1
npm i -g nodemon

4.4.2 使用nodemon#

当基于Nodejs编写了一个网站应用的时候，传统的方式，是运行nodeapp.js命令，来启动项目。这样做的坏处是：

代码被修改之后，需要手动重启项目。

现在，我们可以将 node命令替换为 nodemon命令，使用nodemon appjs来启动项目。这样做的好处是：代码 被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。

1
node app.js
2
# 将上面的终端命令，替换为下面的终端命令，即可实现自动重启项目的效果
3
nodemon app.js