前端-Node.js

1. 什么是Node.js

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

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

编写数据接口，提供网页资源浏览功能等等。

前端工程化：为后续学习Vue和React等框架做铺垫。

2. 前端工程化

开发项目直到上线，过程中集成的所有工具和技术。

打包工具：webpack静态模块的打包工具，对前端代码进行转换，压缩，以及整合等处理。

格式化工具：多人协同开发，代码风格统一。

压缩工具：为了前端项目体积更小，运行更快。

转换工具：转成原生的CSS；对JS的高版本功能进行降级处理。

脚手架工具：所有的准备过程，在脚手架工具。

自动化部署

==》离不开Node.js（Node.js可以主动的来读取本地前端的代码内容，然后对前端代码进行一些相应的后续处理）

3. Node.js为何能执行JS？

首先：浏览器能制定JS代码，依靠的是内核中的V8引擎（C++程序）。

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

4. Node.js的安装

node-v16.19.0.msi 傻瓜安装

cmd: node -v

5. fs模块-读写文件

fs模块、path模块

模块：类似插件，封装了方法/属性

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

语法：

1.加载fs模块对象

2.写入文件内容

3.读取文件内容

javascript 复制代码

const fs = require('fs') // fs是模块标识符，模块的名字
const path = require('path') // path是模块标识符，模块的名字

fs.writeFile('文件路径'，'写入内容'，err =>{
    //写入的回调函数
})


示例1：
fs.writeFile('./test.txt','hello Node.js',err =>{
    if(err) {
        console.log(err)
    }else{
        console.log('写入成功')
    }
})


fs.readFile('文件路径'，(err, data) =>{
    //读取后的回调函数
    // data是文件内容的Buffer数据流
})

示例2：
fs.readFile('./test.txt', (err, data) =>{
    //读取后的回调函数
    //data是文件内容的Buffer 16进制数据流对象
    // .toString() 转换成字符串
    if(err){
         console.log(err)
    }else{
        console.log(data.toString())
         const htmlStr = data.toString()
        // g全局匹配 不写只匹配一次
        const resultStr = htmlStr.replace(/[\r\n]/g, '')
        console.log(resultStr)
    } 

})

path模块-路径问题-解决兼容性问题

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

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

补充：__dirname内置变量（获取当前模块目录-绝对路径）两个下划线

window: D:\备课代码\03-code/03

mac: /Users/xxx/Desktop/备课代码/03-code/03

注意： path.join(__dirname, '../test.txt') 会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起。

语法：

1.加载path模块

2.使用path.join方法，拼接路径。

6. 案例1：压缩前端html

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

步骤：

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

7. URL中的端口号

URL：统一资源定位符，简称网址，用于访问服务器里的资源。

端口号：标记服务器里不同功能的服务程序。

端口范围：0~65535之间的任意整数

举例： http://news/baidu.com:80/api/provice

http: 协议

news/baidu.com 域名

80 端口号

api/provice 资源路径

注意： http协议，默认访问80端口。

常见的服务程序：

Web服务程序：用于提供网上信息浏览功能

注意： 0-1023和一些特定端口号被占用，我们自己编写服务程序请避开使用。

8 http模块-创建web服务

http模块

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

步骤：

1.加载http模块，创建web服务对象

2.监听request请求时间，设置响应头和响应体

3.配置端口号并启动web服务

4.浏览器请求http://localhost:3000测试

代码实现：

9. 案例2：浏览时钟

需求：基于web服务，开发提供网页资源的功能

网页 -------------（基于时钟网页 http://localhost:8080/index.html）------------------\> 服务器

网页<------------（响应时钟网页内容 html标签，css样式，js等字符串）-------------服务器

步骤：

基于http模块，创建web服务

2.使用req.url获取请求资源路径，判断并读取index.html里字符串内容，返回给请求方

3.其他路径，暂时返回不存在的提示。

4.运行web服务，用浏览器发起请求测试。

10. Node.js模块化

什么是模块化？

定义： CommonJS模块是为了Node.js打包JavaScript代码的原始方法。Node.js还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。

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

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

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

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

js代码[ fs、path、http 、query、String、utils.js]

11. CommonJS标准-导入和导出

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

使用：

1.导出： module.exports= {}

2.导入：require('模块名或路径')

模块名或路径：

内置模块：直接写名字（例如： fs、path 、http）

自定义模块：写模块文件路径（例如： ./utils.js）

使用示例：

12 ECMAScript标准-默认导出和导入

需求：封装并导出基地址和求数组元素和的函数

默认标准使用：

1.导出： export default {}

2.导入： import 变量名 from '模块名或路径'

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

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

使用示例：

13 ECMAScript标准-命名导出和导入

需求：封装并导出基地址和求数组元素和的函数

命名标准使用：

导出： export 修饰定义语句

2.导入： import [同名变量] from '模块名或路径'

如何选择：

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

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

使用示例：

总结：

1.Node.js支持哪2种模块化标准？

① CommonJS标准语法（默认）

② ECMAScript标准语法

2.ECMAScript标准，命名导出和导入的语法？

① . 导出： export 修饰定义语句

②.导入： import [同名变量] from '模块名或路径'

3.ECMAScript标准，默认导出和导入的语法？

① 导出： export default {}

② 导入： import 变量名 from '模块名或路径'

14 包的概念

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

包分类：

① 项目包：主要用于编写项目和业务逻辑，编写项目代码的文件夹

② 软件包：封装工具和方法供开发者进行使用。

要求：根目录中，必须有package.json文件（记录包的清单信息：记录软件包的名字，作者，入口文件等信息）

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

需求：封装数组求和和函数的模块，判断用户名和密码长度函数的模块，形成一个软件包。

15. npm-软件包管理器

定义： npm简介

npm是Node.js标准的软件包管理器（下载软件包以及管理版本，下载的包会存放在当前项目下的node_modules中，并记录在package.json中）

在2017年1月时，npm仓库中就已经超过3.5W个软件包，这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。

它起初是作为下载和管理Node.js包依赖的方式，但其现在也已成为前端JavaScript中使用的工具。

使用：

① 初始化清单文件： npm init -y (得到package.json文件，有则略过此命令)

② 下载软件包： npm i 软件包名称 | npm i 软件包名称@版本号

③ 使用软件包

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

使用示例：

16 npm 按照所有依赖

问题：项目中不包含node_mudules,能否正常运行？

不能，缺少依赖的本地软件包

为什么不同时复制过来呢？

原因：因为自己用npm 下载依赖比磁盘传递拷贝要快得多。

解决：项目终端输出命名： npm i

下载package.json中记录的所有软件包。

17 npm-全局软件包nodemon

软件包区别：

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

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

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

使用：

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

② 运行：nodemon 待执行的目标js文件。

需求：启动准备好的项目，修改代码保存后，观察自动重启应用程序。

nodemon怎么用？

① 先确保安装 npm i nodemon -g

② 使用 nodemon 执行目标 js文件