前端学习笔记 | Node.js

news2024/12/26 11:06:23

一、Node.js入门

1、什么是Node.js

  • 定义：是跨平台JS运行环境（可以独立执行JS的环境）
  • 作用：
    • 编写数据接口，提供网页资源功能等等
    • 前端工程化：为后续学Vue和React等框架做铺垫

2、Node.js为何能执行JS？

3、如何执行Node.js代码?

在VSCode终端中输入：node xxx.js回车即可执行（注意路径）

二、 fs模块-读写文件

1、定义

类似插件，封装了与本机文件系统进行交互的方法/属性

2、语法

3、案例：读写文件

/**
 * 目标：基于 fs 模块读写文件内容
 *  1. 加载 fs 模块对象
 *  2. 写入文件内容
 *  3. 读取文件内容
 */
// 1. 加载 fs 模块对象
const fs = require('fs')
// 2. 写入文件内容
fs.writeFile('./test.txt', 'hello, Node.js', (err) => {
  if (err) console.log(err)
  else console.log('写入成功')
})
// 3. 读取文件内容
fs.readFile('./test.txt', (err, data) => {
  if (err) console.log(err)
  // data 是 buffer 16 进制数据流对象
  // .toString() 转换成字符串
  else console.log(data.toString())
})

 三、path模块-路径处理

 1、会出现的问题？

Node.js中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件。

2、处理方法

（1）使用内置变量_dirname，该变量的值是终端路径

（2）利用path.join()方法传入参数拼接的路径参数

3、案例：路径处理实例

/**
 * 目标：在 Node.js 环境的代码中，应使用绝对路径
 * 原因：代码的相对路径是以终端所在文件夹为起点，而不是 Vscode 资源管理器
 *  容易造成目标文件找不到的错误
 */
const fs = require('fs')
// 1. 引入 path 模块对象
const path = require('path')
// 2. 调用 path.join() 配合 __dirname 组成目标文件的绝对路径
console.log(__dirname)
fs.readFile(path.join(__dirname, '../test.txt'), (err, data) => {
  if (err) console.log(err)
  else console.log(data.toString())
})

四、压缩前端html

1、需求

把回车符和换行符去掉后重新写入到新html文件中

2、步骤

（1）读取源html文件内容

（2）正则替换字符串

（3）写入到新的html文件中

3、案例

/**
 * 目标1：压缩 html 代码
 * 需求：把回车符 \r，换行符 \n 去掉，写入到新 html 文件中
 *  1.1 读取源 html 文件内容
 *  1.2 正则替换字符串
 *  1.3 写入到新的 html 文件中
 */
// 1.1 读取源 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()
    // 1.2 正则替换字符串
    const resultStr = htmlStr.replace(/[\r\n]/g, '')
    console.log(resultStr)
    // 1.3 写入到新的 html 文件中
    fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {
      if (err) console.log(err)
      else console.log('写入成功')
    })
  }
})

五、http:url端口号、web服务程序

1、URL端口号

定义：标记服务器里不同功能的服务程序

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

2、常见的服务程序

3、创建Web服务

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

4、案例：将一个html网页通过web服务加载

/**
 * 目标：基于 Web 服务，开发提供网页资源的功能
 * 步骤：
 *  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 服务启动成功了')
})

六、 Node.js模块化

1、什么是模块化

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

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

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

2、CommonJS标准

需求：定义utils.js模块，封装基地址和数组总和函数

3、案例

utils.js

/**
 * 目标：基于 CommonJS 标准语法，封装属性和方法并导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}

index.js

/**
 * 目标：基于 CommonJS 标准语法，导入工具属性和方法使用
 */
// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)

4、ECMAScript标准-默认导出和导入

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

 

utils.js

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

package.json

{
  "type": "module"
}

index.js

/**
 * 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)

5、ECMAScript标准-命名导出和导入

按需导出时使用

模块 utils.js

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

配置文件 package.json

{
  "type": "module"
}

唯一接口 index.js

/**
 * 目标：基于 ECMAScript 标准语法，"命名"导入，工具属性和方法使用
 */
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

 七、包

1、包的概念

将模块、代码，其他资料聚合成一个文件夹

2、包分类

  • 项目包：编写项目代码的文件夹
  • 软件包：封装工具和方法供开发者使用
    • 要求：根目录中，必须要有package.json文件（记录包的清单信息）
    • 注意导入软件包时，引入的默认时index.js模块文件/main属性指定的模块文件

3、实例

utils是一个软件包

arr.js和str.js均为软件包封装的工具，index.js是utils工具包唯一出口（作用：把所有工具模块方法集中起来，统一向外暴露），server.js导入utils软件包，使用里面封装的工具函数。

arr.js

/**
 * 目标：封装数组常用的方法
 */
// 数组求和函数
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

module.exports = {
  getArraySum
}

str.js

/**
 * 目标：封装校验用户名和密码长度的函数
 * 要求：用户名最少 8 位，密码最少为 6 位
 */

const checkUserName = username => {
  return username.length >= 8
}

