10-Node.js入门

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 需要把这个软件安装到电脑,下载安装程序默认下一步安装即可

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

    node -v
    
  6. 需求:新建 index.js 文件,编写打印代码和 for 循环打印 3 个 6

    /*** 目标:编写 js 代码,用 node 命令执行* 终端作用:敲击命令,调用对应程序执行* 终端打开:目标文件->右键->在集成终端中打开* 命令:node xxx.js (注意路径)*/
    console.log('Hello, World')
    for (let i = 0; i < 3; i++) {console.log(6)
    }
    
  7. Node.js 执行目标 JS 文件,需要使用 node xxx.js 命令来执行(我们可以借助 VSCode 集成终端使用,好处:可以快速切换到目标 JS 文件所在终端目录,利用相对路径找到要执行的目标 JS 文件

    在这里插入图片描述

02.fs模块-读写文件

目标

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

讲解

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

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

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

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

      const fs = require('fs')
      
    • 写入文件内容语法:

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

      fs.readFile('文件路径', (err, data) => {// 读取后的回调函数// data 是文件内容的 Buffer 数据流
      })
      
  4. 需求:向 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 数据流转成字符串类型
    })
    

03.path模块-路径处理

目标

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

讲解

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

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

  2. 新建 03 文件夹编写待执行的 JS 代码,访问外层相对路径下的文件,然后在最外层终端路径来执行目标文件,造成问题

    在这里插入图片描述

    在这里插入图片描述

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

  4. 解决方案:使用模块内置变量 __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())
    })
    
  5. 再次执行查看问题就被修复了!以后在 Node.js 要执行的 JS 代码中访问其他文件的路径,都建议使用绝度路径

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('压缩成功')})
    })
    

05.案例-压缩前端JS

目标

体验前端工程化,压缩,转译,整合代码

讲解

  1. 需求:把准备好的 JS 文件代码的回车符,换行符,打印语句去掉,并插入到之前 html 内容之后

  2. 步骤:

    1. 读取 js 文件内容
    2. 正则表达式替换回车符,换行符,打印语句为空字符串
    3. 拼接 html 代码和 js 代码,写入到新的 html 文件中
  3. 代码如下:

    /*** 目标二:压缩 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')
    fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {const htmlStr = data.toString()const resultStr = htmlStr.replace(/[\r\n]/g, '')// 2.1 读取 public/index.js 内容fs.readFile(path.join(__dirname, 'public', 'index.js'), (err, data) => {const jsStr = data.toString()// 2.2 使用正则替换内容字符串里的,回车符\r 换行符\n 打印语句console.log('xxx');const jsResultStr = jsStr.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')const result = `<script>${jsResultStr}</script>`console.log(result)// 2.3 确认后,拼接 html 内容写入到 dist/index.html 内fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr + result, err => {if (err) console.log(err)else console.log('压缩成功')})})})
    

06.认识URL中的端口号

目标

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

讲解

  1. URL 是统一资源定位符,简称网址,用于访问网络上的资源
  2. 端口号的作用:标记服务器里对应的服务程序,值为(0-65535 之间的任意整数)
  3. 注意:http 协议,默认访问的是 80 端口
  4. Web服务:一个程序,用于提供网上信息浏览功能
  5. 注意:0-1023 和一些特定的端口号被占用,我们自己编写服务程序请避开使用

07.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 服务* Web服务:一个程序,用于提供网上信息浏览服务* 步骤:*  1. 引入 http 模块,创建 Web 服务对象*  2. 监听 request 事件,对本次请求,做一些响应处理*  3. 启动 Web 服务监听对应端口号*  4. 运行本服务在终端,用浏览器访问 http://localhost:3000/ 发起请求(localhost 是本机域名)* 注意:终端里启动了服务,如果想要终止按 ctrl c 停止即可*/
    // 1. 引入 http 模块,创建 Web 服务对象
    const http = require('http')
    const server = http.createServer()
    // 2. 监听 request 事件,对本次请求,做一些响应处理
    server.on('request', (req, res) => {res.end('hello, world') // 一次请求只能对应一次响应
    })
    // 3. 启动 Web 服务监听对应端口号
    server.listen(3000, () => {console.log('Web 服务启动了')
    })
    

