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 检查是否安装成功
/*** 目标：编写 js 代码，用 node 命令执行* 终端作用：敲击命令，调用对应程序执行* 终端打开：目标文件->右键->在集成终端中打开* 命令：node xxx.js （注意路径）*/
for (let i = 0; i < 3; i++) {console.log(i)
}
02.fs模块 读写文件
-
模块：类似插件，封装了方法和属性供我们使用
-
fs 模块：封装了与本机文件系统进行交互的，方法和属性
/*** 目标：使用 fs 模块，读写文件内容* 语法：* 1. 引入 fs 模块* 2. 调用 writeFile 写入内容* 3. 调用 readFile 读取内容*/
const fs = require('fs') // 引入 fs 模块fs.readFile('./text.txt',(err,data)=>{ // 调用 readFile 读取内容 data 是文件内容的 Buffer 数据流if (err) {console.log(err) } else {// 读取出来的数据默认是Buffer数据流，得toString（）转成字符串，用户能看懂console.log(data.toString()) }
})
// fs.writeFile('写入的文件','写入的内容',回调函数（err）)
// 写入的数据，新的替换旧的 会覆盖原文件的所有内容；没有这个文件则自动创建这个文件
fs.writeFile('./text11.txt','我是鸿蒙6期的~~~',err=>{ // 写入内容console.log('恭喜写入成功')
})
03.path 模块（绝对路径）
- Node.js 执行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们认为的从代码本身出发，会遇到问题，所以在 Node.js 要执行的代码中，访问其他文件，建议使用绝对路径
- path模块内置变量
__dirname配合 path.join() 来得到绝对路径使用
/*** 目标：读取 test.txt 文件内容* 注意：代码中，使用绝对路径* 原因：Node.js 执行时会以终端所在文件夹作为相对路径，去拼接代码中路径使用（导致找不到目标文件）* 解决：使用 path.join() 和 __dirname 来填写要查找的目标文件绝对地址*/const fs = require('fs')
const path = require('path') // 引入path模块
fs.readFile(path.join(__dirname,'..','text.txt'),(err,data)=>{ // 读取if (err) {console.log(err) } else {console.log(data.toString()) }
})04.案例 压缩前端的html
/*** 目标一：压缩 html 里代码* 需求：把 public/index.html 里的，回车/换行符去掉，写入到 dist/index.html 中* 1.1 读取 public/index.html 内容* 1.2 使用正则替换内容字符串里的，回车符\r 换行符\n* 1.3 确认后，写入到 dist/index.html 内*/
// 读取public里面的index.html→格式化压缩→压缩完的代码写入到dist里面的newIndex.html
// 读取文件fs模块+路径path
const fs = require('fs')
const path = require('path')
// 读取原html文件
// fs.readFile（文件，回调函数）
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {if (err) console.log(err)// else console.log(data.toString()) const htmlStr = data.toString() // 代码→去掉回车换行\r\n→用正则找到\r\n替换成空字符const newStr = htmlStr.replace(/[\r\n]/g, '') // g表示替换所有的\r\nconsole.log(newStr)// 写入到新的html文件// fs.writeFile（文件路径，要写入的内容，回调函数）fs.writeFile(path.join(__dirname, 'dist', 'newIndex.html'), newStr, (err) => {if (err) console.log(err)else console.log('恭喜，压缩成功')})
})
05.案例 压缩前端的js（压缩 js 里代码，并整合到 html 中一起运行）
/*** 目标二：压缩 js 里代码，并整合到 html 中一起运行* 2.1 读取 public/index.js 内容* 2.2 使用正则替换内容字符串里的，回车符\r 换行符\n 打印语句console.log('xxx');* 2.3 确认后，拼接 html 内容写入到 dist/index.html 内*/
const fs = require('fs')
const path = require('path')
// 读取html文件
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {if (err) console.log(err)// else console.log(data.toString())const htmlStr = data.toString()const newStr = htmlStr.replace(/[\n\r]/g, '') //已经去掉\r\n的html代码// console.log(newStr) // 读取html成功// 读取js代码fs.readFile(path.join(__dirname, 'public/index.js'), (err, data) => {if (err) console.log(err)// else console.log(data.toString())// 有script标签再放js代码const myjs = data.toString()//代码→去掉\r\n;去掉log输出→把html和js拼一起写入到新html文件const jsStr = myjs.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')// console.log(jsStr) const newjs = `<script>${jsStr}</script>` //带script标签的js// 把html文件和js一起写到其他文件夹// fs.writeFile（文件路径，写入的内容，回调函数）把html代码和js代码凭借到一起fs.writeFile(path.join(__dirname, './dist/new.html'), newStr + newjs, (err) => {if (err) console.log(err)else console.log('成功')})})
})
06.URL 端口号
/*** 目标：了解端口号的作用* 端口号：用于区分服务器中的不同服务程序* 取值范围：0-65535* 注意：0-1023 和一些特定端口号是被占用的，我们自己编写服务程序请避开使用* 1. URL 是统一资源定位符，简称网址，用于访问网络上的资源2. 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）3. 注意：http 协议，默认访问的是 80 端口4. Web服务：一个程序，用于提供网上信息浏览功能5. 注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用 * * */07.http模块-创建Web服务
/*** 目标：使用 http 模块，创建 Web 服务* Web服务：一个程序，用于提供网上信息浏览服务* 步骤：* 1. 引入 http 模块，创建 Web 服务对象* 2. 监听 request 事件，对本次请求，做一些响应处理* 3. 启动 Web 服务监听对应端口号* 4. 运行本服务在终端，用浏览器访问 http://localhost:3000/ 发起请求（localhost 是本机域名）* 注意：终端里启动了服务，如果想要终止按 ctrl c 停止即可*/
// 1.引入 http 模块，创建 Web 服务对象
const http = require('http')
// 创建web服务
const server = http.createServer()
// 发请求，返回响应结果
// server.on('request事件',回调函数)
server.on('request',(req,res)=>{// 设置响应头，内容类型，普通 html 文本：编码格式为 utf-8res.setHeader('Content-Type','text/html;charset=utf-8')res.end('你好，欢迎访问')// res.end('hallo')
})// 启动 Web 服务监听对应端口号
// server.listen(端口号，回调函数)
server.listen(6656,()=>{console.log('web 服务已启动')})08.web服务 - 支持中文字符
/*** 目标：Web 服务支持中文字符* 问题：返回响应内容为，中文字符，浏览器无法正确显示* 原因：Web 服务没有设置响应头，指定说明内容类型和编码格式* 解决：设置响应头内容类型，让请求方能正确解析* 语法：res.setHeader('Content-Type', 'text/html;charset=utf-8')*/const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {res.end('你好，亲爱的世界')
})
server.listen(3000, () => {console.log('Web 服务启动了')
})09.案例 - 省份列表接口
/*** 目标：基于 Web 服务，开发-省份列表数据接口* 步骤：* 1. 创建 Web 服务* 2. 使用 req.url 获取请求的资源路径，读取 json 文件数据返回* 3. 其他请求的路径，暂时返回不存在的提示* 4. 运行 Web 服务，用浏览器请求地址查看效果*/
const fs = require('fs')const http = require('http')
const path = require('path')// 创建web服务
const server = http.createServer()// 3.发请求，监听请求，返回响应结果
server.on('request',(req,res)=>{
if(req.url ==='/api/provin'){// console.log('查询地址成功') // 读取json文件里面的内容，响应给用户→ 中文 → 支持中文 → 设置响应头内容类型fs.readFile(path.join(__dirname,'data/province.json'),(err,data)=>{res.setHeader('content-type','application/json;charset=utf-8')res.end(data.toString()) //响应给用户})
}else{// console.log('请求地址错误，查无此地址')res.setHeader('content-type','text/html;charset=utf-8')res.end('不好意思，您访问的资源不存在') //响应给用户
}
})// 4.监听某个端口号
server.listen(3333,()=>{console.log('服务器启动成功')})
10.案例 - 城市列表接口
/*** 目标：基于 Web 服务，开发-城市列表数据接口* 步骤：* 1. 判断 req.url 资源路径+查询字符串，路径前缀匹配/api/city* 2. 借助 querystring 模块的方法，格式化查询参数字符串* 3. 读取 city.json 城市数据，匹配省份名字下属城市列表* 4. 返回城市列表，启动 Web 服务测试*/
const fs = require('fs')
const path = require('path')
const http = require('http')
// const { queryObjects } = require('v8')
const qs = require('querystring')
// 创建web服务
const server = http.createServer()// 03.发请求监听请求，返回响应结果
server.on('request',(req,res)=>{//判断条件－url是否以/api/city开头→是以这个开头的，拿到pname的值，去查找数据if(req.url.startsWith('/api/city')){console.log('地址正确')const str =req.url.split('?')[1]const pname = qs.parse(str).pname// console.log(pname)fs.readFile(path.join(__dirname,'data/city.json'),(err,data)=>{const result = JSON.parse(data.toString())[pname] // 数组，不能直接返回数组，返回jsonres.setHeader('content-type','application/json;charset=utf-8')res.end(JSON.stringify(result))})}else{res.setHeader('content-type','application/json;charset=utf-8')res.end('资源不存在')}
})// 04.监听某个端口
server.listen(3333,()=>{console.log('服务启动成功')})
11.案例-浏览时钟
/*** 目标：编写 web 服务，监听请求的是 /index.html 路径的时候，返回 dist/index.html 时钟案例页面内容* 步骤：* 1. 基于 http 模块，创建 Web 服务* 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方* 3. 其他路径，暂时返回不存在提示* 4. 运行 Web 服务，用浏览器发起请求*/
const http = require('http')
const fs = require('fs')
const path = require('path')
// 创建web服务
const server = http.createServer()// 发请求监听请求，返回响应结果
server.on('request',(rep,res)=>{if(rep.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{res.setHeader('content-type','text/html;charset=utf-8')res.end('访问的资源不存在')}
})//
server.listen(3333,()=>{console.log('服务启动成功')
})
