二二(Node1)、fs(readFile、writeFile)、path(join)、http(createServer)、querystring、端口、web

1. Node.js 简单使用

/**
 * 目标：编写 js 代码，用 node 命令执行
 * 终端作用：敲击命令，调用对应程序执行
 * 终端打开：目标文件->右键->在集成终端中打开
 * 命令：node xxx.js （注意路径）
 */

// * Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序。
/* 
  概念：使用 Node.js 编写后端程序 / 支持前端工程化
    编写后端程序：提供接口和数据，网页资源等
    前端工程化(重要)：对代码压缩，转译，整合（使用各种工具，提升效率）

  浏览器能执行 JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）
  Node.js 是基于 Chrome V8 引擎进行封装（运行环境）
  Node.js 环境中没有 BOM 和 DOM，但也是用 JS 语法

  在 VSCode 终端中输入：node xxx.js(文件名称,Tab自动补全) 回车即可执行（注意路径）
*/

console.log("node练习");
for (let index = 0; index < 5; index++) {
  console.log(index);
}

2. fs 模块 - 读写文件

/**
 * 目标：使用 fs 模块，读写文件内容
 * 语法：
 * 1. 引入 fs 模块
 * 2. 调用 writeFile 写入内容
 * 3. 调用 readFile  读取内容
 */

/* 
  模块：类似插件，封装了方法/属性
  fs 模块：封装了与本机文件系统进行交互的，方法/属性
*/

// * 1. 加载 fs 模块 (fs 是模块标识符：模块的名字)
const fs = require("fs");

// * 2. 读取 fs.readFile(读取的文件路径 , 回调函数)
// 原文件存在，读取成功；文件路径错误，报错
fs.readFile("./test.txt", (err, data) => {
  if (err) {
    console.log(err);
  } else {
    // 读取出来的 data 是文件内容的 Buffer 数据流
    console.log(data);
    // toString() 转成字符串
    console.log(data.toString());
  }
});

// * 3. 写入 fs.writeFile(写入的文件路径 , 写入内容 , 回调函数)
// 若文件原存在，写入内容会替换原有文件内容；若文件原不存在，会自动新创建此文件
fs.writeFile("./test.txt", "writeFile 鸿蒙六期", (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("写入成功");
  }
});

3. path 模块 - 路径处理

/**
 * 目标：读取 test.txt 文件内容
 * 注意：代码中，使用绝对路径
 * 原因：Node.js 执行时会以终端所在文件夹作为相对路径，去拼接代码中路径使用（导致找不到目标文件）
 * 解决：使用 path.join() 和 __dirname 来填写要查找的目标文件绝对地址
 */

const fs = require("fs");

// 1. 加载 path 模块
const path = require("path");

// 2. 使用 path.join 方法，拼接路径
// __dirname 模块内置变量，用于获取当前模块目录名
// path.join() 会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起
fs.readFile(path.join(__dirname, "..", "test.txt"), (err, data) => {
  console.log(__dirname);

  if (err) console.log(err);
  else console.log(data.toString());
});

4. 案例1 - 前端项目压缩

4.1 压缩 html

/**
 * 目标一：压缩 html 里代码
 * 需求：把 public/index.html 里的，回车符(\r)和换行符(\n)去掉，写入到 dist/index.html 中
 *  1.1 读取 public/index.html 内容
 *  1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
 *  1.3 确认后，写入到 dist/index.html 内
 */

/* 
  目标：压缩前端代码，让浏览器加载网页更快（体验前端工程