二三(Node2)、Node.js 模块化、package.json、npm 软件包管理器、nodemon、Express、同源、跨域、CORS

1. Node.js 模块化

1.1 CommonJS 标准

utils.js

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

index.js

/*** 目标：基于 CommonJS 标准语法，导入工具属性和方法使用*//* 模块化：每个文件都是独立的模块，需要标准语法导出和导入进行使用CommonJS 标准 - 导出和导入模块➢ 导出：module.exports = {}➢ 导入：require('模块名或路径')➢ 内置模块，直接写名字。例如：fs，path，http等➢ 自定义模块，写模块文件路径。例如：./utils.js
*/// 解构导入的数据
// const { baseURL, getArraySum } = require("./utils");
const { baseURL, getArraySum } = require("./utils.js");console.log(baseURL); // http://hmajax.itheima.net
console.log(getArraySum([1, 5, 8])); // 14

1.2 ECMAScript 标准 - 默认导出和导入

utils.js

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

package.json

{"type": "module"
}

index.js

/*** 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用*//* 1. ECMAScript 标准 - 默认导出和导入模块➢ 导出：export default {}➢ 导入：import 变量名 from '模块名或路径'2. Node.js 切换模块标准为 ECMAScript➢ 运行模块所在文件夹，新建 package.json 并设置{ "type" : "module" }
*/import obj from "./utils.js";
console.log(obj.baseURL); // http://hmajax.itheima.net
console.log(obj.getArraySum([1, 4, 7])); // 12

1.3 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 标准语法，"命名"导入，工具属性和方法使用*//* ECMAScript 标准，命名导出和导入的语法➢ 导出：export 修饰定义的语句➢ 导入：import { 同名变量 } from '模块名或路径'按需加载，使用命名导出和导入全部加载，使用默认导出和导入
*/import { getArraySum, baseURL } from "./utils.js";
console.log(baseURL); // http://hmajax.itheima.net
console.log(getArraySum([1, 5, 8, 12, 234])); // 260

2. 软件包

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

3. npm 软件包管理器

3.1 npm - 软件包管理器

/*** 目标：使用 npm 下载 dayjs 软件包来格式化日期时间*  1. （可选）初始化项目清单文件，命令：npm init -y*  2. 下载软件包到当前项目，命令：npm i 软件包名称*  3. 使用软件包*//*npm config set registry xxx 这个命令用于设置 npm（Node Package Manager）的注册表地址默认情况下，npm 使用官方的 npm 注册表 (https://registry.npmjs.org)，但有时为了加快下载速度或访问某些特定的包，用户可能会选择使用镜像源。1. 将 npm 的注册表设置为一个镜像源（在中国境内可能更快）npm config set registry http://registry.npmmirror.com2. 安装 dayjs 这个日期处理库; i - installnpm i dayjs
*//* 1. npm 软件包管理器作用？➢ 下载软件包以及管理版本2. 初始化项目清单文件 package.json 命令？➢ npm init -y3. 下载软件包的命令？➢ npm i 软件包名字4. 下载的包会存放在哪里？➢ 当前项目下的 node_modules 中，并记录在 package.json 中
*/const dayjs = require("dayjs");
const res = dayjs().format("YYYY-MM-DD");
console.log(res); // 2024-12-12

3.2 npm - 安装所有依赖

/*** 目标：安装所有依赖软件包* 场景：一般拿到别人的项目后，只有 package.json 缺少 node_modules 时需要做* 语法：在当前项目终端下，输入命令：npm i* 效果：会根据 package.json 记录的所有包和版本开始下载*//* 1. 当项目中只有 package.json 没有 node_modules 怎么办？➢ 当前项目下，执行 npm i 安装所有依赖软件包2. 为什么 node_modules 不进行传递？➢ 因为用 npm 下载比磁盘传递要快
*/// 格式化日期
const dayjs = require("dayjs");
const nowDateStr = dayjs().format("YYYY-MM-DD");
console.log(nowDateStr); // 2024-12-12// 求数组里最大值
const _ = require("lodash");
console.log(_.max([1, 2, 8, 3, 4, 5])); // 8

4. npm 全局软件包 nodemon

