一、fs 模块

内置模块（built-in）：node 的安装时已经内置了核心模块，不用我们制造，可以直接使用；

fs模块：file system 文件系统，文件读写模块，用于读写文件；

  1. let fs = require('fs');

1. 异步读取文件

  1. fs.readFile(fileName, option, callback)
  • fileName: 文件名
  • option: 以哪一种编码返回内容，默认的 buffer 类型的值，buffer 中存储的是二进制数据；所以一般设置为 utf8
  • callback: 读取文件后执行的回调
  1. fs.readFile('./text.txt', 'utf8', function (err, data) {
  2.     err // 读取失败的错误信息
  3.     data // 从文件中读取来的数据
  4.     console.log(data)
  5. });

2. 同步读取文件

  1. fs.readFileSync(fileName, options);
  • fileName: 文件名
  • options: 编码
  • 该方法会返回同步读取到的内容
  1. let content = fs.readFileSync('./text.txt', 'utf8');
  2. console.log(content);

3. 异步写入（向文件中写）

  1. fs.writeFile(path, data, option, callback)
  • path 文件名（如果没有就创建一个文件）
  • data 写入文件的数据
  • option 文件编码
  • callback 写入后执行的回调
  1. fs.writeFile('1.js', 'console.log(`hello world`);','utf8', function (err, data) {
  2.     if (err) {
  3.         console.log(err);
  4.     } else {
  5.         console.log('写入成功')
  6.     }
  7. });

4. 同步写入（向文件中写）

  1. fs.writeFileSync(path, data, option)
  • path 文件名及路径
  • data 写入的数据
  • option 写入的编码
  1. fs.writeFileSync('../x.js', 'alert(`hello world`)', 'utf8');

注意以上写入都是覆盖的写入，把文件中原有的内容覆盖掉；
**

5. 异步追加内容

  1. fs.appendFile(path, data, option, callback);
  • data 写入文件的数据
  • option 文件编码
  • callback 写入后执行的回调
  1. fs.appendFile('./1.js', '\nfunction sum (a, b) {return a + b}', 'utf8', function (err, data) {
  2.     if (err) {
  3.         console.log(err);
  4.     } else {
  5.         console.log(data)
  6.     }
  7. });

6. 同步追加内容

  1. fs.appendFileSync(path, data, option);
  • path 文件名及路径
  • data 写入的数据
  • option 写入的编码
  1. fs.appendFileSync('../x.js', ';\n\rfunction minus(a, b) {return a - b}', 'utf8');

