当前位置: 首页 > news >正文

Node.js 入门

目录

定义

什么是前端工程化?

Node.js 为何能执行 JS?

Node.js 安装

使用 Node.js

fs 模块 - 读写文件

path 模块 - 路径处理

案例 - 压缩前端 html

URL 中的端口号

常见的服务程序

http 模块-创建 Web 服务

浏览时钟(案例)

Node.js 模块化

什么是模块化?

CommonJS 标准

ECMAScript 标准 - 默认导出和导入

ECMAScript 标准 - 命名导出和导入

包的概念

npm - 软件包管理器

npm - 安装所有依赖

npm - 全局软件包 nodemon

Node.js 总结

Node.js 包:


定义

 作用:

使用 Node.js 编写服务器端程序

          编写数据接口,提供网页资源浏览功能等等  

          前端工程化:为后续学习 Vue 和 React 等框架做铺垫

什么是前端工程化?

前端工程化:开发项目直到上线,过程中集成的所有工具和技术

Node.js 是前端工程化的基础(因为 Node.js 可以主动读取前端代码内容)

Node.js 为何能执行 JS?

首先:浏览器能执行 JS 代码,依靠的是内核中的 V8 引擎(C++ 程序)

其次:Node.js 是基于 Chrome V8 引擎进行封装(运行环境)

区别:都支持 ECMAScript 标准语法,Node.js 有独立的 API

注意:Node.js 环境没有 DOM 和 BOM 等

Node.js 安装

要求:下载 node-v16.19.0.msi 安装程序(指定版本:兼容 vue-admin-template 模板)

安装过程:默认下一步即可

注释事项:

        安装在非中文路径下

        无需勾选自动安装其他配套软件

成功验证:

        打开 cmd 终端,输入 node -v  命令查看版本号

        如果有显示,则代表安装成功

使用 Node.js

需求:新建 JS 文件,并编写代码后,在 node 环境下执行

命令:在 VSCode 集成终端中,输入 node xxx.js,回车即可执行

1. Node.js 是什么?
Ø 基于 Chrome V8 引擎 封装, 是独立执行 JavaScript 代码的环境
2. Node.js 与浏览器环境的 JS 最大区别?
Ø Node.js 环境中 没有 BOM DOM
3. Node.js 有什么用?
Ø 编写后端程序:提供数据和网页资源等
Ø 前端工程化 :集成各种开发中使用的工具和技术
4. Node.js 如何执行代码?
Ø VSCode 终端中输入: node xxx.js 回车即可执行(注意路径)

fs 模块 - 读写文件

模块:类似插件,封装了方法/属性

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

语法:

1. 加载 fs 模块对象
2. 写入 文件内容
3. 读取 文件内容
const fs = require('fs')fs.writeFile('./test.txt', 'hello', (err) => {if (err) {console.log(err)}else {console.log('写入ok')}
})fs.readFile('./test.txt', (err, data) => {if (err) console.log(err)else {console.log(data)console.log(data.toString())// 把buffer数据流转成字符串}})

path 模块 - 路径处理

问题:Node.js 代码中,相对路径是根据终端所在路径来查找的,可能无法找到你想要的文件

建议:在 Node.js 代码中,写绝对路径

补充:__dirname 内置变量(获取当前模块目录-绝对路径)

自己理解:__dirname是当前js文件所在的文件夹,并且是绝对路径

windows D:\ 备课代码 \3-B 站课程 \03_Node.js Webpack \03-code\03
mac :       /Users/xxx/Desktop/ 备课代码 /3-B 站课程 /03_Node.js Webpack /03-code/03

注意:path.join() 会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起

语法:

1. 加载 path 模块
2. 使用 path.join 方法,拼接路径

const fs = require('fs')const path = require('path')
console.log(__dirname)fs.readFile(path.join(__dirname, '../test.txt'), (err, data) => {if (err) console.log(err)else {console.log(data.toString())// 把buffer数据流转成字符串}
})

案例 - 压缩前端 html

需求:把 回车符(\r)和换行符(\n)去掉后,写入到新 html 文件中

步骤:

1. 读取 html 文件内容
2. 正则 替换 字符串
3. 写入 到新的 html 文件中
const fs = require('fs')
const path = require('path')
fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {if (err) console.log(err)else {const htmlStr = data.toString()const resultStr = htmlStr.replace(/[\r\n]/g)console.log(resultStr)fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {if (err) console.log(err)else {console.log('okok')}})}})

URL 中的端口号

URL统一资源定位符,简称网址用于访问服务器里的资源

端口号:标记服务器里不同功能的服务程序

端口号范围:0-65535 之间的任意整数

注意:http 协议,默认访问 80 端口

常见的服务程序

Web 服务程序:用于提供网上信息浏览功能

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

http 模块-创建 Web 服务

需求:创建 Web 服务并响应内容给浏览器

步骤:

1. 加载 http 模块 ,创建 Web 服务对象
2. 监听 request 请求事件,设置响应头和响应体
3. 配置 端口号 启动 Web 服务
4. 浏览器请求 http:// localhost :3000 测试

localhost:固定代表本机的域名)

 

// 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 服务启动成功了')
})

