前端node.js入门

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

Node.js 入门 

什么是 Node.js?

什么是前端工程化?  

Node.js 为何能执行 JS? 

fs 模块 - 读写文件 

path 模块 - 路径处理

URL 中的端口号 

常见的服务程序 

Node.js 模块化

什么是模块化? 

CommonJS 标准 

ECMAScript 标准 - 默认导出和导入  

包的概念  

npm - 软件包管理器 

npm - 全局软件包 nodemon

Node.js 总结  


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 等

fs 模块 - 读写文件 

fs 模块:封装了与本机文件系统进行交互的,方法/属性
语法:
1. 加载 fs 模块对象
2. 写入 文件内容
3. 读取 文件内容
//1.加载fs模块对象
const fs = require('fs')
//2.写入文件内容
fs.writeFile('./test.txt','hello world',(err)=>{if(err){console.log(err)}else{console.log('写入成功')}
})
//3.读取文件内容
fs.readFile('./test.txt',(err,data)=>{if(err){console.log(err)}else{console.log(data.toString())}
})

 终端显示为:                        

path 模块 - 路径处理

建议:在 Node.js 代码中,使用 绝对路径
补充: __dirname 内置变量(获取当前模块目录-绝对路径)
注意: path.join() 会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起
语法:
1. 加载 path 模块
2. 使用 path.join 方法,拼接路径

URL 中的端口号 

URL: 统一资源定位符,简称网址,用于访问服务器里的资源
端口号:标记服务器里不同功能的 服务程序
端口号范围:0-65535 之间的任意整数
注意:http 协议, 默认 访问 80 端口

常见的服务程序 

Web 服务程序 :用于提供网上信息浏览功能
注意:0-1023 和一些特定端口号被占用,我们自己编写服务程序请避开使用

Node.js 模块化

什么是模块化? 

定义:

概念:项目是由很多个模块文件组成的
好处:提高代码复用性,按需加载, 独立作用域
使用:需要标准语法 导出 导入 进行使用

CommonJS 标准 

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

ECMAScript 标准 - 默认导出和导入  

默认标准使用:
1. 导出: export default {}
2. 导入: import 变量名 from '模块名或路径'
注意: Node.js 默认支持 CommonJS 标准语法
如需使用 ECMAScript 标准语法,在运行模块所在文件夹新建 package.json 文件,并设置
{ "type" : "module" }

包的概念  

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

包分类:
         项目包:主要用于编写项目和业务逻辑
         软件包: 封装工具和方法 进行使用
要求:根目录中,必须有 package.json 文件(记录包的清单信息)
注意:导入软件包时,引入的默认是 index.js 模块文件 / main 属性指定的模块文件

npm - 软件包管理器 

定义:

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

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 管理)
本地软件包:作用在 当前 项目,一般封装的 属性/方法 ,供项目调用编写业务需求
全局软件包:作用在 所有 项目,一般封装的 命令/工具 ,支撑项目运行

常用命令:  

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

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

相关文章

【数据结构】二叉树详解(2)

⭐️ 前言 ✨ 往期文章链接:二叉树的概念性质 上一篇我们讲了二叉树的结构定义,以及前序/中序/后序的递归遍历,还有一些二叉树的接口实现,本篇我们补充一个二叉树的接口 BinaryTreeDepth。✨上一篇文章链接:二叉树详…

结合ChatGPT制作PPT

今天看到圈友的一个AI分享,然后自己本身需要做一个分享的PPT。刚好那着帖子实战一下。先说下整体感受。 优点:制作成本确实会比较低,很熟练的话大概就是1分钟一个都有可能。整体流程是先找个第三方PPT制作网站,看下支不支持文本转…

PLEX如何搭建个人局域网的视频网站

Plex是一款功能非常强大的影音媒体管理系统,最大的优势是多平台支持和界面优美,几乎可以在所有的平台上安装plex服务器和客户端,让你可以随时随地享受存储在家中的电影、照片、音乐,并且可以实现观看记录无缝衔接,手机…

opencv-14 图像加密和解密

在OpenCV中,图像加密和解密是通过对图像像素进行一系列的变换和操作来实现的 通过按位异或运算可以实现图像的加密和解密。 通过对原始图像与密钥图像进行按位异或,可以实现加密;将加密后的图像与密钥图像再次进行按位异或,可以实…

实例019 以图形按钮显示的界面

实例说明 菜单和工具栏虽然能方便用户操作程序的相应功能,但各有缺点。如果采用按钮式功能菜单,不但美观大方,而且操作灵活。当单击按钮时,用户区将显示相应的操作按钮组。下面介绍图形界面式菜单的设计方法。运行本例&#xff0…

【贪心算法Part03】| 1005.K次取反后最大化的数组和、134.加油站、135.分发糖果

目录 🎈LeetCode1005.K次取反后最大化的数组和 🎈LeetCode134.加油站 🎈LeetCode135.分发糖果 🎈LeetCode1005.K次取反后最大化的数组和 链接:1005.K次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k…

分享一个唯美雪花界面

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>雪</title><meta name"viewport" content"widthdevice-width, initial-scale1&…

TKDE论文,跑的改的,GPSCVULDETECTOR