例子

  1. // fs 模块：是 Node.js 内置的模块；fs (file system 文件系统) 用于文件读写；
  3. let fs = require('fs');
  5. // 1. 异步读取文件:
  6. // __dirname 当前文件所处的路径，绝对路径
  7. // __filename 当前文件的带绝对路径的文件名，并且带扩展名
  9. // fs.readFile(带路径的文件名, 编码, callback) 
  10. fs.readFile('./1.txt', 'utf8', (err, data) => {
  11.   // 如果读取成功 err 是 null，如果读取失败 err 是对象；
  12.   // 如果文件读取成功，会把读到的数据传给 data，在回调函数中使用这个 data 就是使用读取来的数据；
  13.   if (err) {
  14.     // console.log(err);
  15.     // no such file or directory 没有这样一个文件或者文件夹；（导致报错的原因就是文件路径错误）
  16.   } else {
  17.     // console.log(data);
  18.   }
  19. });
  21. // 2. 同步读取文件：
  22. // fs.readFileSync(带路径的文件名, 编码)
  23. // 返回值是读取到内容；
  24. // let data = fs.readFileSync('./1.txt', 'utf8');
  25. // console.log(data);
  27. // 修改文件：向文件中写入内容
  29. // 3. 异步写入文件
  30. // fs.writeFile(path, data, option, callback);
  31. // path 文件名（如果没有这个文件会创建一个）
  32. // data 要写入文件的内容
  33. // option 文件编码
  34. // callback 写入后执行的回调
  36. let code = 'function sum (a, b) {return a + b}';
  37. fs.writeFile('./a.js', code, 'utf8', (err, data) => {
  38.   // err 写入失败时是一个对象，写入成功是 null
  39.   if (err) {
  40.     console.log('写入失败');
  41.     // 一般写入文件失败是由于文件夹权限有问题
  42.   } else {
  43.     // console.log('写入成功');
  44.   }
  45. });
  47. // fs.writeFile() 是覆盖式写入，原文件中的内容会被覆盖掉；如果要追加的话，先把原来的文件内容读取出
  48. // 来，然后再拼接上咱们要写入的内容，然后再一并写回去；
  50. // 同步写入：
  51. // fs.writeFileSync(path, data, option)
  52. // path 文件名（含路径）
  53. // data 写入文件的内容
  54. // option 编码
  55. // 同步写入没有返回值
  56. let htmlStr = `<!DOCTYPE>
  57. <html>
  58. <head>
  59.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  60.   <meta name="description" content="发上等愿，结中等缘，享下等福">
  61.   <meta name="keywords" content="前端好,前端好个锤子">
  62.   <title>这是一个title标签</title>
  63.   <!--TDK 做SEO时要设置-->
  64. </head>
  65. <body>
  66.   <div>
  67.     这是一个划时代的app 
  68.  </div>
  69. </body>
  71. <script>
  72. alert('真香')
  73. </script>
  74. </html>`;
  76. let wdata = fs.writeFileSync('../a.html', htmlStr, 'utf8');
  77. console.log(wdata);
  79. // 向文件中追加内容：
  81. // 异步追加
  82. // fs.appendFile(path, data, option, callback)
  83. // path 文件名（含路径）
  84. // data 写入文件的内容
  85. // option 编码
  86. // callback 追加后的回调
  88. let code2 = '\n\rfunction minus(a, b) {return a - b}';
  89. // \n 换行
  90. // \n\r 空行
  91. /*fs.appendFile('./b.js', code2, 'utf8', (err, data) => {
  92.   if (err) {
  93.     console.log(err);
  94.   } else {
  95.     console.log('追加成功');
  96.   }
  97. });*/
  99. // 同步追加
  100. // fs.appendFileSync(path, data, option)
  101. // 参数和异步相同
  102. fs.appendFileSync('./b.js', code2, 'utf8');

二、http 模块

前端发起请求，获取数据，然后拿到数据渲染到页面中；后端（服务端），响应请求，发送数据
前后端通过 http 协议通信，前端通过 http 发请求，向服务器要数据；服务端处理 http 请求，通过 http 协议向客户端发送数据；
http 模块：http 是 Node.js 的内置模块；是用来处理客户端的 http 请求的

  1. let http = require('http');
  2. let fs = require('fs');
  4. // 1. 处理客户端 http 请求，首先要创建一个服务；
  5. // http.createServer() 创建一个服务
  6. let server = http.createServer(function (request, response) {
  7.   // 具体的处理 http 请求的代码要写在这个回调函数中；只要客户端发送一个 http 请求，这个回调函数就会执行一次；
  8.   // request 请求对象 这个对象中包含了客户端的请求中所有的信息；
  9.   // response 响应对象 这个对象中包含了所有用来响应客户端所需要的方法和属性；
  11.   console.log('请求来了');
  13.   // 把 index.html 响应给客户端
  14.   // 首先我们需要把 index.html 读出来，然后把读取的结果作为响应内容发送给客户端；
  15.   fs.readFile(__dirname + '/index.html', (err, data) => {
  16.     if (err) {
  17.       response.end('读取失败')
  18.     } else {
  19.       response.end(data); // 向客户端发送响应数据
  20.     }
  21.   });
  23.   // 我们在响应客户端请求的时候，现在并没有判断客户端请求的是什么；当客户端收到 index.html 以后会解析 html，解析的时候遇到 script 标签，而 script 会再向服务器发送请求，而此时我们的服务只会响应 index.html 的内容，所以 script 收到的就是 index.html 的内容；
  24. });
  26. // 2. 服务还需要监听端口号（练习阶段不要使用3000以下）
  27. // 端口的范围：0-65535
  28. // server.listen (端口号, 监听端口成功执行的回调)
  29. server.listen(8000, () => console.log('port 8000 is on'));
  30. // 一个端口只能供一个服务监听，当前8000端口被 server 占用了，其他的服务就不能再用8000端口了；