08.Web服务-支持中文字符

目标

让 Web 服务,返回中文字符,浏览器正确解析加载

讲解

  1. 需求:让 Web 服务返回中文字符,浏览器能正确加载解析

  2. 步骤:给 Web 服务程序添加响应头,设置内容类型和正确的编码格式,重启 Web 服务测试访问即可

    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    
  3. 编码:编码是信息从一种形式或格式转换为另一种形式的过程,指的把文字在计算机里的二进制数据,用什么形式展示出来

  4. utf-8编码:是一种关系映射表,也叫 utf-8 编码表,可以把中文,英文等等很多字符准确的展示出来

09.案例-省份列表接口

目标

基于 Web 服务,编写代码,把省份列表数据响应给请求方

讲解

  1. 需求:基于 Web 服务,开发提供省份列表数据的接口,了解下后端的代码工作过程

    在这里插入图片描述

  2. 步骤:

    1. 基于 http 模块,创建 Web 服务
    2. 使用 req.url 获取请求资源路径,并读取 province.json 理论省份数据返回给请求方
    3. 其他路径,暂时返回不存在的提示
    4. 运行 Web 服务,用浏览器发起请求测试,看是否可以获取到省份列表数据
  3. 代码如下:

    /*** 目标:基于 Web 服务,开发-省份列表数据接口* 步骤:*  1. 创建 Web 服务*  2. 使用 req.url 获取请求的资源路径,读取 json 文件数据返回*  3. 其他请求的路径,暂时返回不存在的提示*  4. 运行 Web 服务,用浏览器请求地址查看效果*/
    const fs = require('fs')
    const path = require('path')
    // 1. 创建 Web 服务
    const http = require('http')
    const server = http.createServer()
    server.on('request', (req, res) => {// 2. 使用 req.url 获取请求的资源路径,读取 json 文件数据返回if (req.url === '/api/province') {fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {res.setHeader('Content-Type', 'application/json;charset=utf-8')res.end(data.toString())})} else {// 3. 其他请求的路径,暂时返回不存在的提示res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end('你要访问的资源路径不存在')}
    })
    server.listen(3000, () => {console.log('Web 服务启动了')
    })

10.案例-城市列表接口

目标

体验城市列表接口开发效果,以及查询参数如何传递给后端,后端是如何找到对应的数据

讲解

  1. 需求:基于刚刚的 Web 服务,开发提供城市列表数据的接口,了解下后端代码的工作过程

    在这里插入图片描述

  2. 步骤:

    1. 判断 req.url 资源路径+查询字符串,路径前缀匹配 /api/city
    2. 借助 querystring 模块的方法,格式化查询字符串
    3. 读取 city.json 城市数据,匹配省份名字下属城市列表
    4. 返回城市列表,启动 Web 服务测试
  3. 代码如下:

    /*** 目标:基于 Web 服务,开发-城市列表数据接口* 步骤:*  1. 判断 req.url 资源路径+查询字符串,路径前缀匹配/api/city*  2. 借助 querystring 模块的方法,格式化查询参数字符串*  3. 读取 city.json 城市数据,匹配省份名字下属城市列表*  4. 返回城市列表,启动 Web 服务测试*/
    const qs = require('querystring')
    const fs = require('fs')
    const path = require('path')
    const http = require('http')
    const server = http.createServer()
    server.on('request', (req, res) => {// 省份列表接口if (req.url === '/api/province') {fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {res.setHeader('Content-Type', 'application/json;charset=utf-8')res.end(data.toString())})// 1. 判断 req.url 资源路径+查询字符串,路径前缀匹配/api/city} else if (req.url.startsWith('/api/city')) {// 城市列表接口// 2. 借助 querystring 模块的方法,格式化查询参数字符串// req.url: '/api/city?pname=辽宁省'// 以?分隔符分割,拿到'pname=辽宁省'查询参数字符串const str = req.url.split('?')[1]// 把查询参数字符串 转成 JS 对象结构const query = qs.parse(str)// 获取前端发来的省份名字const pname = query.pname// 3. 读取 city.json 城市数据,匹配省份名字下属城市列表fs.readFile(path.join(__dirname, 'data/city.json'), (err, data) => {// 把 JSON 文件内对象格式字符串,转成对象结构const obj = JSON.parse(data.toString())// 省份名字作为 key,去obj对象里取到对应城市列表 value 值const cityList = obj[pname]// 4. 返回城市列表,启动 Web 服务测试// 响应的是 JSON 字符串内容res.setHeader('Content-Type', 'application/json;charset=utf-8')res.end(JSON.stringify(cityList))})} else {res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end('你要访问的资源路径不存在')}
    })
    server.listen(3000, () => {console.log('Web 服务启动了')
    })

