01_Node.js入门 (黑马)

01_Node.js入门

知识点自测

• 从 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 = `我们都是好人，好人就是我`
  2. const result = str.replace(/好/g, '')

  复制代码
  A：我们都是人，好人就是我
  B：我们都是人，人就是我
  <details><summary>答案</summary><ul><li>B选项正确</li></ul></details>
  

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

• 如下代码返回的结果是什么？
  
  1. const str = '/api/hello?a=10&b=20'
  2. 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 文件内代码

讲解

• 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 查抄是否安装成功
  
  1. node -v

  复制代码
  
  

• 需求：新建 index.js 文件，编写打印代码和 for 循环打印 3 个 6
  
  1. /**
  2. * 目标：编写 js 代码，用 node 命令执行
  3. * 终端作用：敲击命令，调用对应程序执行
  4. * 终端打开：目标文件->右键->在集成终端中打开
  5. * 命令：node xxx.js （注意路径）
  6. */
  7. console.log('Hello, World')
  8. for (let i = 0; i < 3; i++) {
  9.  console.log(6)
  10. }

  复制代码
  
  

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

小结

• Node.js 有什么用？
  <details><summary>答案</summary><ul><li>编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，进步开辟效率</li></ul></details>
  
• Node.js 为何能实行 JS 代码？
  <details><summary>答案</summary><ul><li>基于 Chrome 的 V8 引擎封装</li></ul></details>
  
• Node.js 与浏览器环境的 JS 最大区别？
  <details><summary>答案</summary><ul><li>Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法</li></ul></details>
  

• Node.js 如何实行代码？
  <details><summary>答案</summary><ul><li>在 VSCode 终端中输入：node xxx.js 回车即可实行（注意路径）</li></ul></details>
  

02.fs模块-读写文件

目的

相识模块概念，利用 fs 模块封装的方法读写文件内容

讲解

• 模块：雷同插件，封装了方法和属性供我们利用
  
• fs 模块：封装了与本机文件系统举行交互的，方法和属性
  
• fs 模块利用语法如下：
  
  
  
  • 加载 fs 模块，得到 fs 对象
    
    1. const fs = require('fs')

    复制代码
    
    
  • 写入文件内容语法：
    
    1. fs.writeFile('文件路径', '写入内容', err => {
    2.  // 写入后的回调函数
    3. })

    复制代码
    
    
  • 读取文件内容的语法：
    
    1. fs.readFile('文件路径', (err, data) => {
    2.  // 读取后的回调函数
    3.  // data 是文件内容的 Buffer 数据流
    4. })

    复制代码
    
    
  
  

• 需求：向 test.txt 文件写入内容并读取打印
  
  1. /**
  2. * 目标：使用 fs 模块，读写文件内容
  3. * 语法：
  4. * 1. 引入 fs 模块
  5. * 2. 调用 writeFile 写入内容
  6. * 3. 调用 readFile  读取内容
  7. */
  8. // 1. 引入 fs 模块
  9. const fs = require('fs')
  10. // 2. 调用 writeFile 写入内容
  11. // 注意：建议写入字符串内容，会覆盖目标文件所有内容
  12. fs.writeFile('./text.txt', '欢迎使用 fs 模块读写文件内容', err => {
  13.  if (err) console.log(err)
  14.  else console.log('写入成功')
  15. })
  16. // 3. 调用 readFile  读取内容
  17. fs.readFile('./text.txt', (err, data) => {
  18.  if (err) console.log(err)
  19.  else console.log(data.toString()) // 把 Buffer 数据流转成字符串类型
  20. })

  复制代码
  
  

小结

• 什么是模块？
  <details><summary>答案</summary><ul><li>雷同插件，封装了方法和属性</li></ul></details>
  

• fs 模块的作用？
  <details><summary>答案</summary><ul><li>读写本机文件内容</li></ul></details>
  

03.path模块-路径处置惩罚

目的

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

讲解

• 为什么在 Node.js 待实行的 JS 代码中要用绝对路径：
         Node.js 实行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们以为的从代码本身出发，会遇到问题，以是在 Node.js 要实行的代码中，访问其他文件，发起利用绝对路径
  
• 新建 03 文件夹编写待实行的 JS 代码，访问外层相对路径下的文件，<span style="color: red;">然后在最外层终端路径来实行目的文件，造成问题</span>
  
  
  
  
  

• 问题原因：就是从代码文件夹出发，利用../text.txt剖析路径，找不到目的文件，报错了！
  
• 解决方案：利用模块内置变量 __dirname配合 path.join() 来得到绝对路径利用
  
  1. const fs = require('fs')
  2. console.log(__dirname) // D:\备课代码\2_node_3天\Node_代码\Day01_Node.js入门\代码\03
  3. ​
  4. // 1. 加载 path 模块
  5. const path = require('path')
  6. // 2. 使用 path.join() 来拼接路径
  7. const pathStr = path.join(__dirname, '..', 'text.txt')
  8. console.log(pathStr)
  9. ​
  10. fs.readFile(pathStr, (err, data) => {
  11.  if (err) console.log(err)
  12.  else console.log(data.toString())
  13. })

  复制代码
  
  

• 再次实行检察问题就被修复了！以后在 Node.js 要实行的 JS 代码中访问其他文件的路径，都发起利用绝度路径
  

小结

• path.join() 方法有什么用？
  <details><summary>答案</summary><ul><li>按照所在本机系统的分隔符作为定界符来链接你传入的路径</li></ul></details>
  

• __dirname 模块内置变量的值是多少？
  <details><summary>答案</summary><ul><li>动态获取当前文件所在文件夹的绝对路径</li></ul></details>
  

04.案例-压缩前端html

目的

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

讲解