写完脚本以后，还需要到命令行里启动这个服务：node 加文件名，然后去浏览器中访问：localhost:8000
为什么用 localhost?
因为正常的请求是访问 url ，然后 DNS 负责把 url 解析成 ip 地址，然后请求 ip 地址，但是服务器是运行在本地，本地的 ip 127.0.0.1，而 127.0.0.1 就是 localhost。
此时我们的电脑上既运行着客户端又运行着服务端；浏览器是客户端，用 node 启动的 js 脚本是服务端。修改了服务端的程序需要重启 server

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
  7. </head>
  8. <body>
  9. <h1>这是index.html</h1>
  10. <div>
  11.   <a href="/a.html">这是A页面</a>
  12. </div>
  13. <div><a href="/b.html">这是B页面</a></div>
  14. </body>
  15. </html>

三、url 模块

  1. // url 模块也是 Node.js 的内置模块，是用来解析 url 的；
  2. let http = require('http');
  3. let url = require('url');
  4. let fs = require('fs');
  6. // 1. 创建一个服务
  7. let server = http.createServer((req, res) => {
  8.   // console.log(req.url); 客户端请求的 url
  9.   // console.log(req.headers.cookie); 客户端带来的 cookie
  11.   let urlObj = url.parse(req.url, true); // url.parse() 解析请求 url 的方法，第二个参数传 true，把 url 问号传参格式化成一个对象，并在挂载在 query 属性上
  12.   console.log(urlObj);
  13.   // pathname 客户端请求的路径
  14.   // search 客户端问号传参的内容（带问号）
  15.   // query 客户端传递的查询字符串
  16. });
  18. // 2. 监听端口号
  19. server.listen(8000, () => console.log('port 8000 is on'));

四、根据不同路径返回不同内容

  1. // 根据请求的路径的不同返回不同的 html
  2. // 获取当前的请求路径，读取路径对应的 html 然后返回给客户端即可；
  4. let http = require('http');
  5. let url = require('url');
  6. let fs = require('fs');
  8. // 1. 创建一个服务
  9. let server = http.createServer((req, res) => {
  10.   // 1.1 解析 url
  11.   let urlObj = url.parse(req.url, true);
  12.   let { pathname } = urlObj;
  14.   // server 启动时所在的路径就是根目录 /
  16.   // /a.html -> 读取 /a.html 文件
  17.   // /b.html -> 读取 /b.html 文件
  18.   // console.log('pathname is ' + pathname);
  19.   // console.log(__dirname + pathname);
  20.   // 当我们访问 localhost:8000 时 pathname 是 / ，此时并没有 / 的html
  22.   // 加一个判断，判断 pathname 是不是/，如果是 / 就要读 index.html
  23.   let filePath = '';
  24.   if (pathname === '/') {
  25.     filePath = __dirname + '/index.html'
  26.   } else {
  27.     filePath = __dirname + pathname;
  28.   }
  30.   fs.readFile(filePath, function (err, data) {
  31.     if (err) {
  32.       res.end('NOT FOUND')
  33.     } else {
  34.       res.end(data);
  35.     }
  36.   })
  37. });
  39. // 2. 监听一个端口号
  40. server.listen(8000, () => console.log('port 8000 is on'));
  42. // 服务端响应如 html、css、js、图片等文件服务称为静态资源服务，html、css、js 等文件称为静态资源；
  44. // 如果 pathname 类似 /home/help/search ，这种请求路径不是具体的文件，一般都是 ajax 接口；一般都是处理动态的请求，根据客户端传递的数据返回不同的内容；

a.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <link rel="stylesheet" href="/a.css">
  10. </head>
  11. <body>
  12. <h1>
  13.   A
  14. </h1>
  15. <a href="/">返回首页</a>
  17. <img src="/3.png" alt="">
  18. <script src="/a.js"></script>
  19. </body>
  20. </html>

