Node.js day-01

燃先生._.2024-12-18 22:00

01.Node.js 讲解

什么是 Node.js，有什么用，为何能独立执行 JS 代码，演示安装和执行 JS 文件内代码

  1. Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码，因为这个特点，它可以用来编写服务器后端的应用程序

  2. Node.js 作用除了编写后端应用程序，也可以对前端代码进行压缩，转译，整合等等，提高前端开发和运行效率

  3. Node.js 基于Chrome V8 引擎封装，独立执行 JS 代码，但是语法和浏览器环境的 V8 有所不同，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法

  4. 想要得到 Node.js 需要把这个软件安装到电脑，在素材里有安装程序（window 和 mac 环境的）参考 PPT 默认下一步安装即可

  5. Node.js 没有图形化界面，需要使用 cmd 终端命令行（利用一些命令来操控电脑执行某些程序软件）输入，node -v 检查是否安装成功

javascript 复制代码 
/**
 * 目标：编写 js 代码，用 node 命令执行
 * 终端作用：敲击命令，调用对应程序执行
 * 终端打开：目标文件->右键->在集成终端中打开
 * 命令：node xxx.js （注意路径）
 */
for (let i = 0; i < 3; i++) {
    console.log(i)   
}

02.fs模块 读写文件

  1. 模块：类似插件，封装了方法和属性供我们使用

  2. fs 模块：封装了与本机文件系统进行交互的，方法和属性

javascript 复制代码 
/**
 * 目标：使用 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() 来得到绝对路径使用
javascript 复制代码 
/**
 * 目标：读取 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

javascript 复制代码 
/**
 * 目标一：压缩 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 中一起运行）

javascript 复制代码 
/**
 * 目标二：压缩 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 端口号

javascript 复制代码 
/**
 * 目标：了解端口号的作用
 * 端口号：用于区分服务器中的不同服务程序
 * 取值范围：0-65535
 * 注意：0-1023 和一些特定端口号是被占用的，我们自己编写服务程序请避开使用
 *  1. URL 是统一资源定位符，简称网址，用于访问网络上的资源
    2. 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）
    3. 注意：http 协议，默认访问的是 80 端口
    4. Web服务：一个程序，用于提供网上信息浏览功能
    5. 注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用 * 
 * 
 */

07.http模块-创建Web服务

javascript 复制代码 
/**
 * 目标：使用 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服务 - 支持中文字符

javascript 复制代码 
/**
 * 目标：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.案例 - 省份列表接口

javascript 复制代码 
/**
 * 目标：基于 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.案例 - 城市列表接口

javascript 复制代码 
/**
 * 目标：基于 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.案例-浏览时钟

javascript 复制代码 
/**
 * 目标：编写 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('服务启动成功')
})
相关推荐
振华OPPO1 小时前
VS Code使用NPM脚本启动Vue程序
前端·vue.js·vscode·npm·node.js·vue
燃先生._.4 小时前
Node.js day-03
node.js
GISer_Jing4 小时前
前端面试题目（Node.JS-Express框架）[一]
前端·面试·node.js·express
tester Jeffky6 小时前
深入理解NPM：Node.js的包管理器
javascript·npm·node.js
老大白菜7 小时前
AdminJS - 现代化的 Node.js 管理面板框架详解
node.js
Domain-zhuo8 小时前
Webpack中loader的作用/ loader是什么？
前端·javascript·vue.js·webpack·node.js·vue
장숙혜11 小时前
npm下载依赖相关命令
前端·npm·node.js
途中刂12 小时前
基于NodeJs+Express+MySQL 实现的个人博客项目
数据库·mysql·node.js·express
独孤求败Ace16 小时前
第19天：信息收集-Web应用&源码获取&闭源备份开发泄漏&WebPack打包&资源搜索&ICO定位
前端·webpack·node.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02HCIA-datacom数通题库和录播视频资料03玄机平台应急响应—webshell查杀04origin导出pdf曲线超出边框05量化方法怎么选？如何评估量化后的大模型LLM？06PyTorch机器学习实现液态神经网络07穿越数字奇境：探寻元宇宙中的科技奇迹08【凡人修仙传_01】散修厉飞羽是如何出师未捷身先死的！09Docker 夺命连环 15 问10校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站