• 前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了进步前端开辟项目的效率
  
• 需求：把预备好的 html 文件里的回车符（\r）和换行符（\n）去掉举行压缩，写入到新 html 中
  
• 步骤：
  
  
  
  • 读取源 html 文件内容
    
  • 正则替换字符串
    
  • 写入到新的 html 文件中，并运行检察是否能正常打开网页
    
  
  
• 代码如下：
  
  1. /**
  2. * 目标一：压缩 html 里代码
  3. * 需求：把 public/index.html 里的，回车/换行符去掉，写入到 dist/index.html 中
  4. *  1.1 读取 public/index.html 内容
  5. *  1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
  6. *  1.3 确认后，写入到 dist/index.html 内
  7. */
  8. const fs = require('fs')
  9. const path = require('path')
  10. // 1.1 读取 public/index.html 内容
  11. fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
  12.  const htmlStr = data.toString()
  13.  // 1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
  14.  const resultStr = htmlStr.replace(/[\r\n]/g, '')
  15.  // 1.3 确认后，写入到 dist/index.html 内
  16.  fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => {
  17.    if (err) console.log(err)
  18.    else console.log('压缩成功')
  19.   })
  20. })

  复制代码
  
  

小结

• 前端工程化的理解？
  <details><summary>答案</summary><ul><li>对前端代码举行优化，集成各种进步前端开辟效率的工具等</li></ul></details>
  

05.认识URL中的端口号

目的

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

讲解

• URL 是统一资源定位符，简称网址，用于访问网络上的资源
  
• 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的恣意整数）
  
• 注意：http 协议，默认访问的是 80 端口
  
• Web服务：一个程序，用于提供网上信息浏览功能
  
• 注意：0-1023 和一些特定的端口号被占用，我们本身编写服务程序请避开利用
  

小结

• 端口号的作用？
  <details><summary>答案</summary><ul><li>标记区分服务器里差别的服务程序</li></ul></details>
  
• 什么是 Web 服务？
  <details><summary>答案</summary><ul><li>提供网上信息浏览的服务的一个程序</li></ul></details>
  

06.http模块-创建Web服务

目的

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

讲解

• 需求：引入 http 模块，利用相干语法，创建 Web 服务程序，响应返回给哀求方一句提示 ‘hello，world’
  
• 步骤：
  
  
  
  • 引入 http 模块，创建 Web 服务对象
    
  • 监听 request 哀求变乱，对本次哀求，做一些响应处置惩罚
    
  • 启动 Web 服务监听对应端口号
    
  • 运行本服务在终端进程中，用浏览器发起哀求
    
  
  
• 注意：本机的域名叫做 localhost
  
• 代码如下：
  
  1. /**
  2. * 目标：基于 http 模块创建 Web 服务程序
  3. *  1.1 加载 http 模块，创建 Web 服务对象
  4. *  1.2 监听 request 请求事件，设置响应头和响应体
  5. *  1.3 配置端口号并启动 Web 服务
  6. *  1.4 浏览器请求（http://localhost:3000）测试
  7. */
  8. // 1.1 加载 http 模块，创建 Web 服务对象
  9. const http = require('http')
  10. const server = http.createServer()
  11. // 1.2 监听 request 请求事件，设置响应头和响应体
  12. server.on('request', (req, res) => {
  13.  // 设置响应头-内容类型-普通文本以及中文编码格式
  14.  res.setHeader('Content-Type', 'text/plain;charset=utf-8')
  15.  // 设置响应体内容，结束本次请求与响应
  16.  res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
  17. })
  18. // 1.3 配置端口号并启动 Web 服务
  19. server.listen(3000, () => {
  20.  console.log('Web 服务启动成功了')
  21. })

  复制代码
  
  

小结

• 如何访问本机里运行的 Web 服务？
  <details><summary>答案</summary><ul><li>http://localhost:Web服务的端口号/资源路径</li></ul></details>
  

07.案例-浏览时钟

目的

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

讲解

• 需求：基于 Web 服务，开辟提供网页资源的功能，相识下后端的代码工作过程
  
  
  
  
• 步骤：
  
  
  
  • 基于 http 模块，创建 Web 服务
    
  • 利用 req.url 获取哀求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给哀求方
    
  • 其他路径，暂时返回不存在的提示
    
  • 运行 Web 服务，用浏览器发起哀求
    
  
  
• 代码如下：
  
  1. /**
  2. * 目标：编写 web 服务，监听请求的是 /index.html 路径的时候，返回 dist/index.html 时钟案例页面内容
  3. * 步骤：
  4. *  1. 基于 http 模块，创建 Web 服务
  5. *  2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  6. *  3. 其他路径，暂时返回不存在提示
  7. *  4. 运行 Web 服务，用浏览器发起请求
  8. */
  9. const fs = require('fs')
  10. const path = require('path')
  11. // 1. 基于 http 模块，创建 Web 服务
  12. const http = require('http')
  13. const server = http.createServer()
  14. server.on('request', (req, res) => {
  15.  // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  16.  if (req.url === '/index.html') {
  17.    fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
  18.      res.setHeader('Content-Type', 'text/html;charset=utf-8')
  19.      res.end(data.toString())
  20.    })
  21.   } else {
  22.    // 3. 其他路径，暂时返回不存在提示
  23.    res.setHeader('Content-Type', 'text/html;charset=utf-8')
  24.    res.end('你要访问的资源路径不存在')
  25.   }
  26. })
  27. server.listen(8080, () => {
  28.  console.log('Web 服务启动了')
  29. })

  复制代码
  
  

小结

• Web 服务程序都有什么功能？
  <details><summary>答案</summary><ul><li>提供数据和网页资源等等功能，其他它的功能远不止于此</li></ul></details>
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。