01_Node.js入门 (黑马)

news2025/1/9 17:16:33

01_Node.js入门

知识点自测

  1. 从 index.js 出发，访问到 student/data.json 的相对路径如何写?

    A：../public/teacher/data.json

    B：./public/student/data.json

    C：../student/data.json

    <details><summary>答案</summary><ul><li>A选项正确</li></ul></details>

  1. 如下代码运行结果是多少?

    const str = `我们都是好人，好人就是我`
const result = str.replace(/好/g, '')

    A：我们都是人，好人就是我

    B：我们都是人，人就是我

    <details><summary>答案</summary><ul><li>B选项正确</li></ul></details>

  1. 以下哪个正则表达式，能匹配字符串中的小括号？

    A：/(/

    B：/\(/

    <details><summary>答案</summary><ul><li>B选项正确，因为在正则表达式里直接写小括号，相当于分组功能，而不是匹配字符串小括号里，可以加一个斜杠代表转义，转换它去匹配小括号字符串而不再是分组</li></ul></details>

  1. 如下代码返回的结果是什么？

    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 文件内代码

讲解

  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 检查是否安装成功

    node -v

  1. 需求：新建 index.js 文件，编写打印代码和 for 循环打印 3 个 6

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

  1. Node.js 执行目标 JS 文件，需要使用 node xxx.js 命令来执行（我们可以借助 VSCode 集成终端使用，好处：可以快速切换到目标 JS 文件所在终端目录，利用相对路径找到要执行的目标 JS 文件

小结

  1. Node.js 有什么用？

    <details><summary>答案</summary><ul><li>编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，提高开发效率</li></ul></details>

  2. Node.js 为何能执行 JS 代码？

    <details><summary>答案</summary><ul><li>基于 Chrome 的 V8 引擎封装</li></ul></details>

  3. Node.js 与浏览器环境的 JS 最大区别？

    <details><summary>答案</summary><ul><li>Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法</li></ul></details>

  1. Node.js 如何执行代码？

    <details><summary>答案</summary><ul><li>在 VSCode 终端中输入：node xxx.js 回车即可执行（注意路径）</li></ul></details>

02.fs模块-读写文件

目标

了解模块概念，使用 fs 模块封装的方法读写文件内容

讲解

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

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

  3. fs 模块使用语法如下：

    • 加载 fs 模块，得到 fs 对象

      const fs = require('fs')

    • 写入文件内容语法：

      fs.writeFile('文件路径', '写入内容', err => {
  // 写入后的回调函数
})

    • 读取文件内容的语法：

      fs.readFile('文件路径', (err, data) => {
  // 读取后的回调函数
  // data 是文件内容的 Buffer 数据流
})

  1. 需求：向 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 数据流转成字符串类型
})

小结

  1. 什么是模块？

    <details><summary>答案</summary><ul><li>类似插件，封装了方法和属性</li></ul></details>

  1. fs 模块的作用？

    <details><summary>答案</summary><ul><li>读写本机文件内容</li></ul></details>

03.path模块-路径处理

目标

使用 path 模块来得到绝对路径

讲解

  1. 为什么在 Node.js 待执行的 JS 代码中要用绝对路径：

    Node.js 执行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们认为的从代码本身出发，会遇到问题，所以在 Node.js 要执行的代码中，访问其他文件，建议使用绝对路径

  2. 新建 03 文件夹编写待执行的 JS 代码，访问外层相对路径下的文件，<span style="color: red;">然后在最外层终端路径来执行目标文件，造成问题</span>

  1. 问题原因：就是从代码文件夹出发，使用../text.txt解析路径，找不到目标文件，报错了！

  2. 解决方案：使用模块内置变量 __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())
})

  1. 再次执行查看问题就被修复了！以后在 Node.js 要执行的 JS 代码中访问其他文件的路径，都建议使用绝度路径

小结

  1. path.join() 方法有什么用？

    <details><summary>答案</summary><ul><li>按照所在本机系统的分隔符作为定界符来链接你传入的路径</li></ul></details>

  1. __dirname 模块内置变量的值是多少？

    <details><summary>答案</summary><ul><li>动态获取当前文件所在文件夹的绝对路径</li></ul></details>