浏览时钟(案例)

需求:基于 Web 服务,开发提供网页资源的功能

步骤:

1. 基于 http 模块,创建 Web 服务
2. 使用 req.url 获取请求 资源路径 ,判断并 读取 index.html 里字符串内容返回给请求方
3. 其他路径,暂时返回不存在的提示
4. 运行 Web 服务,用浏览器发起请求测试
const http = require('http')
const fs = require('fs')
const path = require('path')const server = http.createServer()
server.on('request', (req, res) => {if (req.url === '/index.html') {fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {if (err) {console.log(err)} else {res.setHeader('Contenr-Type', 'text/html;charset=utf-8')res.end(data.toString())}})} else {res.setHeader('Contenr-Type', 'text/html;charset=utf-8')res.end('err tyy')}})server.listen(8080, () => {console.log('ok')
})

Node.js 模块化

什么是模块化

概念:项目是由很多个模块文件组成的

好处:提高代码复用性,按需加载,独立作用域

使用:需要标准语法导出导入进行使用

CommonJS 标准

需求:定义 utils.js 模块,封装基地址和求数组总和的函数

使用:

1. 导出: module.exports = {}
2. 导入: require(' 模块名或路径 ')

模块名或路径:

        内置模块:直接写名字(例如:fs,pathhttp

自定义模块:写模块文件路径(例如: ./utils.js

1. Node.js 中什么是模块化?
Ø 每个 文件 都是独立的模块
2. 模块之间如何联系呢?
Ø 使用特定语法, 导出 导入 使用
3. CommonJS 标准规定如何导出和导入模块呢?
Ø 导出: module.exports = {}
Ø 导入: require(' 模块名或路径 ')
4. 模块名 / 路径如何选择?
Ø 内置模块,直接写 名字 。例如: fs path http
Ø 自定义模块,写模块文件 路径 。例如: ./utils.js

ECMAScript 标准 - 默认导出和导入

需求:封装并导出基地址和求数组元素和的函数

默认标准使用:

1. 导出: export default {}
2. 导入: import 变量名 from ' 模块名或路径 '

注意:Node.js 默认支持 CommonJS 标准语法

如需使用 ECMAScript 标准语法,在运行模块所在文件夹新建 package.json 文件,

并设置 { "type" : "module" }

ECMAScript 标准 - 命名导出和导入

需求:封装并导出基地址和求数组元素和的函数

命名标准使用:

1. 导出: export 修饰定义语句
2. 导入: import { 同名变量 } from ' 模块名或路径‘

如何选择:

按需加载,使用命名导出和导入

全部加载,使用默认导出和导入

1. Node.js 支持哪 2 种模块化标准?
Ø CommonJS 标准语法(默认)
Ø ECMAScript 标准语法
2. ECMAScript 标准, 命名 导出和导入的语法?
Ø 导出: export 修饰定义的语句
Ø 导入: import { 同名变量 } from ' 模块名或路径‘
3. ECMAScript 标准, 默认 导出和导入的语法?
Ø 导出: export default {}
Ø 导入: import 变量名 from ' 模块名或路径 '

包的概念

包:将模块,代码,其他资料聚合成一个文件夹

包分类:

项目包:主要用于 编写项目 和业务逻辑
软件包: 封装工具和方法 进行使用

要求:根目录中,必须有 package.json 文件(记录包的清单信息)

注意:导入软件包时,引入的默认是 index.js 模块文件 / main 属性指定的模块文件

需求:封装数组求和函数的模块,判断用户名和密码长度函数的模块,形成成软件包

1. 什么是包?
 将模块,代码,其他资料聚合成的 文件夹
  一个文件可以当做一个模块
2. 包分为哪 2 类呢?
Ø 项目包:编写项目代码的文件夹
Ø 软件包 :封装工具和方法供开发者使用
3. package.json 文件的作用?
Ø 记录 软件包的名字 ,作者, 入口 文件等信息
4. 导入一个包文件夹的时候,导入的是哪个文件?
Ø 默认 index.js 文件 ,或者 main 属性 指定的文件

npm - 软件包管理器

使用:

1. 初始化清单文件  npm init -y (得到 package.json 文件,有这个文件则略过此命令)
2. 下载软件包  npm i 软件包名称
3. 使用软件包

需求:使用 dayjs 软件包,来格式化日期时间

图解:

1. npm 软件包管理器作用?
Ø 下载 软件 以及管理版本
2. 初始化项目清单文件 package.json 命令?
Ø npm init -y
3. 下载软件包的命令?
Ø npm i 软件包名字
4. 下载的包会存放在哪里?
Ø 当前项目下的 node_modules 中,并记录在 package.json

npm - 安装所有依赖

问题:项目中不包含 node_modules,能否正常运行?

答案:不能,缺少依赖的本地软件包

原因:因为,自己用 npm 下载依赖比磁盘传递拷贝要快得多

解决:项目终端输入命令:npm i

下载 package.json 中记录的所有软件包

1. 当项目中只有 package.json 没有 node_modules 怎么办?
Ø 当前项目下,执行 npm i 安装所有依赖软件包
2. 为什么 node_modules 不进行传递?
Ø 因为用 npm 下载比磁盘传递要快

npm - 全局软件包 nodemon

软件包区别:

Ø 本地软件包: 当前项目 内使用,封装 属性和方法 ,存在于 node_modules
Ø 全局软件包: 本机 所有项目使用,封装 命令和工具 ,存在于系统设置的位置

nodemon 作用:替代 node 命令,检测代码更改,自动重启程序

使用:

1. 安装: npm i nodemon -g -g 代表安装到全局环境中)
2. 运行: nodemon    待执行的目标 js 文件

需求:启动准备好的项目,修改代码保存后,观察自动重启应用程序

Node.js 总结

Node.js 模块化:

概念:每个文件当做一个模块,独立作用域,按需加载

模块化:项目是由很多个模块文件组成的

使用:采用特定的标准语法导出和导入进行使用

CommonJS  标准:一般应用在 Node.js 项目环境中

ECMAScript 标准:一般应用在前端工程化项目中

Node.js 包:

概念:把模块文件,代码文件,其他资料聚合成一个文件夹

项目包:编写项目需求和业务逻辑的文件夹

软件包:封装工具和方法进行使用的文件夹(一般使用 npm 管理)

ü 本地软件包:作用在 当前 项目,一般封装的 属性 / 方法 ,供项目调用编写业务需求
ü 全局软件包:作用在 所有 项目,一般封装的 命令 / 工具 ,支撑项目运行

常用命令:

相关文章:

  • Unity热更方案HybridCLR+YooAsset,纯c#开发热更,保姆级教程,从零开始
  • 最快33天录用!一投就中的医学4区SCI,几乎不退稿~
  • 法国工程师IMT联盟 密码学及其应用 2023年期末考试补考题
  • 12个视觉艺术分类
  • c++ primer plus 第15章友,异常和其他
  • 宝塔安装rabbitMQ实战
  • MTK6769芯片性能参数_MT6769规格书_datasheet
  • 苹果Mac电脑能玩什么游戏 Mac怎么运行Windows游戏
  • AHK的对象和类学习心得
  • Java---Mybatis详解二
  • 对原生textarea加上:当前输入字数/最大输入字数
  • 如何在TikTok上获得更多观看量:12个流量秘诀
  • FFmpeg5.0源码阅读——格式检测
  • 67.WEB渗透测试-信息收集- WAF、框架组件识别(7)
  • Go语言中的时间与日期处理:time包详解
  • python3.6+scrapy+mysql 爬虫实战
  • 时间复杂度分析经典问题——最大子序列和
  • 【node学习】协程
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • ES2017异步函数现已正式可用
  • ESLint简单操作
  • HTML-表单
  • IP路由与转发
  • js学习笔记
  • JS学习笔记——闭包
  • leetcode46 Permutation 排列组合
  • spring boot 整合mybatis 无法输出sql的问题
  • Vue实战(四)登录/注册页的实现
  • win10下安装mysql5.7
  • WinRAR存在严重的安全漏洞影响5亿用户
  • 聊一聊前端的监控
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 使用权重正则化较少模型过拟合
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 小程序 setData 学问多
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • 阿里云API、SDK和CLI应用实践方案
  • 从如何停掉 Promise 链说起
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 浅谈sql中的in与not in,exists与not exists的区别
  • 数据可视化之下发图实践
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​TypeScript都不会用,也敢说会前端?
  • ​你们这样子,耽误我的工作进度怎么办?
  • #1015 : KMP算法
  • #NOIP 2014# day.2 T2 寻找道路
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (笔记)M1使用hombrew安装qemu
  • (六)激光线扫描-三维重建
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...