01_Node.js入门 (黑马)

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 换行符\nconst 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.mzph.cn/news/889056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024.12.5——攻防世界Training-WWW-Robots攻防世界baby_web

2024.12.5—攻防世界Training-WWW-Robots 知识点&#xff1a;robots协议 dirsearch工具 本题与第一道Robots协议十分类似&#xff0c;不做wp解析 大致步骤&#xff1a; step 1 打开靶机&#xff0c;发现是robots协议相关 step 2 用dirsearch进行扫描目录 step 3 url传参r…

电脑无法识别usb设备怎么办?电脑无法识别usb解决方法

usb设备是我们常解除的外部操作以及存储设备&#xff0c;它可以方便用户数据传输以及操作输入。但在使用过程中&#xff0c;大家基本都碰到过电脑无法识别usb设备这种情况。这种情况下&#xff0c;我们应该怎么办呢&#xff1f;下面将为你介绍几种可能的原因和解决方法&#xf…

【学习总结|DAY014】Java面向对象高级-继承、多态

一、继承&#xff08;Inheritance&#xff09; 1. 概述 继承是面向对象编程的一种特性&#xff0c;允许我们定义一个类&#xff08;称为子类或派生类&#xff09;以继承另一个类&#xff08;称为超类或基类&#xff09;的功能。 2. 语法格式 public class Zi extends Fu {/…

筑起厂区安全--叉车安全防护装置全解析

在繁忙的工业生产领域中&#xff0c;叉车作为搬运工&#xff0c;穿梭于仓储与生产线之间。然而&#xff0c;叉车的高效运作背后&#xff0c;也隐藏着诸多安全风险&#xff0c;尤其是在那些空间狭小、物流繁忙的环境中。为了降低这些潜在的危险&#xff0c;叉车安全防护装置便成…

MS SQL SERVER服务自动停止解决

报错原因 电脑异常重启&#xff0c;导致 MS SQL server 服务启动后自动停止&#xff0c;在【计算机管理】-【事件查看器】-【windows日志】中进行查看系统错误日志&#xff0c;在【应用程序】下发现可能的错误信息&#xff1a; 传递给数据库 ‘model’ 中的日志扫描操作的日志…

网络安全信息收集(总结)更新

目录 重点&#xff1a; 前言&#xff1a; 又学到了&#xff0c;就是我们什么时候要子域名收集&#xff0c;什么时候收集域名&#xff0c;重点应该放前面 思考&#xff1a; 信息收集分为哪几类&#xff0c;什么是主域名&#xff0c;为什么要收集主域名&#xff0c;为什么要收…

使用 Postman 上传二进制类型的图片到后端接口写法

我们有的时候会有需求&#xff0c;就是通过 postman 传递二进制图片到后端接口&#xff0c;如下图&#xff1a; 那我们的 Java 接口需要怎么写呢&#xff1f; Spring Boot 接收这些数据的方式需要使用 RequestBody 注解来处理原始的二进制数据&#xff08;byte[]&#xff09;。…

Java Web 7 请求响应(Postman)

前言&#xff08;SpringBoot程序请求响应流程&#xff09; 以上一章的程序为例&#xff0c;一个基于SpringBoot的方式开发一个web应用&#xff0c;浏览器发起请求 /hello 后 &#xff0c;给浏览器返回字符串 “Hello World ~”。 而我们在开发web程序时呢&#xff0c;定义了一…

pytorch多GPU训练教程

pytorch多GPU训练教程 文章目录 pytorch多GPU训练教程1. Torch 的两种并行化模型封装1.1 DataParallel1.2 DistributedDataParallel 2. 多GPU训练的三种架构组织方式2.2 数据不拆分&#xff0c;模型拆分&#xff08;Model Parallelism&#xff09;2.3 数据拆分&#xff0c;模型…

【opencv入门教程】9.视频加载

文章选自&#xff1a; 一、VideoCapture类 用于从视频文件、图像序列或摄像头捕获视频的类。函数&#xff1a;CV_WRAP VideoCapture();brief 默认构造函数CV_WRAP explicit VideoCapture(const String& filename, int apiPreference CAP_ANY);brief 使用 API 首选项打开…