/*** 目标：使用 nodemon 全局软件包，检测文件变化，自动重启程序* 语法：*  1. 安装 nodemon 全局软件包，命令：npm i nodemon -g*  2. 使用 nodemon 来执行目标 js 文件* 体验：启动后，修改代码，保存后观察终端效果*//* 1. 本地软件包和全局软件包区别？➢ 本地软件包，作用在当前项目，封装属性和方法➢ 全局软件包，本机所有项目使用，封装命令和工具2. nodemon 作用？➢ 替代 node 命令，检测代码更改，自动重启程序3. nodemon 怎么用？➢ 先确保安装 npm i nodemon -g➢ 使用 nodemon 执行目标 js 文件
*/// 格式化日期
const dayjs = require("dayjs");
const nowDateStr = dayjs().format("YYYY-MM-DD");
console.log(nowDateStr);// 求数组里最大值
const _ = require("lodash");
console.log(_.max([1, 10, 2, 3, 4, 55]));

5. Node.js 总结

/*** 总结：* Node.js模块：*  概念：每个文件就是一个模块，独立作用域，按需加载，需使用特定语法导出导入*  CommonJS 标准语法：*    导出：module.exports = {}*    导入：require('模块名或路径')*  ECMAScript 标准语法：*    默认导出：export default {}*    默认导入：import 变量名 from '模块名或路径'*    命名导出：export 修饰定义语句*    命名导入：import { 同名变量 } from '模块名或路径'** Node.js包：*  概念：把模块文件，代码文件，其他资料聚合成一个文件夹*  项目包：编写项目需求和业务逻辑的文件夹*  软件包：封装工具/方法的文件夹（一般用 npm 管理）*    本地软件包：封装属性/方法，在当前项目中使用，例如：dayjs，lodash*    全局软件包：封装工具/命令，在本机中使用，例如：nodemon** 常用命令：*  执行 js 文件：node xxx*  初始化 package.json: npm init -y*  下载本地软件包：npm i 软件包名*  下载全局软件包：npm i 软件包名 -g*  删除软件包：npm uni 软件包名*/

6. Express 搭建 Web 服务

/* Express - 框架使用 express 本地软件包，快速搭建 Web 服务（基于 http 模块）功能：1. 提供数据接口 2. 提供网页资源等
*/// 1. 下载 express 软件包
const express = require("express");// 2. 导入并创建 Web 服务对象
const server = express();// 3. 监听请求的方法和请求的资源路径
server.get("/", (req, res) => {res.send("哦耶 express");
});// 4. 监听任意请求的方法和请求的资源路径
server.all("*", (req, res) => {res.status(404);res.send("您访问的资源不存在");
});// 5. 监听端口号，启动 Web 服务
server.listen(3000, () => {console.log("启动成功成功");
});

7. 获取省份列表 - 接口开发

/*** 目标：基于 express 软件包，开发提供省份列表的数据接口* 要求：get 请求方法，/api/province 的请求路径*/const fs = require("fs");
const path = require("path");
const express = require("express");
const server = express();// 监听 get 请求方法，
// 监听资源路径 /api/province，
// 读取 province.json 省份数据返回
server.get("/api/province", (req, res) => {fs.readFile(path.join(__dirname, "/data/province.json"), (err, data) => {if (err) {console.log(err);} else {res.send(data.toString());}});
});server.all("*", (req, res) => {res.status(404);res.send("你要访问的资源路径不存在");
});server.listen(3000, () => {console.log("Web 服务已启动");
});

8. 跨域以及解决方案

8.1 浏览器的同源策略

/*** 目标：了解浏览器中的同源策略* 同源策略：是一种安全策略，限制一个源的文档/脚本与另外一个源的资源交互** 好处：保护网站的安全，减少被攻击的媒介* 限制：浏览器限制 AJAX 只能访问同源的 URL 网址！** 源：指的 URL 中的协议，域名，端口号* 同源：网页加载所在的源，与 AJAX 请求的源完全相同即为同源*/

8.2 跨域问题

/* 跨域访问：网页所在源和 AJAX 请求的源（协议，域名，端口号）不完全相同，就发生跨域访问
*/

8.3 跨域问题 - 解决方案1 - CORS

/* 跨域问题 - 解决方案1 - CORS目标：前后端分离的项目，前端和后端不在一个源，还要保证数据通信解决：采用 CORS （跨域资源共享），一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源步骤：1. 下载 cors 本地软件包2. 导入 cors 函数3. 使用 server.use() 给 Web 服务添加插件功能4. 把 cors 函数调用传入给 Web 服务，启动测试1. 为什么要解决跨域问题？➢ 因为前后端分离的项目，不在同一个源去开发项目➢ 需要保证数据之间通信2. 跨域问题如何解决？➢ 让后端开启 CORS 跨域资源共享➢ 在响应头设置 Access-Control-Allow-Origin: *
*/// 2. 导入 cors 函数
const cors = require("cors");
// 3. 使用 server.use() 给 Web 服务添加插件功能
server.use(cors());