11.案例-浏览时钟

目标

体验 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 服务启动了')
    })
    

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

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

相关文章

虚拟环境搭建、后台项目创建及目录调整、封装logger、封装全局异常、封装Response、后台数据库创建

1 虚拟环境搭建 #1 虚拟环境作用多个项目&#xff0c;自己有自己的环境&#xff0c;装的模块属于自己的# 2 使用pycharm创建-一般放在项目路径下&#xff1a;venv文件夹-lib文件夹---》site-package--》虚拟环境装的模块&#xff0c;都会放在这里-scripts--》python&#xff0…

Arcgis日常天坑问题(1)——将Revit模型转为slpk数据卡住不前

这段时间碰到这么一个问题&#xff0c;revit模型在arcgis pro里导出slpk的时候&#xff0c;卡在98%一直不动&#xff0c;大约有两个小时。 首先想到的是revit模型过大&#xff0c;接近300M。然后各种减小模型测试&#xff0c;还是一样的问题&#xff0c;大概花了两天的时间&am…

如何选择合适的智能工单管理系统?智能工单系统有什么优势?

在当今社会&#xff0c;单位的运营和管理面临着越来越多的挑战。其中&#xff0c;设备的维护和保养是单位日常运营中的重要环节。然而&#xff0c;传统的工单管理方式存在着诸多问题&#xff0c;如报修效率低下、人工成本高昂、维修品质参差不齐等。为了解决这些问题&#xff0…

自动驾驶传感器技术

自动驾驶传感器技术是自动驾驶系统的关键组成部分&#xff0c;它使车辆能够感知并理解周围环境。本文将深入探讨自动驾驶传感器技术&#xff0c;包括常见类型、工作原理以及它们在自动驾驶中的作用。 1. 摄像头 摄像头的工作原理 摄像头是基于光学原理的传感器&#xff0c;其…

产品经理需要掌握哪些产品专业知识?

作为产品经理&#xff0c;最重要的是洞察客户的需求、理解客户的需求、掌握客户的需求&#xff0c;所以&#xff0c;第一件事情就是要有清晰的战略方向&#xff0c;我们到底梦想是什么&#xff1f;要做什么&#xff1f;能做什么&#xff1f;在哪儿做&#xff1f;谁负责去做&…

Stm32_标准库_7_光敏传感器

AO端口&#xff1a;通俗的讲大概是根据环境亮度的不同导致电阻的阻值不同&#xff0c;最后AO口输出的模拟量也不同&#xff0c;这个端口是用来测量环境光照的具体强度 DO端口&#xff1a;光敏电阻默认设置了一个阈值&#xff0c;当光照强度高于这个阈值本端口输出低电平&#…

IDEA的database工具以及对比两个数据库之间的差异(比DBVisualizer和DBeaver方便)

背景 其实IDEA里有个非常好用的database工具&#xff0c;用来连数据库&#xff0c;能连的数据非常多&#xff0c;最重要的是还带有对比数据库差异的工具。 唯一有点不好就是这个是 intellij idea的ultimate edition版本才有&#xff0c;对于社区版本&#xff08;community ed…

Linux系统及Docker安装RabbitMq

目录 一、linux系统安装 1、上传文件 2、在线安装依赖环境 3、安装Erlang 4、安装RabbitMQ 5、开启管理界面及配置 6、启动 7、删除mq 二、docker安装 1、上传mq.tar包或使用命令拉取镜像 2、启动并运行 3、访问mq 一、linux系统安装 1、上传文件 2、在线安装依赖环…

数据结构—快速排序(续)

引言&#xff1a;在上一篇中我们详细介绍了快速排序和改进&#xff0c;并给出了其中的一种实现方式-挖坑法 但其实快速排序有多种实现方式&#xff0c;这篇文章再来介绍其中的另外两种-左右指针法和前后指针法。有了上一篇挖坑法的启示&#xff0c;下面的两种实现会容易许多。 …