Combining Graph Neural Networks With Expert Knowledge for Smart Contract Vulnerability Detection 论文代码GitHub https://github.com/Messi-Q/GPSCVulDetectorpaper https://ieeexplore.ieee.org/abstract/document/9477066/参考IJCAI 21中AME的数据集 https://gith…

中国地图使用心得

中国地图使用心得 注册地图是注册在echarts对象上而非 自己构建的echarts dom上、。 请求本地json文件 ​ vue项目的public打包时不会动&#xff0c;所以线上和本地地址直接指向了public同级目录&#xff0c;请求时直接相对路径 绘制中国地图时&#xff0c;如何在各个省会地方…

旅游卡系统加盟代理软件开发

旅游行业的不断发展&#xff0c;越来越多的旅行社开始推出各种优惠卡来吸引游客。而随着智能手机的普及&#xff0c;开发一款旅行社优惠卡APP软件成为了一种必然的趋势。 该软件的主要功能是提供旅行社的各种优惠卡信息&#xff0c;包括优惠卡的种类、价格、使用范围、有效…

无极低代码,免费工具在线实用工具分享

在当今数字化的时代&#xff0c;我们需要尽可能地减少手动操作&#xff0c;提高工作效率。这就是为什么我们需要一些在线工具来帮助我们完成一些繁琐的任务。以下是一些无极低代码网集成的在线工具&#xff0c;可以帮助您更快、更轻松地完成任务。 项目管理 项目周期计算&…

ARP解析MAC地址的全过程(ARP的工作机制)

目录 ARP解析MAC地址的过程&#xff1a; 源码等资料获取方法 以太网环境下&#xff0c;同一个网段的主机之间需要互相知道对方的MAC地址&#xff0c;才能访问。 TCP/IP协议栈从上层到下层的封装过程中&#xff0c;第三层封装需要知道目的IP&#xff0c;第二层封装需要知道目…

Java 设计模式——迭代器模式

目录 1.概述2.结构3.案例实现3.1.抽象迭代器3.2.具体迭代器3.3.抽象聚合3.4.具体聚合3.5.测试 4.优缺点5.使用场景6.JDK 源码解析——Iterator 1.概述 迭代器模式 (Iterator Pattern) 是一种行为型设计模式&#xff0c;它提供一种顺序访问聚合对象&#xff08;如列表、集合等&…

使用亚马逊(AWS)云服务在S3上实现图片缩放功能(CloudFront/S3[AccessPoint/LambdaAccessPoint])

亚马逊云服务中的S3对象存储功能和国内阿里云的oss对象存储使用基本一致。但是涉及到存储内容处理时&#xff0c;两家有些差别。 比如&#xff1a;对于云存储中的图片资源&#xff0c;阿里云比较人性化对于基本的缩放裁剪功能已经帮我们封装好了&#xff0c;只需要在url地址后…

Bean 作用域与生命周期

Bean 作用域与生命周期 ​ 对于 Spring 来说&#xff0c;核心操作对象就是存和取 Bean &#xff0c;接下来就 Bean 的作用域与生命周期进行探讨。 文章目录 Bean 作用域与生命周期一、作用域的定义1.1、Bean 的6种作用域1.2、Bean作用域设置方法 二、Bean 的生命周期2.1、Bean…

postgresql还原bak

1、第一步肯定是要新建自己还原的目标数据库&#xff0c;例如&#xff1a; 2、进入postgresql的安装目录下的bin目录下 然后地址栏输入cmd进入命令 输入以下 psql -h localhost -U postgres -p 5432 -d SamsinoYardStandard_karamay -f "D:\desktop\zk\20230628.bak&quo…

verilog实现数码管静态显示

文章目录 verilog实现数码管静态显示一、任务要求二、实验代码三、仿真代码四、仿真结果五、总结 verilog实现数码管静态显示 一、任务要求 六个数码管同时间隔0.5s显示0-f。要求&#xff1a;使用一个顶层模块&#xff0c;调用计时器模块和数码管静态显示模块。 二、实验代码…

将Spring Boot项目打包部署到阿里云linux服务器

首先 你要保证自己的服务器上有java环境 如果没有可以参考我的文章 linux服务器中安装java JDK1.8版本 然后 我们打开我们的Spring Boot项目 双击 package 生命周期进行打包 打包完成之后 我们找到 target 下面会有一个jar包 然后 我们右键它 如下图操作 系统就会帮你打开它所…

OpenCV for Python 学习第四天 :通道的获取与合并

上一篇博客&#xff0c;我们学习了如何通过更快的item()和itemset()的方法访问图片&#xff0c;以及了解了图像的兴趣位置的获取方法&#xff0c;那么今天&#xff0c;我们将学习通道的处理方法&#xff0c;通过通道的拆分和合并的实例&#xff0c;让大家更好的了解咱们有关于B…

前端笔记_OAuth规则机制下实现个人站点接入qq三方登录

文章目录 ⭐前言⭐qq三方登录流程&#x1f496;qq互联中心创建网页应用&#x1f496;配置回调地址redirect_uri&#x1f496;流程分析 ⭐思路分解⭐技术选型实现&#x1f496;技术选型&#xff1a;&#x1f496;实现 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本…