8.4 跨域问题 - 解决方案2 - 同源访问

/* 跨域问题 - 解决方案2 - 同源访问目标：开发环境用 cors，上线部署关闭 cors，并采用同源访问方式做法：让后端 Web 服务既可以提供数据接口，也可以返回网页资源好处：安全，后端的接口不允许非同源来访问1. CORS 只适用于什么阶段的项目？➢ 本地开发阶段项目2. 项目上线，如何解决跨域问题？➢ 把前端项目和后端项目部署到同一个源下访问
*/// 暴露指定的文件夹，让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname, "public")));

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

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

相关文章

Java爬虫设计：淘宝商品详情接口数据获取

Java爬虫设计：淘宝商品详情接口数据获取

1. 概述 淘宝商品详情接口（如Taobao.item_get）允许开发者通过编程方式，以JSON格式实时获取淘宝商品的详细信息，包括商品标题、价格、销量等。本文档将介绍如何设计一个Java爬虫来获取这些数据。 2. 准备工作 在开始之前&#x…
阅读更多...
LeetCode-hot100-73

LeetCode-hot100-73

https://leetcode.cn/problems/largest-rectangle-in-histogram/description/?envTypestudy-plan-v2&envIdtop-100-liked 84. 柱状图中最大的矩形 已解答 困难 相关标签 相关企业 给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#x…
阅读更多...
深度学习中损失函数(loss function)介绍

深度学习中损失函数(loss function)介绍

深度学习中损失函数(loss function)介绍 ​ 在深度学习的宏伟城堡中，损失函数扮演着国王的角色，它决定了模型训练的方向和目标。损失函数，也被称为代价函数，是衡量模型预测与实际结果之间差异的函数。在深度学习的训练过程中&…
阅读更多...
【docker】springboot 服务提交至docker

【docker】springboot 服务提交至docker

准备docker （不是docker hub或者harbor，就是可以运行docker run的服务），首先确保docker已经安装。 本文以linux下举例说明： systemctl stats docker ● docker.service - Docker Application Container EngineLoaded…
阅读更多...
【新版】阿里云ACP云计算题库及答案解析

【新版】阿里云ACP云计算题库及答案解析

阿里云ACO云计算考试提醒都是选择题，70道单选题30道单选题，聪明的小伙伴都知道刷题备考加深记忆，给大家分享一波阿里云ACP云计算题库及答案，希望对大家顺利拿到阿里云ACP云计算高级工程师证书有所帮助！ 1、设计云上架…
阅读更多...
通过ajax的jsonp方式实现跨域访问，并处理响应

通过ajax的jsonp方式实现跨域访问，并处理响应

