• Node.js详解

    目录

    Node.js - 初体验

    Node.js - 为何能执行JS？

    Node.js - 安装

    Node.js - 使用

    Node.js - 模块

    fs模块 - 读写文件

    path模块 - 路径处理

    案例 - 压缩前端html

    http模块 - 创建Web服务

    Node.js - 模块化

    CommonJS标准

    ECMAScript标准

    ECMAScript标准 - 默认导出和导入

    ECMAScript标准 - 命名导出和导入

    包

    npm - 软件包管理器

    npm - 安装所有依赖

    npm - 全局软件包 nodemon

    npm - 删除软件包

    Node.js - 初体验

    定义：Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序。

    作用：使用Node.js编写服务器端程序

    • 编写数据接口，提供网页资源浏览功能等等
    • 前端工程化：为后续学习Vue和React等框架做铺垫，Node.js是前端工程化的基础(因为Node.js可以主动读取前端代码内容)

    Node.js - 为何能执行JS？

    首先：浏览器能执行JS代码，依靠的是内核中的V8引擎(C++程序)

    其次：Node.js是基于Chrome V8引擎进行封装(运行环境)

    区别：都支持ECMAScript标准语法，Node.js有独立的API

    注意：Node.js环境没有DOM和BOM等

    Node.js - 安装

    推荐下载：node-v16.19.0.msi安装程序(指定版本：兼容vue-admin-template模板)

    安装过程：默认下一步即可

    注意：

    1. 安装在非中文路径下
    2. 无需勾选自动安装其他配套软件

    成功验证：打开cmd终端，输入 node -v 命令查看版本号，成功则会输出版本号，如下图：

    Node.js - 使用

    接下来我们通过下书需求初步完成Node.js的使用

    需求：新建JS文件，并编写代码后，在node环境下执行

    命令：在VSCode集成终端中，输入node xxx.js，回车即可执行

    接下来使用VSCode进行代码操作：

    1. // 目标：编写 js 代码，在 Node 环境下使用 node 命令来独立执行
    2. console.log('Hello, Node.js')
    3. for (let i = 0; i < 3; i++) {
    4.   console.log(6)
    5. }

    终端输入：node 文件名.js->

    Node.js - 模块

    fs模块 - 读写文件

    模块：类似拆按，封装了方法/属性

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

    语法：

    1. 加载fs模块文件
    2. 写入文件内容
    3. 读取文件内容

    接下来我们使用fs模块实现写入/读取文件内容：

    写入代码如下：

    1. /**
    2.  * 目标：基于 fs 模块读写文件内容
    3.  *  1. 加载 fs 模块对象
    4.  *  2. 写入文件内容
    5.  *  3. 读取文件内容
    6.  */
    7. // 1. 加载 fs 模块对象
    8. const fs = require('fs')
    9. // 2. 写入文件内容
    10. fs.writeFile('./test.txt', 'hello, Node.js', (err) => {
    11. if (err) console.log(err)
    12. else console.log('写入成功')
    13. })
    14. // 3. 读取文件内容
    15. fs.readFile('./test.txt', (err, data) => {
    16.     if (err) console.log(err)
    17.     // data 是 buffer 16 进制数据流对象
    18.     // .toString() 转换成字符串
    19.     else console.log(data.toString())
    20.   })

    结果->

    path模块 - 路径处理

    问题：Node.js代码中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件

    例如如下代码，我们输入的路径是../text.txt，但是在终端中输入node命令会找不到文件，这是因为node命令的相对路径是基于终端路径的

    1. /**
    2.  * 目标：在 Node.js 环境的代码中，应使用绝对路径
    3.  * 原因：代码的相对路径是以终端所在文件夹为起点，而不是 Vscode 资源管理器
    4.  *  容易造成目标文件找不到的错误
    5.  */
    6. const fs = require('fs')
    7. fs.readFile(path.join(__dirname, '../text.txt'), (err, data) => {
    8.   if (err) console.log(err)
    9.   else console.log(data.toString())
    10. })

    建议：在Node.js代码中，使用绝对路径

    补充：__dirname内置变量(获取当前模块目录-绝对路径)

    注意：path.join()会使用特定于平台的分隔符，作为界定符，将所有给定的路径片段在一起

    语法：

    1. 加载path模块
    2. 使用path.join方法，拼接路径

    接下来我们就用path模块解决上述的问题：

    1. /**
    2.  * 目标：在 Node.js 环境的代码中，应使用绝对路径
    3.  * 原因：代码的相对路径是以终端所在文件夹为起点，而不是 Vscode 资源管理器
    4.  *  容易造成目标文件找不到的错误
    5.  */
    6. const fs = require('fs')
    7. // 1. 引入 path 模块对象
    8. const path = require('path')
    9. // 2. 调用 path.join() 配合 __dirname 组成目标文件的绝对路径
    10. console.log(__dirname)
    11. fs.readFile(path.join(__dirname, '../text.txt'), (err, data) => {
    12.   if (err) console.log(err)
    13.   else console.log(data.toString())
    14. })

    案例 - 压缩前端html

    为了提高我们的网页在浏览器中的加载效率，我们通常会通过压缩html的方式提高效率

    需求：把回车符\r和换行符\n去掉后，写入到新html文件中

    步骤：

    1. 读取源html文件内容
    2. 正则替换字符串
    3. 写入到新的html文件中

    源html文件内容如下：

    1. 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>时钟案例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;
    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.       -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
    38.     }
    39.   style>
    40. head>
    41.  
    42. <body>
    43.   <div class="box">
    44.     <div id="HH">00div>
    45.     <div>:div>
    46.     <div id="mm">00div>
    47.     <div>:div>
    48.     <div id="ss">00div>
    49.   div>
    50.   <script>
    51.     window.addEventListener('load', function () {
    52.       clock();
    53.       setInterval(clock, 1000);
    54.     });
    55.     function clock() {
    56.       let dt = new Date();
    57.       let HH = dt.getHours();
    58.       let mm = dt.getMinutes();
    59.       let ss = dt.getSeconds();
    60.       console.log(dt, HH, mm, ss);
    61.       document.querySelector('#HH').innerHTML = padZero(HH);
    62.       document.querySelector('#mm').innerHTML = padZero(mm);
    63.       document.querySelector('#ss').innerHTML = padZero(ss);
    64.     };
    65.     function padZero(n) {
    66.       console.log(n);
    67.       return n > 9 ? n : '0' + n;
    68.     }
    69.   script>
    70. body>
    71.  
    72. html>

    压缩js代码如下：

    1. /**
    2.  * 目标1：压缩 html 代码
    3.  * 需求：把回车符 \r，换行符 \n 去掉，写入到新 html 文件中
    4.  *  1.1 读取源 html 文件内容
    5.  *  1.2 正则替换字符串
    6.  *  1.3 写入到新的 html 文件中
    7.  */
    8. // 1.1 读取源 html 文件内容
    9. const fs = require('fs')
    10. const path = require('path')
    11. fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {
    12.   if (err) console.log(err)
    13.   else {
    14.     const htmlStr = data.toString()
    15.     // 1.2 正则替换字符串
    16.     const resultStr = htmlStr.replace(/[\r\n]/g, '')
    17.     console.log(resultStr)
    18.     // 1.3 写入到新的 html 文件中
    19.     fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {
    20.       if (err) console.log(err)
    21.       else console.log('写入成功')
    22.     })
    23.   }
    24. })

    压缩后的html代码如下：

    http模块 - 创建Web服务

    需求：创建Web服务并响应内容给浏览器

    步骤：

    1. 加载http模块，创建Web服务对象
    2. 监听request请求事件，设置响应头和响应体
    3. 配置端口号并启动Web服务
    4. 浏览器请求：//localhost:3000测试(localhost：固定代表本机的域名)

    代码如下：

    1. /**
    2.  * 目标：基于 http 模块创建 Web 服务程序
    3.  *  1.1 加载 http 模块，创建 Web 服务对象
    4.  *  1.2 监听 request 请求事件，设置响应头和响应体
    5.  *  1.3 配置端口号并启动 Web 服务
    6.  *  1.4 浏览器请求（http://localhost:3000）测试
    7.  */
    8. // 1.1 加载 http 模块，创建 Web 服务对象
    9. const http = require('http')
    10. const server = http.createServer()
    11. // 1.2 监听 request 请求事件，设置响应头和响应体
    12. server.on('request', (req, res) => {
    13.   // 设置响应头-内容类型-普通文本以及中文编码格式
    14.   res.setHeader('Content-Type', 'text/plain;charset=utf-8')
    15.   // 设置响应体内容，结束本次请求与响应
    16.   res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
    17. })
    18. // 1.3 配置端口号并启动 Web 服务
    19. server.listen(3000, () => {
    20.   console.log('Web 服务启动成功了')
    21. })

    浏览器访问->

    Node.js - 模块化

    在Node.js中，每个文件都被视为一个单独的模块

    概念：项目是由很多个模块文件组成的

    好处：提高代码复用性，按需加载，独立作用域

    使用：需要标准语法导出和导入进行使用

    Node.js支持的2种模块化标准：

    CommonJS标准语法（默认）：一般应用在Node.js项目环境中

    ECMAScript标准语法：一般应用在前端工程化项目中

    CommonJS标准

    需求：定义utils.js模块，封装基地址和求数组总和的函数

    使用：

    • 导出：module.exports = {} 
      1. const baseURL = 'http://hmajax.net'
      2. const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
      3.  
      4. module.exports = {
      5.     对外属性名1: baseURL.
      6.     对外属性名2： getArraySum
      7. }
    • 导入：require('模块名或路径') 
      1. const obj = require('模块名或路径')
      2. //obj就等于module.exports导出的对象
      • 模块名或路径：
        • 内置模块：直接写名字（例如：fs，path，http）
        • 自定义模块：写模块文件路径（例如：./utils.js）

    代码实现：

    utils.js文件：

    1. /**
    2.  * 目标：基于 CommonJS 标准语法，封装属性和方法并导出
    3.  */
    4. const baseURL = 'http://hmajax.itheima.net'
    5. const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
    6.  
    7. // 导出
    8. module.exports = {
    9.   url: baseURL,
    10.   arraySum: getArraySum
    11. }

    index.js文件：

    1. /**
    2.  * 目标：基于 CommonJS 标准语法，导入工具属性和方法使用
    3.  */
    4. // 导入
    5. const obj = require('./utils.js')
    6. console.log(obj)
    7. const result = obj.arraySum([5, 1, 2, 3])
    8. console.log(result)

    ECMAScript标准

    ECMAScript标准 - 默认导出和导入

    需求：定义utils.js模块，封装基地址和求数组总和的函数

    使用：

    • 导出：export default = {} 
      1. const baseURL = 'http://hmajax.net'
      2. const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
      3.  
      4. export default = {
      5.     对外属性名1: baseURL.
      6.     对外属性名2： getArraySum
      7. }
    • 导入：import 变量名 from '模块名或路径' 
      1. import obj from '模块名或路径'
      2. //obj就等于module.exports导出的对象
      • 模块名或路径：
        • 内置模块：直接写名字（例如：fs，path，http）
        • 自定义模块：写模块文件路径（例如：./utils.js）

    注意：Node.js默认支持CommonJS标准语法

    如需使用ECMAScript标准语法，在运行模块所在的文件夹新建package.json文件，并设置{"type":"module"}

     代码实现：

    package.json文件：

    1. {
    2.   "type": "module"
    3. }

    utils.js文件：

    1. /**
    2.  * 目标：基于 ECMAScript 标准语法，封装属性和方法并"默认"导出
    3.  */
    4. const baseURL = 'http://hmajax.itheima.net'
    5. const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
    6.  
    7. // 默认导出
    8. export default {
    9.   url: baseURL,
    10.   arraySum: getArraySum
    11. }

    index.js文件：

    1. /**
    2.  * 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用
    3.  */
    4. // 默认导入
    5. import obj from './utils.js'
    6. console.log(obj)
    7. const result = obj.arraySum([10, 20, 30])
    8. console.log(result)

    ECMAScript标准 - 命名导出和导入

    命名标准使用：

    导出：export 修饰定义语句

    1. export const baseURL = 'http://hmajax.net'
    2. export const getArraySum = arr => arr.reduce((sum, val) => sum += val. 0)

    导入：import {同名变量} from '模块名或路径'

    1. import { baseURL, getArraySum } from '模块名或路径'
    2. // baseURL 和 getArraySum 是变量，值为模块内命名导出的同名变量的值

    如何选择：

    按需加载，使用命名导出和导入

    全部加载，使用默认导出和导入

    包

    包的概念：将模块，代码，其他资料聚合成一个文件夹

    分类：

    项目包：主要用于编写项目和业务逻辑

    软件包：封装工具和方法进行使用

    要求：根目录中，必须有package.json文件（记录包的清单信息）

    注意：导入软件包时，引入的默认是index.js的模块文件/main属性指定的模块文件

    package.json格式：

    1. {
    2.   "name": "cz_utils",    软件包名称
    3.   "version": "1.0.0",    软件包当前版本
    4.   "description": "一个数组和字符串常用工具方法的包",    软件包简短描述
    5.   "main": "index.js",    软件包入口点
    6.   "author": "itheima",    软件包作者
    7.   "license": "MIT"    软件包许可证(商用后可以用作者名字宣传)
    8. }

    npm - 软件包管理器

    npm是Node.js标准的软件包管理器，在2017年1月时，npm仓库中就已有超过350000个软件包

    使用：

    1. 初始化清单文件：npm init -y（得到package.json文件，有则略过此命令）
    2. 下载软件包：npm i 软件包名称
    3. 使用软件包

    接下来通过实操体验一下

    需求：使用dayjs软件包，来格式化日期时间

    终端输入命令：

    1、npm init -y

    2、npm i dayjs

    代码如下：

    1. /**
    2.  * 目标：使用 npm 下载 dayjs 软件包来格式化日期时间
    3.  *  1. （可选）初始化项目清单文件，命令：npm init -y
    4.  *  2. 下载软件包到当前项目，命令：npm i 软件包名称
    5.  *  3. 使用软件包
    6.  */
    7. // 3. 使用软件包
    8. const dayjs = require('dayjs')
    9. const nowDateStr = dayjs().format('YYYY-MM-DD')
    10. console.log(nowDateStr)

    npm - 安装所有依赖

    由于自己用npm下载依赖比磁盘传递拷贝要快得多，所以在安装依赖时通常由我们自己解决（即node_modules）

    命令： npm i

    npm - 全局软件包 nodemon

    软件包区别：

    本地软件包：当前项目内使用，封装属性和方法，存在于node_modules

    全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

    nodemon作用：替代node命令，检测代码更改，自动重启程序

    使用：

    1.安装：npm i nodemon -g（-g代表安装到全局环境中）

    2.运行：nodemon待执行的目标js文件

    npm - 删除软件包

    命令：npm uni 软件包名

  • 相关阅读:
    GoFrame:如何简单地搭建一个简单地微服务
    （三）Mybatis------引入Mapper接口以及传入各种参数类型
    基于R语言APSIM模型进阶应用与参数优化、批量模拟实践技术
    vue3 props 传值
    从一则12年前的提问中学习:从配对序列联配到多序列联配
    Linux安装进程树状图显示工具pstree
    Golang 规则引擎原理及实战
    什么是MogaFX外汇储备？定义和重要性
    项目人力资源管理
    Vue3通透教程【十七】Vite构建TS版本Vue项目
  • 原文地址：https://blog.csdn.net/qingwan_91/article/details/139772487