前端-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.读取文件内容

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文件中。

步骤：
1. 读取源html文件内容

2. 正则替换字符串

3. 写入到新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等字符串）-------------服务器

步骤：

1. 基于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标准-命名导出和导入

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

命名标准使用：

1. 导出： 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文件

18 总结