一、场景描述 现有一个项目A，需要请求项目B的某个接口，并根据B接口响应结果A处理后续逻辑。 二、具体实现 1、前端 前端项目A发送请求，这里通过jsonp的方式实现跨域访问。 $.ajax({ url:http://10.10.2.256:8280/ssoCheck, //请求的u…
阅读更多...
Unity 沿圆周创建Sphere

Unity 沿圆周创建Sphere

思路 取圆上任意一点连接圆心即为半径，以此半径为斜边作直角三角形。当已知圆心位置与半径长度时，即可得该点与圆心在直角三角形两直角边方向上的位置偏移，从而得出该点的位置。 实现 核心代码 offsetX radius * Mathf.Cos(angle * Mathf…
阅读更多...
【CUDA】CUBLAS

【CUDA】CUBLAS

【CUDA】CUBLAS 在深入了解之前，提前运行预热（warmup）和基准测试（benchmark runs） 是获得准确执行时间的关键。如果不进行预热运行，cuBLAS 的首次运行会有较大的开销（大约 45 毫秒）…
阅读更多...
9. 高效利用Excel设置归档Tag

9. 高效利用Excel设置归档Tag

高效利用Excel设置归档Tag 1. Excle批量新建/修改归档Tag2. 趋势记录模型批量导入归档Tag（Method1）2. 趋势记录模型批量导入归档Tag（Method2）3. 趋势记录控件1. Excle批量新建/修改归档Tag Fcatory Talk常常需要归档模拟量，对于比较大的项目工程会有成千上万个重要数据需…
阅读更多...
网页端web内容批注插件：

网页端web内容批注插件：

感觉平时每天基本上90%左右的时间都在浏览器端度过，按理说很多资料都应该在web端输入并且输出，但是却有很多时间浪费到了各种桌面app中，比如说什么notion、语雀以及各种笔记软件中，以及导入到ipad的gn中，这些其实都是浪…
阅读更多...
Jackson @JsonIgnore 注解

Jackson @JsonIgnore 注解

1. 概述 Jackson 是一个广泛使用的Java库，它允许轻松地将Java对象序列化为JSON以及从JSON反序列化回Java对象。Jackson库提供的其中一个注解是JsonIgnore。这个注解用于在序列化和反序列化过程中忽略特定的属性。这在转换JSON与Java对象之间时隐藏或省略敏感或不必…
阅读更多...
数据结构——栈的模拟实现

数据结构——栈的模拟实现

大家好，今天我要介绍一下数据结构中的一个经典结构——栈。 一：栈的介绍 与顺序表和单链表不同的是： 顺序表和单链表都可以在头部和尾部插入和删除数据，但是栈的结构就锁死了（栈的底部是堵死的）栈只能从…
阅读更多...
基于springboot+vue的高校校园交友交流平台设计和实现

基于springboot+vue的高校校园交友交流平台设计和实现

文章目录 系统功能部分实现截图 前台模块实现管理员模块实现 项目相关文件架构设计 MVC的设计模式基于B/S的架构技术栈 具体功能模块设计系统需求分析 可行性分析 系统测试为什么我？ 关于我项目开发案例我自己的网站 源码获取： 系统功能 校园交友平台…
阅读更多...
数字货币金融研究，深度学习虚拟币价格预测 数据集 市值top20 （2014年—2024年）

数字货币金融研究，深度学习虚拟币价格预测 数据集 市值top20 （2014年—2024年）

比特币，以太坊，狗狗币，屎币，模因币 声明 此数据集的目的是 用于数字货币金融研究，深度学习虚拟币价格预测 1、数据集 2014年——2024年 市值top20 比特币，以太坊，屎币，狗狗币交易…
阅读更多...
让文案生成更具灵活性/chatGPT新功能canvas画布编辑

让文案生成更具灵活性/chatGPT新功能canvas画布编辑

​ ​ OpenAI最近在2024年12月发布了canvas画布编辑功能，这是一项用途广泛的创新工具，专为需要高效创作文案的用户设计。 无论是职场人士、学生还是创作者，这项功能都能帮助快速生成、优化和编辑文案，提升效率的同时提高内容质量…
阅读更多...
递归问题（c++）

递归问题（c++）

递归设计思路 数列递归 : 如果一个数列的项与项之间存在关联性，那么可以使用递归实现 ; 原理 : 如果一个函数可以求A(n)，那么该函数就可以求A(n-1)，就形成了递归调用 ; 注意: 一般起始项是不需要求解的，是已知条件 这就是一个典型…
阅读更多...
AI Alignment: A Comprehensive Survey---摘要、简介

AI Alignment: A Comprehensive Survey---摘要、简介

题目 人工智能对齐：全面调查 摘要 人工智能对齐旨在使人工智能系统的行为符合人类的意图和价值观。随着人工智能系统的能力不断增强，错位的风险也在不断增加。为了提供对齐领域的全面和最新概述，在本调查中，我们深入研究了对齐的…
阅读更多...
Linux中vi和vim的区别详解

Linux中vi和vim的区别详解

文章目录 Linux中vi和vim的区别详解一、引言二、vi和vim的起源与发展三、功能和特性1、语法高亮2、显示行号3、编辑模式4、可视化界面5、功能扩展6、插件支持 四、使用示例1、启动编辑器2、基本操作 五、总结 Linux中vi和vim的区别详解 一、引言 在Linux系统中，vi和…
阅读更多...
Vuex在uniapp中的使用

Vuex在uniapp中的使用

文章目录 一、Vuex概述 1.1 官方解释 1.2 大白话 1.3 组件间共享数据的方式 1.4 再看Vuex是什么 1.5 使用Vuex统一管理好处 二、状态管理 2.1 单页面状态管理 2.2 多页面状态管理 2.3 全局单例模式 2.4 管理哪些状态 三、Vuex的基本使用 3.1 安装 3.2 导入 3.3 创建store对象…
阅读更多...
【工具变量】上市公司企业经营困境指数数据（Zscore、Oscore、RLPM、Merton DD）2000-2021年

【工具变量】上市公司企业经营困境指数数据（Zscore、Oscore、RLPM、Merton DD）2000-2021年

一、资料范围：包括Zscore、Oscore、RLPM、Merton DD，经营困境说明如下：（1）Zscore：以2.67和1.81作为临界值计算样本得分所处的范围。Zscore>2.67 为财务状况良好，发生破产的可能性较小。Zscor…
阅读更多...
最新文章

Copyright @ 2022~2023