oracle linux8.8上安装oracle 19c集群

1、操作系统版本告警 处理办法&#xff1a;export CV_ASSUME_DISTIDRHEL7.6 2、ssh互信故障 查看ssh版本 [rootdb1 ~]# ssh -V OpenSSH_8.0p1, OpenSSL 1.1.1k FIPS 25 Mar 2021 处理办法-2个节点都需要操作 安装前配置 # mv /usr/bin/scp /usr/bin/scp.orig # echo "…

Java中的锁与锁优化技术

文章目录 自旋锁与自适应自旋锁消除锁粗化轻量级锁偏向锁重量级锁 自旋锁与自适应自旋 自旋锁是一种锁的实现机制&#xff0c;其核心思想是当一个线程尝试获取锁时&#xff0c;如果锁已经被其他线程持有&#xff0c;那么这个线程会在一个循环中不断地检查锁是否被释放&#xf…

Django使用SMTP发送邮件教程

CONTENTS 1. SMTP介绍2. 申请邮箱授权码3. Django发送邮件 1. SMTP介绍 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议&#xff0c;它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。SMTP 协议属于 TCP/I…

【docker】dockerfile构建镜像

一、Dockerfile概念 Dockerfile 是一个文本文件&#xff0c;文件中包含了一条条的指令&#xff08;instruction&#xff09;&#xff0c;用于构建镜像。每一条指定构建一层镜像&#xff0c;因此每一条指令的内容&#xff0c;就是描述该层镜像应当如何构建。 1、dockerfile是 自…

HTTP的基本格式

HTTP/HTTPS HTTPhttp的协议格式 HTTP 应用层,一方面是需要自定义协议,一方面也会用到一些现成的协议. HTTP协议,就是最常用到的应用层协议. 使用浏览器,打开网站,使用手机app,加载数据,这些过程大概率都是HTTP来支持的 HTTP是一个超文本传输协议, 文本>字符串 超文本>除…

机器学习:决策树

决策树 决策树是一种基于树形结构的模型&#xff0c;决策树从根节点开始&#xff0c;一步步走到叶子节点&#xff08;决策&#xff09;&#xff0c;所有的数据最终都会落到叶子节点&#xff0c;既可以做分类也可以做回归。 特征选择 根节点的选择该用哪一个特征呢&#xff…

为什么你应该开始学习量子机器学习

一、介绍 你好&#xff01;这里介绍全新知识--量子计算。在这里&#xff0c;我打算撰写和分享有关量子机器学习&#xff08;QML&#xff09;的文章。 我第一次听说量子计算是在2015年&#xff0c;当时我正在分析我的博士论文的可能性&#xff0c;我的前老板和导师告诉我研究这个…

Http常见问题

说说 HTTP 常用的状态码及其含义&#xff1f; HTTP 状态码首先应该知道个大概的分类&#xff1a; 1XX&#xff1a;信息性状态码2XX&#xff1a;成功状态码3XX&#xff1a;重定向状态码4XX&#xff1a;客户端错误状态码5XX&#xff1a;服务端错误状态码 301&#xff1a;永久性…

matplotlib制图进阶版

需求&#xff1a;两个产品销量的可视化折线图 1、使用pandas读取数据 2、生成销售数量的折线图

深入了解快速排序:原理、性能分析与 Java 实现

快速排序&#xff08;Quick Sort&#xff09;是一种经典的、高效的排序算法&#xff0c;被广泛应用于计算机科学和软件开发领域。本文将深入探讨快速排序的工作原理、步骤以及其在不同情况下的性能表现。 什么是快速排序&#xff1f; 快速排序是一种基于分治策略的排序算法&am…

vue2与vue3 v-model的区别

目录 Vue 2中的v-model 默认使用 自定义使用 修饰符.sync (Vue2) Vue3.x 使用 v-model vue 3 的v-model使用原理 多个 v-model 使用 总结 Vue 2中的v-model 在Vue 2中&#xff0c;v-model是一个用于在子组件和父组件之间双向绑定数据的指令。当在子组件中使用v-mode…