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\n
console.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-8
res.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] // 数组，不能直接返回数组，返回json
res.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('服务启动成功')
})