海外的bug-hunters,不一样的403bypass

一种绕过403的新技术&#xff0c;跟大家分享一下。研究HTTP协议已经有一段时间了。发现HTTP协议的1.0版本可以绕过403。于是开始对lyncdiscover.microsoft.com域做FUZZ并且发现了几个403Forbidden的文件。 &#xff08;访问fsip.svc为403&#xff09; 在经过尝试后&#xff0…

阿里内部正式开源“Spring Cloud Alibaba (全彩小册)”

年轻的毕业生们满怀希望与忐忑&#xff0c;去寻找、竞争一个工作机会。已经在职的开发同学&#xff0c;也想通过社会招聘或者内推的时机争取到更好的待遇、更大的平台。 然而&#xff0c;面试人群众多&#xff0c;技术市场却相对冷淡&#xff0c;面试的同学们不得不面临着 1 个…

乘上 SpringBoot 东风,广场舞团掀起律动热潮

2 系统开发环境 2.1 Java技术 Java是由Sun公司推出的一门跨平台的面向对象的程序设计语言。因为Java 技术具有卓越的通用性、高效性、健壮的安全性和平台移植性的特点&#xff0c;而且Java是开源的&#xff0c;拥有全世界最大的开发者专业社群&#xff0c;所以Java的发展迅速。…

【PlantUML系列】状态图(六)

一、状态图的组成部分 状态&#xff1a;对象在其生命周期内可能处于的条件或情形&#xff0c;使用 state "State Name" as Statename 表示。初始状态&#xff1a;表示对象生命周期的开始&#xff0c;使用 [*] 表示。最终状态&#xff1a;表示对象生命周期的结束&…

创建 React Native 项目

创建 React Native 项目 npx react-nativelatest init YourProject切换依赖源 切换好源之后&#xff0c;你需要进入 android 目录&#xff0c;然后运行 gradlew build 命令。 Android 依赖安装是使用 gradlew 进行管理的。 $ cd android $ ./gradlew build --refresh-depend…

Linx下自动化之路:Redis安装包一键安装脚本实现无网极速部署并注册成服务

目录 简介 安装包下载 安装脚本 服务常用命令 简介 通过一键安装脚本实现 Redis 安装包的无网极速部署&#xff0c;并将其成功注册为系统服务&#xff0c;开机自启。 安装包下载 redis-7.0.8.tar.gzhttp://download.redis.io/releases/redis-7.0.8.tar.gz 安装脚本 修…

Meta Llama 3.3 70B:性能卓越且成本效益的新选择

Meta Llama 3.3 70B&#xff1a;性能卓越且成本效益的新选择 引言 在人工智能领域&#xff0c;大型语言模型一直是研究和应用的热点。Meta公司最近发布了其最新的Llama系列模型——Llama 3.3 70B&#xff0c;这是一个具有70亿参数的生成式AI模型&#xff0c;它在性能上与4050…

idea_maven详解

秒懂Maven maven简介maven安装和配置maven本地配置maven工程的GAVP创建maven工程项目结构说明项目构建说明 Maven依赖管理核心信息配置依赖管理配置依赖信息查询依赖范围设置依赖属性配置依赖下载失败错误解决Build构建配置依赖传递依赖冲突 maven工程继承继承作用应用场景继承…

Linux Ubuntu 安装配置RabbitMQ,springboot使用RabbitMQ

rabbit-Ubuntu 一篇文章学会RabbitMQ 在Ubuntu上查看RabbitMQ状态可以通过多种方式进行&#xff0c;包括使用命令行工具和Web管理界面。以下是一些常用的方法&#xff1a; 1-使用systemctl命令&#xff1a; sudo systemctl start rabbitmq-server sudo systemctl status ra…

LeetCode—189. 轮转数组(中等)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例1&#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1 步:[7,1,2,3,4,5,6] 向右轮转 2 步:[6,7,1,2,3,4,5] 向…