b.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>
  9.   B
  10. </h1>
  11. <a href="/">返回首页</a>
  13. </body>
  14. </html>

五、响应与 content-type

  1. // Content-Type:
  2. // 服务端在响应客户端的请求的时候要设置响应内容的内容类型，即 Content-type；当客户端收到服务端的响应内容后，会按照这个 Content-type 解析响应的内容；
  4. // Content-type 是一个响应头；
  6. let http = require('http');
  7. let url = require('url');
  8. let fs = require('fs');
  9. let contentTypes = {
  10.   html: 'text/html',
  11.   css: 'text/css',
  12.   js: 'text/javascript',
  13.   png: 'image/png',
  14.   ico: 'image/x-icon'
  15. };
  17. // 1. 创建一个服务
  19. let server = http.createServer((req, res) => {
  20.   // 1.1 解析url
  21.   let urlObj = url.parse(req.url, true);
  22.   let { pathname } = urlObj;
  24.   // 根据 pathname 里面的拓展名，判断到底内容类型是什么；.html -> text/html; .css -> text/css
  25.   // /a.html
  26.   // /a.css
  27.   // /a.js
  28.   // /3.png
  29.   // /
  31.   let extReg = /\.(\w+)/;
  32.   let types = extReg.exec(pathname); // 正则捕获，如果捕获到返回数组，捕获不到返回 null
  34.   if (types) {
  35.     let ext = types[1];
  36.     console.log(ext);
  37.     res.setHeader('Content-Type', contentTypes[ext]);
  38.     // res.setHeader(key, value); 设置响应头信息，key 和 value 都是字符串类型的；
  39.   }
  41.   let filePath = '';
  42.   if (pathname === '/') {
  43.     res.setHeader('Content-Type', contentTypes.html);
  44.     filePath = __dirname + '/index.html'
  45.   } else {
  46.     filePath = __dirname + pathname;
  47.   }
  49.   fs.readFile(filePath, function (err, data) {
  50.     if (err) {
  51.       res.end('NOT FOUND')
  52.     } else {
  53.       res.end(data);
  54.     }
  55.   })
  56. });
  58. // 2. 监听一个端口号
  59. server.listen(8000, () => console.log('port 8000 is on'));

六、MIME 依赖包

  1. // MIME : 多用途互联网邮件拓展；每种文件都有自己特有的 MIME 类型，这个类型就是在响应的时候需要设置的内容类型；
  3. // mime 依赖包，是一个第三方的模块，其中包含了绝大多数的文件的 MIME 类型；
  5. // 使用第三方的依赖包：
  6. // 1. 安装 mime ：yarn add mime --save
  7. // 2. 引入第三方的模块
  9. let mime = require('mime');
  10. let http = require('http');
  11. let url = require('url');
  12. let fs = require('fs');
  15. let server = http.createServer((req, res) => {
  16.   // 1.1 解析 url
  17.   let urlObj = url.parse(req.url, true);
  18.   let { pathname } = urlObj;
  20.   // 使用 mime 设置内容类型：mime.getType(pathname)
  21.   // getType 方法会返回 pathname 对应的内容类型
  24.   let filePath = '';
  25.   if (pathname === '/') {
  26.     filePath = __dirname + '/index.html';
  27.     res.setHeader('Content-Type', 'text/html'); // mime.getType() 不能处理 / ；所以需要单独设置
  28.   } else {
  29.     filePath = __dirname + pathname;
  30.     res.setHeader('Content-Type', mime.getType(pathname));
  31.   }
  33.   fs.readFile(filePath, function (err, data) {
  34.     if (err) {
  35.       res.end('NOT FOUND')
  36.     } else {
  37.       res.setHeader('set-cookie', 'name=mabin;path=/;'); // 在服务端操作 cookie；就是设置 set-cookie 的响应头
  38.       res.end(data);
  39.     }
  40.   })
  41. });
  43. // 2. 监听一个端口号
  44. server.listen(8000, () => console.log('port 8000 is on'));

Nodejs报错定位行号.png