04.案例-压缩前端html

目标

压缩前端代码，体验前端工程化的例子

讲解

  1. 前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了提高前端开发项目的效率

  2. 需求：把准备好的 html 文件里的回车符（\r）和换行符（\n）去掉进行压缩，写入到新 html 中

  3. 步骤：

    1. 读取源 html 文件内容

    2. 正则替换字符串

    3. 写入到新的 html 文件中，并运行查看是否能正常打开网页

  4. 代码如下：

    /**
 * 目标一：压缩 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('压缩成功')
  })
})

小结

  1. 前端工程化的理解？

    <details><summary>答案</summary><ul><li>对前端代码进行优化，集成各种提高前端开发效率的工具等</li></ul></details>

05.认识URL中的端口号

目标

认识 URL 中端口号的作用，以及 Web 服务的作用

讲解

  1. URL 是统一资源定位符，简称网址，用于访问网络上的资源

  2. 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）

  3. 注意：http 协议，默认访问的是 80 端口

  4. Web服务：一个程序，用于提供网上信息浏览功能

  5. 注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用

小结

  1. 端口号的作用？

    <details><summary>答案</summary><ul><li>标记区分服务器里不同的服务程序</li></ul></details>

  2. 什么是 Web 服务？

    <details><summary>答案</summary><ul><li>提供网上信息浏览的服务的一个程序</li></ul></details>

06.http模块-创建Web服务

目标

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

讲解

  1. 需求：引入 http 模块，使用相关语法，创建 Web 服务程序，响应返回给请求方一句提示 ‘hello，world’

  2. 步骤：

    1. 引入 http 模块，创建 Web 服务对象

    2. 监听 request 请求事件，对本次请求，做一些响应处理

    3. 启动 Web 服务监听对应端口号

    4. 运行本服务在终端进程中，用浏览器发起请求

  3. 注意：本机的域名叫做 localhost

  4. 代码如下：

    /**
 * 目标：基于 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 服务启动成功了')
})

小结

  1. 如何访问本机里运行的 Web 服务？

    <details><summary>答案</summary><ul><li>http://localhost:Web服务的端口号/资源路径</li></ul></details>

07.案例-浏览时钟

目标

体验 Web 服务除了接口数据以外，还能返回网页资源等

讲解

  1. 需求：基于 Web 服务，开发提供网页资源的功能，了解下后端的代码工作过程

  2. 步骤：

    1. 基于 http 模块，创建 Web 服务

    2. 使用 req.url 获取请求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给请求方

    3. 其他路径，暂时返回不存在的提示

    4. 运行 Web 服务，用浏览器发起请求

  3. 代码如下：

    /**
 * 目标：编写 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 服务启动了')
})

小结

  1. Web 服务程序都有什么功能？

    <details><summary>答案</summary><ul><li>提供数据和网页资源等等功能，其他它的功能远不止于此</li></ul></details>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2257215.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快速构建NLP理论知识体系

快速构建NLP理论知识体系

NLP理论知识体系 一句话解释NLPNLP模型及原理简述1、Rag 一句话解释NLP 如果我们要实现机器翻译、情感分析、问答系统、文本摘要、聊天机器人、构造智能化的辅助文件填写模板&#xff0c;NLP可以通过现成的模型对输入的语音、文字、图片进行处理&#xff08;分词、标词性、去停…
阅读更多...
Python：import语句的详细解析（绝对路径导入和相对路径导入）

Python：import语句的详细解析（绝对路径导入和相对路径导入）

相关阅读 Pythonhttps://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 import语句是Python中一个很重要的机制&#xff0c;允许在一个文件中访问另一个文件的函数、类、变量等&#xff0c;本文就将进行详细介绍。 在具体谈论import语句前&a…
阅读更多...
CUDA 计时功能，记录GPU程序/函数耗时，cudaEventCreate，cudaEventRecord，cudaEventElapsedTime

CUDA 计时功能，记录GPU程序/函数耗时，cudaEventCreate，cudaEventRecord，cudaEventElapsedTime

为了测试GPU函数的耗时&#xff0c;可以使用 CUDA 提供的计时功能&#xff1a;cudaEventCreate, cudaEventRecord, 和 cudaEventElapsedTime。这些函数可以帮助你测量某个 CUDA 操作&#xff08;如设置设备&#xff09;所花费的时间。 一、记录耗时案例 以下是一个示例程序&a…
阅读更多...
数字图像处理（15）：图像平移

数字图像处理（15）：图像平移

&#xff08;1&#xff09;图像平移的基本原理&#xff1a;计算每个像素点的移动向量&#xff0c;并将这些像素按照指定的方向和距离进行移动。 &#xff08;2&#xff09;平移向量包括水平和垂直分量&#xff0c;可以表示为&#xff08;dx&#xff0c;dy&#xff09;&#xff…
阅读更多...
Hyper-V安装Win11虚拟机并设置vGPU显卡直通

Hyper-V安装Win11虚拟机并设置vGPU显卡直通

一、为什么我使用Hyper-V虚拟机 我的宿主机是Win11，想装一个Win10或Win11虚拟机。但是我用VMware安装Win10或Win11后，随机地蓝屏，非常烦人，估计是和宿主机的某些设置有关，或者宿主机电脑硬件比较新（我电脑装Win10就会蓝屏，Win11就不会），某些特性不支持。 所以我就安…
阅读更多...
Qt Xlsx安装教程

Qt Xlsx安装教程

Qt Xlsx安装教程 安装perl 如果没有安装perl&#xff0c;请参考perl Window安装教程 下载QtXlsxWriter源码 下载地址 ming32-make编译32 lib库 C:\Qt\Qt5.12.12\5.12.12\mingw73_32>d: D:\>cd D:\Code\QtXlsxWriter-master\QtXlsxWriter-master D:\Code\QtXlsxWrit…
阅读更多...
C# RSA加密和解密，RSA生成私钥和公钥

C# RSA加密和解密，RSA生成私钥和公钥

C# RSA加密和解密&#xff0c;RSA生成私钥和公钥&#xff08;使用XML格式秘钥&#xff09; 目录 前言生成xml格式的公钥和私钥 PrivateKeyPublicKey测试加密、解密 方案1&#xff1a;RSA公钥加密&#xff0c;RSA私钥解密方案2&#xff1a;RSA私钥加密&#xff0c;RSA私钥解密…
阅读更多...
【Rive】Android与Rive交互

【Rive】Android与Rive交互

1 Android与Rive交互的常用接口 1.1 RiveAnimationView参数 <app.rive.runtime.kotlin.RiveAnimationViewandroid:id"id/rive_view"android:layout_width"match_parent"android:layout_height"match_parent"android:adjustViewBounds"…
阅读更多...
捷米特 EtherNet/IP 总线协议网关的具体内容介绍

捷米特 EtherNet/IP 总线协议网关的具体内容介绍

关于EtherNET/IP的基本介绍 EtherNet/IP 中的 “Ethernet” 指以太网&#xff0c;是一种常见的局域网技术&#xff0c;用于在有限区域内实现多台设备之间的数据传输&#xff1b;“IP” 在此处指工业协议&#xff08;Industrial Protocol&#xff09;&#xff0c;而不是通常所说…
阅读更多...
Python 读取 Excel 表格并导出为 DBF 文件

Python 读取 Excel 表格并导出为 DBF 文件

以下是将上述代码封装为函数的版本。函数接收 input_excel_path、sheet_name 和 output_dbf_path 作为参数&#xff0c;按照需求读取 Excel 表格并导出为 DBF 文件。 封装函数代码 import pandas as pd import dbfdef excel_to_dbf(input_excel_path, sheet_name, output_dbf_…
阅读更多...
使用 ASP.NET Core HttpLoggingMiddleware 记录 http 请求/响应

使用 ASP.NET Core HttpLoggingMiddleware 记录 http 请求/响应

我们发布了一个应用程序&#xff0c;该应用程序运行在一个相当隐蔽的 WAF 后面。他们向我们保证&#xff0c;他们的产品不会以任何方式干扰我们的应用程序。这是错误的。他们删除了我们几乎所有的“自定义”标头。为了“证明”这一点&#xff0c;我构建了一个中间件&#xff0c…
阅读更多...
EasyExcel改名为FastExce做了那些改变呢

EasyExcel改名为FastExce做了那些改变呢

回到&#xff1a;github原作者地址&#xff1a;https://github.com/CodePhiliaX/fastexcel 中文 |English | 什么是 FastExcel FastExcel 是由原 EasyExcel 作者创建的新项目。2023 年我已从阿里离职&#xff0c;近期阿里宣布停止更新 EasyExcel&#xff0c;作者他本人决定继…
阅读更多...
TCP/IP协议详解（小白）

TCP/IP协议详解（小白）

TCP/IP协议详解 TCP/IP协议包含了一系列的协议&#xff0c;也叫TCP/IP协议族&#xff08;TCP/IP Protocol Suite&#xff0c;或TCP/IP Protocols&#xff09;&#xff0c;简称TCP/IP。TCP/IP协议族提供了点对点的连结机制&#xff0c;并且将传输数据帧的封装、寻址、传输、路由…
阅读更多...
【工具】音频文件格式转换工具

【工具】音频文件格式转换工具

找开源资源、下载测试不同库的效果&#xff0c;然后找音频、下载音频、编写代码、测试转换、流程通畅。写一个工具花的时间越来越多了&#xff01;这个 5 天 这个工具是一个音频文件格式转换工具&#xff0c;支持对 mp3.aac.wav.caf.flac.ircam.mp2.mpeg.oga.opus.pcm.ra.spx.…
阅读更多...
Vue智慧商城项目

Vue智慧商城项目

创建项目 vue组件库 — vant-ui&#xff08;常用于移动端&#xff09; Vant 2 - 轻量、可靠的移动端组件库 安装vant npm i vantlatest-v2 -S 引入组件 按需导入和全部导入 全部导入 整个组件库的所有组件都导进来&#xff0c;缺点是增加了代码包体积 main.js import…
阅读更多...
探索CSS中的背景图片属性，让你的网页更加美观

探索CSS中的背景图片属性，让你的网页更加美观

导语&#xff1a;在网页设计中&#xff0c;背景图片的运用能够丰富页面视觉效果&#xff0c;提升用户体验。本文将详细介绍CSS中背景图片的相关属性&#xff0c;帮助大家更好地掌握这一技能。 一、背景图片基本属性 1、background-image 该属性用于设置元素的背景图片。语法如…
阅读更多...
C#实时监控指定文件夹中的动态，并将文件夹中生成的新图片显示在界面上（相机采图，并且从本地拿图）

C#实时监控指定文件夹中的动态，并将文件夹中生成的新图片显示在界面上（相机采图，并且从本地拿图）

结果展示 此类原理适用于文件夹中自动生成图片&#xff0c;并提取最新生成的图片将其显示&#xff0c; 如果你是相机采图将其保存到本地&#xff0c;可以用这中方法可视化&#xff0c;并将检测的结果和图片匹配 理论上任何文件都是可以监视并显示的&#xff0c;我这里只是做了…
阅读更多...
通过PS和Unity制作2D动画之一：创建形象

通过PS和Unity制作2D动画之一：创建形象

1、通过路径画出轮廓 使用路径的过程中&#xff0c;需要注意&#xff1a; 1&#xff09;如果使用形状工具作图&#xff0c;比如使用椭圆工具画正圆形&#xff0c;需要设置其属性为“路径”。 2&#xff09;使用路径选择工具&#xff0c;再按住Alt键点击某个路径&#xff0c;可…
阅读更多...
Spark实训

Spark实训

实训目的： 介绍本实训的基本内容，描述知识目标、，以及本实训的预期效果等。 1、知识目标 （1）了解spark概念、基础知识、spark处理的全周期，了解spark技术是新时代对人才的新要求。 （2）掌握Linux、hadoop、spark、hive集群环境的搭建、HDFS分布文件系统的基础知识与应用…
阅读更多...
PDF提取文本

PDF提取文本

1.环境配置 !pip install PyPDF2 pdfplumber PyPDF2 是用来处理 PDF 文件的库&#xff0c;主要功能包括PDF 文件读取、合并、拆分、旋转&#xff0c;可以从 PDF 中提取纯文本&#xff0c;尽管它的提取效果有限&#xff0c;特别是对于扫描版 PDF 文件。 pdfplumber 是比 PyPDF2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023