01_Node.js入门 (黑马)
01_Node.js入门知识点自测
[*] 从 index.js 出发，访问到 student/data.json 的相对路径如何写?
https://i-blog.csdnimg.cn/direct/5d7e5b905b1d406fb5d8483a02908cfa.pngA：../public/teacher/data.json
B：./public/student/data.json
C：../student/data.json
<details><summary>答案</summary><ul><li>A选项正确</li></ul></details>
[*] 如下代码运行结果是多少?
const str = `我们都是好人，好人就是我`
const result = str.replace(/好/g, '') A：我们都是人，好人就是我
B：我们都是人，人就是我
<details><summary>答案</summary><ul><li>B选项正确</li></ul></details>
[*] 以下哪个正则表达式，能匹配字符串中的小括号？
A：/(/
B：/\(/
<details><summary>答案</summary><ul><li>B选项正确，由于在正则表达式里直接写小括号，相当于分组功能，而不是匹配字符串小括号里，可以加一个斜杠代表转义，转换它去匹配小括号字符串而不再是分组</li></ul></details>
[*] 如下代码返回的结果是什么？
const str = '/api/hello?a=10&b=20'
const result = str.startsWith('/api/hello') A：true
B：false
<details><summary>答案</summary><ul><li>A 项正确，startsWith 用于判断调用的字符串是否以传入的目的字符串开头，是返回 true，否则返回 false 在原地</li></ul></details>
提前安装软件
在配套的资料文件夹中，先安装好 Node.js 环境，上课可以节省时间
具体安装过程可以参考 PPT 和 配套视频！
01.什么是 Node.js
目的
什么是 Node.js，有什么用，为何能独立实行 JS 代码，演示安装和实行 JS 文件内代码
讲解
[*] Node.js 是一个独立的 JavaScript 运行环境，能独立实行 JS 代码，由于这个特点，它可以用来编写服务器后端的应用程序
[*] Node.js 作用除了编写后端应用程序，也可以对前端代码举行压缩，转译，整合等等，进步前端开辟和运行效率
[*] Node.js 基于Chrome V8 引擎封装，独立实行 JS 代码，但是语法和浏览器环境的 V8 有所差别，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法
[*] 想要得到 Node.js 需要把这个软件安装到电脑，在素材里有安装程序（window 和 mac 环境的）参考 PPT 默认下一步安装即可
[*] Node.js 没有图形化界面，需要利用 cmd 终端命令行（利用一些命令来操控电脑实行某些程序软件）输入，node -v 查抄是否安装成功
node -v
[*] 需求：新建 index.js 文件，编写打印代码和 for 循环打印 3 个 6
/**
* 目标：编写 js 代码，用 node 命令执行
* 终端作用：敲击命令，调用对应程序执行
* 终端打开：目标文件->右键->在集成终端中打开
* 命令：node xxx.js （注意路径）
*/
console.log('Hello, World')
for (let i = 0; i < 3; i++) {
console.log(6)
}
[*] Node.js 实行目的 JS 文件，需要利用 node xxx.js 命令来实行（我们可以借助 VSCode 集成终端利用，好处：可以快速切换到目的 JS 文件所在终端目录，利用相对路径找到要实行的目的 JS 文件
https://i-blog.csdnimg.cn/direct/59855acc762042c18364720c5116c3f3.png
小结
[*] Node.js 有什么用？
<details><summary>答案</summary><ul><li>编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，进步开辟效率</li></ul></details>
[*] Node.js 为何能实行 JS 代码？
<details><summary>答案</summary><ul><li>基于 Chrome 的 V8 引擎封装</li></ul></details>
[*] Node.js 与浏览器环境的 JS 最大区别？
<details><summary>答案</summary><ul><li>Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法</li></ul></details>
[*] Node.js 如何实行代码？
<details><summary>答案</summary><ul><li>在 VSCode 终端中输入：node xxx.js 回车即可实行（注意路径）</li></ul></details>
02.fs模块-读写文件
目的
相识模块概念，利用 fs 模块封装的方法读写文件内容
讲解
[*] 模块：雷同插件，封装了方法和属性供我们利用
[*] fs 模块：封装了与本机文件系统举行交互的，方法和属性
[*] fs 模块利用语法如下：
[*] 加载 fs 模块，得到 fs 对象
const fs = require('fs')
[*] 写入文件内容语法：
fs.writeFile('文件路径', '写入内容', err => {
// 写入后的回调函数
})
[*] 读取文件内容的语法：
fs.readFile('文件路径', (err, data) => {
// 读取后的回调函数
// data 是文件内容的 Buffer 数据流
})
[*] 需求：向 test.txt 文件写入内容并读取打印
/**
* 目标：使用 fs 模块，读写文件内容
* 语法：
* 1. 引入 fs 模块
* 2. 调用 writeFile 写入内容
* 3. 调用 readFile读取内容
*/
// 1. 引入 fs 模块
const fs = require('fs')
// 2. 调用 writeFile 写入内容
// 注意：建议写入字符串内容，会覆盖目标文件所有内容
fs.writeFile('./text.txt', '欢迎使用 fs 模块读写文件内容', err => {
if (err) console.log(err)
else console.log('写入成功')
})
// 3. 调用 readFile读取内容
fs.readFile('./text.txt', (err, data) => {
if (err) console.log(err)
else console.log(data.toString()) // 把 Buffer 数据流转成字符串类型
})
小结
[*] 什么是模块？
<details><summary>答案</summary><ul><li>雷同插件，封装了方法和属性</li></ul></details>
[*] fs 模块的作用？
<details><summary>答案</summary><ul><li>读写本机文件内容</li></ul></details>
03.path模块-路径处置惩罚
目的
利用 path 模块来得到绝对路径
讲解
[*] 为什么在 Node.js 待实行的 JS 代码中要用绝对路径：
Node.js 实行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们以为的从代码本身出发，会遇到问题，以是在 Node.js 要实行的代码中，访问其他文件，发起利用绝对路径
[*] 新建 03 文件夹编写待实行的 JS 代码，访问外层相对路径下的文件，<span style="color: red;">然后在最外层终端路径来实行目的文件，造成问题</span>
https://i-blog.csdnimg.cn/direct/cb011c9122114ea3b3bccb4aff06d641.pnghttps://i-blog.csdnimg.cn/direct/89461fbf35794a2eb833e23d09fc5991.png
[*] 问题原因：就是从代码文件夹出发，利用../text.txt剖析路径，找不到目的文件，报错了！
[*] 解决方案：利用模块内置变量 __dirname配合 path.join() 来得到绝对路径利用
const fs = require('fs')
console.log(__dirname) // D:\备课代码\2_node_3天\Node_代码\Day01_Node.js入门\代码\03
// 1. 加载 path 模块
const path = require('path')
// 2. 使用 path.join() 来拼接路径
const pathStr = path.join(__dirname, '..', 'text.txt')
console.log(pathStr)
fs.readFile(pathStr, (err, data) => {
if (err) console.log(err)
else console.log(data.toString())
})
[*] 再次实行检察问题就被修复了！以后在 Node.js 要实行的 JS 代码中访问其他文件的路径，都发起利用绝度路径
小结
[*] path.join() 方法有什么用？
<details><summary>答案</summary><ul><li>按照所在本机系统的分隔符作为定界符来链接你传入的路径</li></ul></details>
[*] __dirname 模块内置变量的值是多少？
<details><summary>答案</summary><ul><li>动态获取当前文件所在文件夹的绝对路径</li></ul></details>
04.案例-压缩前端html
目的
压缩前端代码，体验前端工程化的例子
讲解
[*] 前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了进步前端开辟项目的效率
[*] 需求：把预备好的 html 文件里的回车符（\r）和换行符（\n）去掉举行压缩，写入到新 html 中
[*] 步骤：
[*] 读取源 html 文件内容
[*] 正则替换字符串
[*] 写入到新的 html 文件中，并运行检察是否能正常打开网页
[*] 代码如下：
/**
* 目标一：压缩 html 里代码
* 需求：把 public/index.html 里的，回车/换行符去掉，写入到 dist/index.html 中
*1.1 读取 public/index.html 内容
*1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
*1.3 确认后，写入到 dist/index.html 内
*/
const fs = require('fs')
const path = require('path')
// 1.1 读取 public/index.html 内容
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
const htmlStr = data.toString()
// 1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
const resultStr = htmlStr.replace(/[\r\n]/g, '')
// 1.3 确认后，写入到 dist/index.html 内
fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => {
if (err) console.log(err)
else console.log('压缩成功')
})
})
小结
[*] 前端工程化的理解？
<details><summary>答案</summary><ul><li>对前端代码举行优化，集成各种进步前端开辟效率的工具等</li></ul></details>
05.认识URL中的端口号
目的
认识 URL 中端口号的作用，以及 Web 服务的作用
讲解
[*] URL 是统一资源定位符，简称网址，用于访问网络上的资源
[*] 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的恣意整数）
[*] 注意：http 协议，默认访问的是 80 端口
[*] Web服务：一个程序，用于提供网上信息浏览功能
[*] 注意：0-1023 和一些特定的端口号被占用，我们本身编写服务程序请避开利用
小结
[*] 端口号的作用？
<details><summary>答案</summary><ul><li>标记区分服务器里差别的服务程序</li></ul></details>
[*] 什么是 Web 服务？
<details><summary>答案</summary><ul><li>提供网上信息浏览的服务的一个程序</li></ul></details>
06.http模块-创建Web服务
目的
基于 Node.js 环境，利用内置 http 模块，创建 Web 服务程序
讲解
[*] 需求：引入 http 模块，利用相干语法，创建 Web 服务程序，响应返回给哀求方一句提示 ‘hello，world’
[*] 步骤：
[*] 引入 http 模块，创建 Web 服务对象
[*] 监听 request 哀求变乱，对本次哀求，做一些响应处置惩罚
[*] 启动 Web 服务监听对应端口号
[*] 运行本服务在终端进程中，用浏览器发起哀求
[*] 注意：本机的域名叫做 localhost
[*] 代码如下：
/**
* 目标：基于 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 服务启动成功了')
})
小结
[*] 如何访问本机里运行的 Web 服务？
<details><summary>答案</summary><ul><li>http://localhost:Web服务的端口号/资源路径</li></ul></details>
07.案例-浏览时钟
目的
体验 Web 服务除了接口数据以外，还能返回网页资源等
讲解
[*] 需求：基于 Web 服务，开辟提供网页资源的功能，相识下后端的代码工作过程
https://i-blog.csdnimg.cn/direct/0b3fe56d781649a5bb1f752b5bf35a28.png
[*] 步骤：
[*] 基于 http 模块，创建 Web 服务
[*] 利用 req.url 获取哀求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给哀求方
[*] 其他路径，暂时返回不存在的提示
[*] 运行 Web 服务，用浏览器发起哀求
[*] 代码如下：
/**
* 目标：编写 web 服务，监听请求的是 /index.html 路径的时候，返回 dist/index.html 时钟案例页面内容
* 步骤：
*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 服务启动了')
})
小结
[*] Web 服务程序都有什么功能？
<details><summary>答案</summary><ul><li>提供数据和网页资源等等功能，其他它的功能远不止于此</li></ul></details>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]