目录
一、Node.js入门
什么是Node.js?
定义:
作用:使用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模板)
安装过程:默认下一步即可
注释事项:
- 安装在非中文路径下
- 无需勾选自动安装其他配套软件
成功验证:
- 打开cmd终端,输入node-V命令查看版本号
- 如果有显示,则代表安装成功
使用Node.js
需求:新建JS文件,并编写代码后,在node环境下执行
命令:在VSCode集成终端中,输入node xxx.js,回车即可执行
总结:
1. Node.js是什么?
- 基于Chrome的V8引擎封装,独立执行JavaScript代码的环境
2. Node.js 与浏览器环境的JS最大区别?
- Node.js环境中没有BOM和DOM
3. Node.js 有什么用?
- 编写后端程序:提供数据和网页资源等
- 前端工程化:集成各种开发中使用的工具和技术
4. Node.js 如何执行代码?
- 在VSCode终端中输入:node xxx.js回车即可执行(注意路径)
fs模块-读写文件
模块:类似插件,封装了方法/属性
fs模块:封装了与本机文件系统进行交互的,方法/属性
语法:
- 加载fs模块对象.
- 写入文件内容
- 读取文件内容
/**
* 目标:基于 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模块-路径处理
问题:Node.js 代码中,相对路径是根据终端所在路径来查找的,可能无法找到你想要的文件
建议:在Node.js代码中,使用绝对路径
补充:__dirname 内置变量(获取当前模块目录-绝对路径)
- windows: D:\备课 代码\3- B站课程\03_ Node.js 与Webpack\03-code\03
- mac:/Users/xxx/Desktop/备课代码/3-B站课程/03_ Node.js 与Webpack/03-code/03
注意:path.join()会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起
语法:
- 加载path模块
- 使用 path.join方法,拼接路径
案例-压缩前端html
需求:把回车符(\r) 和换行符(\n)去掉后,写入到新html文件中
步骤:
- 读取源html文件内容
- 正则替换字符串
- 写入到新的html文件中
URL中的端口号
URL:统一资源定位符,简称网址,用于访问服务器里的资源
端口号:标记服务器里不同功能的服务程序
端口号范围:0-65535之间的任意整数
注意:http协议,默认访问80端口
常见的服务程序
Web服务程序:用于提供网上信息浏览功能
注意:0-1023和一些特定端口号被占用,我们自己编写服务程序请避开使用
总结:
1. 端口号的作用?
- 标记区分服务器里不同的服务程序
2. 什么是Web服务程序?
- 提供网上信息浏览的程序代码
http模块-创建Web服务
需求:创建Web服务并响应内容给浏览器
步骤:
- 加载http模块,创建Web服务对象
- 监听 request请求事件,设置响应头和响应体
- 配置端口号并启动Web服务
- 浏览器请求http://localhost:3000测试(localhost:固定代表本机的域名)
案例-浏览时钟
需求:基于Web服务,开发提供网页资源的功能
步骤:
- 基于http模块,创建Web服务
- 使用req.url获取请求资源路径,判断并读取index.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.is模块化
什么是模块化?
定义:
概念:项目是由很多个模块文件组成的
好处:提高代码复用性,按需加载,独立作用域
使用:需要标准语法导出和导入进行使用