前端学习笔记 | Node.js

一、Node.js入门

1、什么是Node.js

• 定义：是跨平台JS运行环境（可以独立执行JS的环境）
• 作用：
  • 编写数据接口，提供网页资源功能等等
  • 前端工程化：为后续学Vue和React等框架做铺垫

2、Node.js为何能执行JS？

3、如何执行Node.js代码?

在VSCode终端中输入：node xxx.js回车即可执行（注意路径）

二、 fs模块-读写文件

1、定义

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

2、语法

3、案例：读写文件

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

 三、path模块-路径处理

 1、会出现的问题？

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

2、处理方法

（1）使用内置变量_dirname，该变量的值是终端路径

（2）利用path.join()方法传入参数拼接的路径参数

3、案例：路径处理实例

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

四、压缩前端html

1、需求

把回车符和换行符去掉后重新写入到新html文件中

2、步骤

（1）读取源html文件内容

（2）正则替换字符串

（3）写入到新的html文件中

3、案例

/*** 目标1：压缩 html 代码* 需求：把回车符 \r，换行符 \n 去掉，写入到新 html 文件中*  1.1 读取源 html 文件内容*  1.2 正则替换字符串*  1.3 写入到新的 html 文件中*/
// 1.1 读取源 html 文件内容
const fs = require('fs')
const path = require('path')
fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {if (err) console.log(err)else {const htmlStr = data.toString()// 1.2 正则替换字符串const resultStr = htmlStr.replace(/[\r\n]/g, '')console.log(resultStr)// 1.3 写入到新的 html 文件中fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {if (err) console.log(err)else console.log('写入成功')})}
})

五、http:url端口号、web服务程序

1、URL端口号

定义：标记服务器里不同功能的服务程序

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

2、常见的服务程序

3、创建Web服务

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

4、案例：将一个html网页通过web服务加载

/*** 目标：基于 Web 服务，开发提供网页资源的功能* 步骤：*  1. 基于 http 模块，创建 Web 服务*  2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方*  3. 其他路径，暂时返回不存在提示*  4. 运行 Web 服务，用浏览器发起请求*/
const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {// 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方if (req.url === '/index.html') {fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end(data.toString())})} else {// 3. 其他路径，暂时返回不存在提示res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end('你要访问的资源路径不存在')}
})
server.listen(8080, () => {console.log('Web 服务启动成功了')
})

六、 Node.js模块化

1、什么是模块化

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

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

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

2、CommonJS标准

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

3、案例

utils.js

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

index.js

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

4、ECMAScript标准-默认导出和导入

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

 

utils.js

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

package.json

{"type": "module"
}

index.js

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

5、ECMAScript标准-命名导出和导入

按需导出时使用

模块 utils.js

/*** 目标：基于 ECMAScript 标准语法，封装属性和方法并"命名"导出*/
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

配置文件 package.json

{"type": "module"
}

唯一接口 index.js

/*** 目标：基于 ECMAScript 标准语法，"命名"导入，工具属性和方法使用*/
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

 七、包

1、包的概念

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

2、包分类

• 项目包：编写项目代码的文件夹
• 软件包：封装工具和方法供开发者使用
  • 要求：根目录中，必须要有package.json文件（记录包的清单信息）
  • 
  • 注意导入软件包时，引入的默认时index.js模块文件/main属性指定的模块文件
  • 

3、实例

utils是一个软件包

arr.js和str.js均为软件包封装的工具，index.js是utils工具包唯一出口（作用：把所有工具模块方法集中起来，统一向外暴露），server.js导入utils软件包，使用里面封装的工具函数。

arr.js

/*** 目标：封装数组常用的方法*/
// 数组求和函数
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)module.exports = {getArraySum
}

str.js

/*** 目标：封装校验用户名和密码长度的函数* 要求：用户名最少 8 位，密码最少为 6 位*/const checkUserName = username => {return username.length >= 8
}const checkPassWord = password => {return password.length >= 6
}module.exports = {checkUser: checkUserName,checkPwd: checkPassWord
}

index.js

/*** 本文件是，utils 工具包的唯一出口* 作用：把所有工具模块方法集中起来，统一向外暴露*/
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')// 统一导出所有函数
module.exports = {getArraySum,checkUser,checkPwd
}

server.js

/*** 目标：导入 utils 软件包，使用里面封装的工具函数*/
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

八、npm包管理器

1、npm包

（1）定义

• npm是Node.js标准的软件包管理器

（2）使用

• 初始化清单文件：npm init -y（得到package.json文件，有则跳过）
• 下载软件包：npm i 软件包名称
• 使用软件包

（3）总结

2、npm-安装所有依赖

（1）问题：项目中不包含node_modules，不能正常运行。原因是缺少以来的本地软件包，因为自己用npm下载比拷贝作者上传包快得多。

（2）解决方法：npm i

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

（3）总结

3、全局软件包nodemon

（1）软件包区别：

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

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

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

（2）使用

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

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

e.g nodemon server.js（node server.js 代码修改需要手动启动）

（3）案例：启动准备好的项目，修改代码保存后，观察自动重启应用程序

（4）总结

 九、黑马Node.js总结