const checkPassWord = password => {
  return password.length >= 6
}

module.exports = {
  checkUser: checkUserName,
  checkPwd: checkPassWord
}

index.js

/**
 * 本文件是，utils 工具包的唯一出口
 * 作用：把所有工具模块方法集中起来，统一向外暴露
 */
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')

// 统一导出所有函数
module.exports = {
  getArraySum,
  checkUser,
  checkPwd
}

server.js

/**
 * 目标：导入 utils 软件包，使用里面封装的工具函数
 */
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

八、npm包管理器

1、npm包

（1）定义

  • npm是Node.js标准的软件包管理器

（2）使用

  • 初始化清单文件：npm init -y（得到package.json文件，有则跳过）
  • 下载软件包：npm i 软件包名称
  • 使用软件包

（3）总结

2、npm-安装所有依赖

（1）问题：项目中不包含node_modules，不能正常运行。原因是缺少以来的本地软件包，因为自己用npm下载比拷贝作者上传包快得多。

（2）解决方法：npm i

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

（3）总结

3、全局软件包nodemon

（1）软件包区别：

本地软件包：当前项目内使用，封装属性和方法，存在于node_modules

全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

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

（2）使用

i.安装：npm i nodemon -g（代表安装到全局）

ii.运行：nodemon待执行的目标js文件

e.g nodemon server.js（node server.js 代码修改需要手动启动）

（3）案例：启动准备好的项目，修改代码保存后，观察自动重启应用程序

（4）总结

 九、黑马Node.js总结

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

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

相关文章

html第一次作业

html第一次作业

常用标签 0, 骨架&#xff08;&#xff01;tap&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…
阅读更多...
鸿蒙预览报错 Only files in a module can be previewed

鸿蒙预览报错 Only files in a module can be previewed

HarmonyOS第一课下载的源码无法运行&#xff0c;也无法预览&#xff0c;报错如题。 解决&#xff1a; 1、在预览页如“index.ets”文件下预览。 2、如果在通知栏看到如图提示&#xff0c;可看出是ohos/hvigor-ohos-plugin插件版本的问题&#xff0c;可点击蓝色解决方案同步并导…
阅读更多...
Llama 2 模型

Llama 2 模型

非常清楚&#xff01;&#xff01;&#xff01;Llama 2详解 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/649756898?utm_campaignshareopn&utm_mediumsocial&utm_psn1754103877518098432&utm_sourcewechat_session一些补充理解&#xff1a; 序列化&#xff…
阅读更多...
24---DDR4电路设计

24---DDR4电路设计

视频链接 DDR4电路设计01_哔哩哔哩_bilibili DDR4硬件电路设计 1、DDR4基本介绍 2011年1月4日&#xff0c;三星电子完成史上第一条DDR4内存。DDR4相比DDR3最大的区别有三点&#xff1a;16bit预取机制&#xff08;DDR3为8bit&#xff09;&#xff0c;同样内核频率下理论速度…
阅读更多...
Python RPA简单开发实践（selenium登陆浏览器自动输入密码登陆）

Python RPA简单开发实践（selenium登陆浏览器自动输入密码登陆）

打开csdn博客&#xff0c;简单版 class BS:def __init__(self, url):self.url url# self.password password# self.username usernamedef login_url(self):from selenium import webdriver# 不自动关闭浏览器option webdriver.ChromeOptions()option.add_experimental_opt…
阅读更多...
【Python 滑块不同的操作】对滑块进行处理，列如切割、还原、去除、无脑识别距离等等

【Python 滑块不同的操作】对滑块进行处理，列如切割、还原、去除、无脑识别距离等等

文章日期&#xff1a;2024.03.23 使用工具&#xff1a;Python 类型&#xff1a;图片滑块验证的处理&#xff08;不限于识别距离&#xff09; 使用场景&#xff1a;&#xff1f; 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&a…
阅读更多...
WPF 立体Border

WPF 立体Border

WPF 立体Border &#xff0c;用来划分各个功能区块 在资源文件中&#xff0c;添加如下样式代码&#xff1a; <Style x:Key"BaseBorder" TargetType"Border"><Setter Property"Background" Value"White" /><Setter Prop…
阅读更多...
RuoYi-Vue-Plus（基础知识点jackson、mybatisplus、redis）

RuoYi-Vue-Plus（基础知识点jackson、mybatisplus、redis）

一、JacksonConfig 全局序列化反序列化配置 1.1yml中配置 #时区 spring.jackson.time-zoneGMT8 #日期格式 spring.jackson.date-formatyyyy-MM-dd HH:mm:ss #默认转json的属性&#xff0c;这里设置为非空才转json spring.jackson.default-property-inclusionnon_null #设置属性…
阅读更多...
【数据结构】——栈与队列（附加oj题详解）深度理解

【数据结构】——栈与队列（附加oj题详解）深度理解

栈 1.栈的定义 栈&#xff1a;栈是仅限与在表尾进行插入或者删除的线性表 我们把允许一端插入和删除的一端叫做栈顶&#xff0c;另一端叫栈底&#xff0c;不含任何元素的栈叫做空栈&#xff0c;栈又叫做后进先出的线性表&#xff0c;简称LIFO结构 2.栈的理解 对于定义里面…
阅读更多...
lvs+keepalived+nginx实现高可用

lvs+keepalived+nginx实现高可用

主机&#xff1a;192.168.199.132 备机&#xff1a;192.168.199.133 真实服务器1&#xff1a;192.168.199.134 真实服务器2&#xff1a;192.168.199.135 问题&#xff1a; 防火墙没关 132配置ipvsadm进行dr模式 132配置keepalived.conf 133配置ipvsadm进行dr模式 133配置ke…
阅读更多...
数据结构(五)——二叉树的遍历和线索二叉树

数据结构(五)——二叉树的遍历和线索二叉树

5.3. 二叉树的遍历和线索二叉树 5.3.1_1 二叉树的先中后序遍历 遍历&#xff1a;按照某种次序把所有结点都访问一遍 二叉树的递归特性&#xff1a; ①要么是个空二叉树 ②要么就是由“根节点左子树右子树”组成的二叉树 先序遍历&#xff1a;根左右&#xf…
阅读更多...
深度学习中的随机种子random_seed

深度学习中的随机种子random_seed

解释 由于模型中的参数初始化例如权重参数如下图&#xff0c;就是随机初始化的&#xff0c;为了能够更好的得到论文中提到效果&#xff0c;可以设置随机种子&#xff0c;从而减少算法结果的随机性&#xff0c;使其接近于原始结果。 设置了随机种子&#xff0c;产生的随机数都…
阅读更多...
硬核分享|AI语音识别转文字与自动生成字幕

硬核分享|AI语音识别转文字与自动生成字幕

硬核分享|AI语音识别转文字与自动生成字幕_哔哩哔哩_bilibili 在现代快节奏的生活中&#xff0c;语音转文字工具成为了我们工作和学习中的得力助手。它能够将我们说出的话语迅速转化为文字或者将语音视频自动生成字幕&#xff0c;提供便捷和高效。 语音转文字转字幕工具是一种…
阅读更多...
spring boot商城、商城源码 欢迎交流

spring boot商城、商城源码 欢迎交流

一个基于spring boot、spring oauth2.0、mybatis、redis的轻量级、前后端分离、防范xss攻击、拥有分布式锁&#xff0c;为生产环境多实例完全准备&#xff0c;数据库为b2b2c设计&#xff0c;拥有完整sku和下单流程的商城 联系: V-Tavendor
阅读更多...
计算机网络：分层体系结构

计算机网络：分层体系结构

计算机网络&#xff1a;分层体系结构 基本分层概述各层次的任务物理层数据链路层网络层运输层应用层 数据传递过程分层体系常见概念实体协议服务 基本分层概述 为了使不同体系结构的计算机网络都能互联&#xff0c;国际标准化组织于 1977 年成立了专门机构研究该问题。不久他们…
阅读更多...
不启动BMIDE，Teamcenter如何查看property的real property name

不启动BMIDE，Teamcenter如何查看property的real property name

问题描述&#xff1a; Teamcenter客户端&#xff0c;查看Item 属性&#xff0c;属性名称默认显示的是Display Name。 在各类开发过程中&#xff0c;对属性的操作&#xff0c;需要使用real property name才能进行。开发可能不在server端&#xff0c;没有安装BMIDE&#xff0c;如…
阅读更多...
4核16G服务器租用优惠价格，26.52元1个月，半年149元

4核16G服务器租用优惠价格，26.52元1个月，半年149元

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…
阅读更多...
Linux设备驱动开发 - 三色LED呼吸灯分析

Linux设备驱动开发 - 三色LED呼吸灯分析

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 目录 展锐UIS7885呼吸灯介绍呼吸灯调试方法亮蓝灯亮红灯亮绿灯展锐UIS7885呼吸灯DTS配置ump9620 PMIC驱动ump9620中的LED呼吸灯驱动LED的tr…
阅读更多...
python框架的一加剧场管理系统的设计与实现flask-django-nodejs-php

python框架的一加剧场管理系统的设计与实现flask-django-nodejs-php

本文讲述了一加剧场管理系统。结合电子管理系统的特点&#xff0c;分析了一加剧场管理系统的背景&#xff0c;给出了一加剧场管理系统实现的设计方案。 本论文主要完成不同用户的权限划分&#xff0c;不同用户具有不同权限的操作功能&#xff0c;在用户模块&#xff0c;主要有用…
阅读更多...
数据挖掘与分析学习笔记

数据挖掘与分析学习笔记

一、Numpy NumPy&#xff08;Numerical Python&#xff09;是一种开源的Python库&#xff0c;专注于数值计算和处理多维数组。它是Python数据科学和机器学习生态系统的基础工具包之一&#xff0c;因为它高效地实现了向量化计算&#xff0c;并提供了对大型多维数组和矩阵的支持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023