Node.js学习（一）

Node.js安装与入门案例：

需求：点击按钮，请求本地目录指定文件的内容，并显示在页面上

     

刚入门肯定想着直接写相对路径请求指定路径数据就行了，可是会发现不行。

网页运行在浏览器端，通常后续要发布，如果能直接访问到本地文件，是不是会不安全 ！

所以建议将资源都发布到服务器上，通过指定接口向外暴露！！！

可以VS Code安装live server或者Webstorm自带的server启动，都会是正确的，它们内部应该都是写了一个本节所学的Node服务

掌握Javascript，你将掌握浏览器端（JS）和服务器端（Node.js）

创建一个Node.js项目是一个相对简单的过程，涉及到几个基本步骤。以下是一个基本的指导，帮助你从零开始创建一个Node.js项目：

1. 安装Node.js

首先，确保你的计算机上安装了Node.js。你可以从Node.js官网下载并安装适合你操作系统的版本。安装完成后，你可以在命令行（终端或命令提示符）中运行node -v来检查Node.js是否安装成功，以及安装的版本。

2. 创建一个新的项目文件夹

在你的计算机上选择一个合适的位置，创建一个新的文件夹作为你的Node.js项目目录。你可以使用命令行来创建这个文件夹，例如，在Windows上你可以使用mkdir my-node-project，在Mac或Linux上也是相同的命令。

3. 初始化项目

进入你的项目文件夹，并运行npm init命令。这个命令会引导你通过一系列步骤来设置你的项目，包括项目名称、版本、描述、入口点（通常是index.js）、测试命令、git仓库等。你也可以选择使用npm init -y来快速跳过这些步骤，接受默认设置。

4. 安装项目依赖

虽然你刚开始可能不需要任何外部库，但随着项目的发展，你很可能需要添加一些。你可以使用npm（Node Package Manager）来安装这些依赖。例如，如果你想在项目中使用Express框架，你可以在项目目录下运行npm install express。

5. 编写代码

在项目文件夹中创建一个或多个.js文件来编写你的Node.js代码。例如，你可以创建一个名为index.js的文件，并在其中编写你的主逻辑。

6. 运行你的项目

在项目目录下，打开命令行，并运行node index.js（假设你的主文件是index.js）。这将启动你的Node.js应用。

//node.js
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;// 设置静态文件目录
// 假设你希望从项目根目录下的`public`文件夹提供文件
app.use(express.static('public'));// 路由处理器，用于直接发送文件（非静态文件服务）
app.get('/file/:filename', (req, res) => {const filePath = path.join(__dirname, 'public', req.params.filename);console.log(filePath)fs.readFile(filePath, 'utf-8',(err, data) => {if (err) {if (err.code === 'ENOENT') {return res.status(404).send('File not found');}res.status(500).send('Sorry, check with the site admin for error: ' + err.code + ' ..\n');}// 设置内容类型res.type(path.extname(filePath));console.log(data)res.send(data);});
});// 定义一个路由，当访问/时，返回index.html页面【创建前端路由，保证不跨域】
app.get('/', (req, res) => {res.sendFile(__dirname + '/index.html');
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

fetch 是 Web API 的一部分，用于在浏览器中发起网络请求。它提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一部分，如请求和响应。与 XMLHttpRequest 相比，fetch 提供了一个更现代、更强大且更灵活的 API 来处理网络请求。

基本用法

fetch 函数返回一个 Promise，该 Promise 解析为 Response 对象，表示网络请求的响应。然后，你可以使用 Response 对象提供的方法来访问实际的响应数据，比如 .text()、.json()、.blob()、.formData() 等。

参数

  • url (必需): 请求的 URL。
  • options (可选): 一个包含请求配置的选项对象。这些选项包括请求方法（默认为 GET）、请求头（headers）、请求体（body，通常用于 POST 或 PUT 请求）等。

请求选项

options 对象可以包含以下属性：

  • method: 请求使用的方法，如 GET、POST、PUT、DELETE 等。
  • headers: 请求头，一个 Headers 对象或一个包含请求头的对象字面量。
  • body: 请求体，通常用于 POST 或 PUT 请求。它可以是 Blob、BufferSource、FormData、URLSearchParams 或 USVString 对象。注意，发送 GET 或 HEAD 请求时，不能包含 body。
  • mode: 指定请求的模式，如 cors（默认值，跨源资源共享）、no-cors（仅用于同源请求）、same-origin（仅用于同源请求）或 navigate（仅用于导航请求）。
  • credentials: 指定是否包含用户凭证，如 cookie 或 HTTP 认证信息。可选值包括 omit（默认值，不发送凭证）、same-origin（仅同源请求发送凭证）或 include（跨域请求也发送凭证）。
  • cache: 指定请求如何影响浏览器缓存。可选值包括 default（默认值）、no-store、reload、no-cache、force-cache、only-if-cached。
  • redirect: 指定如何自动处理重定向。可选值包括 follow（默认值，自动跟随重定向）、error（如果发生重定向，则抛出错误）、manual（手动处理重定向）。
  • referrerPolicy: 指定请求的 referrer 策略，用于控制发送哪个引用头。

响应处理

一旦 fetch 请求成功（即网络请求成功发出并被接收），你需要检查响应的 ok 属性来确定响应是否成功（即 HTTP 状态码在 200-299 范围内）。然后，你可以使用 Response 对象提供的方法来获取响应数据。

注意事项

  • fetch 不会自动拒绝被 HTTP 网络错误拒绝的 Promise（如 4xx 或 5xx 响应）。相反，它会将 Promise 解析为一个 Response 对象，你需要自己检查 Response.ok 属性或 Response.status 属性来确定请求是否成功。
  • fetch 默认不发送或接收任何 cookies，也不会发送 HTTP 认证信息。如果你需要包含这些用户凭证，请确保将 credentials 选项设置为 include。
  • 对于大文件或流数据，使用 fetch 的 .blob() 方法可能更合适，因为它允许你以二进制流的形式处理数据。
  • fetch 提供了更现代的 API，但与 XMLHttpRequest 相比，它在某些浏览器中的支持可能略有不同。不过，现代浏览器几乎都支持 fech。
//index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id="but">发起请求</button><div id="result"></div>
</body>
<script>document.getElementById("but").addEventListener("click",getData);function getData() {const filename="test.glsl";const url = `http://localhost:3000/file/${filename}`;fetch(url).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}// 假设后端返回的是文本内容，使用text()方法return response.text();// 如果后端返回的是JSON，则使用json()方法// return response.json();}).then(data => {document.getElementById('result').innerText = data;console.log(data); // 处理文件内容}).catch(error => {console.error('There has been a problem with your fetch operation:', error);});}
</script>
</html>

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

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

相关文章

docker部署wg-easy和firefly

docker部署wg-easy和firefly

Background WireGuard是一种新型的VPN协议,它通过在内核层运行,提供高效、安全、简单和现代的VPN解决方案。wg-easy是一个专为简化 WireGuard VPN配置和管理而设计的工具&#xff0c;提供了界面化的管理&#xff0c;进一步降低WireGuard 的使用门槛&#xff0c;让用户无需深入了…
阅读更多...
在Linux中对Nginx配置rewrite跳转

在Linux中对Nginx配置rewrite跳转

nginx安装在IP为x.x.x.x的服务器上 rewrite语法&#xff1a; rewrite <正则表达式> <指定替换的内容> <flag标记> 注释&#xff1a;使用nginx提供的全局变量或自己设置的变量&#xff0c;结合正则表达式和标记位&#xff08;redirect返回302临时重定向…
阅读更多...
css_23_多列布局

css_23_多列布局

常用值&#xff1a; column-count&#xff1a;指定列数&#xff0c;值是数字。 column-width&#xff1a;指定列宽&#xff0c;值是长度。 columns &#xff1a;同时指定列宽和列数&#xff0c;复合属性&#xff1b;值没有数量和顺序要求。 column-gap&#xff1a;设置列边距…
阅读更多...
Java时间转换

Java时间转换

一、线程不安全 Date date new Date(); SimpleDateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String prefix dateFormat.format(date);二、线程安全,建议使用 String t1 LocalDateTime.now().format(DateTimeFormatter.ofPattern("y…
阅读更多...
【C++】STL-stack_queue

【C++】STL-stack_queue

目录 1、stack和queue的使用 1.1 最小栈 1.2 栈的弹出和压入序列 1.3 二叉树的层序遍历 2、stack和queue的模拟实现 2.1 适配器 2.2 deque 2.2.1 deque的成员变量 2.2.2 deque的迭代器 2.2.3 deque尾插元素 2.2.4 deque头插元素 2.2.5 下标访问 2.2.6 deque的不足 …
阅读更多...
Transformer模型学习

Transformer模型学习

Transformer模型是深度学习领域的一种创新架构&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;任务中表现出色。它是由Vaswani等人在2017年的论文《Attention is All You Need》中首次提出的。以下是对Transformer模型的详细介绍&#xff1a; Transformer的起源和…
阅读更多...
golang结合neo4j实现权限功能设计

golang结合neo4j实现权限功能设计

neo4j 是非关系型数据库之图形数据库&#xff0c;这里不再赘述。 传统关系数据库基于rbac实现权限, user ---- role ------permission,加上中间表共5张表。 如果再添上部门的概念&#xff1a;用户属于部门&#xff0c;部门拥有 角色&#xff0c;则又多了一层&#xff1a; user-…
阅读更多...
力扣刷题--3158. 求出出现两次数字的 XOR 值【简单】

力扣刷题--3158. 求出出现两次数字的 XOR 值【简单】

题目描述 给你一个数组 nums &#xff0c;数组中的数字 要么 出现一次&#xff0c;要么 出现两次。 请你返回数组中所有出现两次数字的按位 XOR 值&#xff0c;如果没有数字出现过两次&#xff0c;返回 0 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,1,3] 输出&…
阅读更多...
数据加密解密和哈希的解析

数据加密解密和哈希的解析

[S1301]数据的加解密 对提供的原始数据&#xff08;字符串或者二进制数组&#xff09;进行加密是数据保护框架体提供的基本功能&#xff0c;接下来我们利用一个简单的控制台程序来演示一下加解密如何实现。数据的加解密均由IDataProtector对象来完成&#xff0c;而该对象由IDa…
阅读更多...
Linux硬链接和软链接（符号链接）

Linux硬链接和软链接（符号链接）

ln 是 Linux 和 Unix 系统中用来创建链接的命令。它的基本用法如下&#xff1a; 创建硬链接&#xff1a; ln source_file target_link这会创建一个名为 target_link 的硬链接&#xff0c;指向 source_file。硬链接实际上是文件系统中的一个额外条目&#xff0c;指向相同的数据块…
阅读更多...
Elasticsearch：Runtime fields - 运行时字段（一）

Elasticsearch：Runtime fields - 运行时字段（一）

运行时字段&#xff08;runtime fields&#xff09;是在查询时计算的字段。运行时字段使你能够&#xff1a; 向现有文档添加字段而无需重新索引数据开始处理数据而无需了解其结构在查询时覆盖索引字段返回的值定义用于特定用途的字段而无需修改底层架构 你可以像访问其他任何…
阅读更多...
bash条件判断基础adsawq1`1nn

bash条件判断基础adsawq1`1nn

判断的作用 判断后续操作的提前条件是否满足如果满足执行一种命令不满足则执行另一种指令 条件测试类型&#xff1a; 整型测试字符测试文字测试 整数测试&#xff1a;比较两个整数谁大谁小&#xff0c;是否相等&#xff1b; 二元测试&#xff1a; num1 操作符 num2 -eq: 等于…
阅读更多...
uniapp封装虚拟列表滚动组件

uniapp封装虚拟列表滚动组件

uniapp封装虚拟列表滚动组件 这里用到一个列表&#xff0c;然后数据可能有很多很多…&#xff0c;一次性全部渲染到dom上会卡顿&#xff0c;很废性能&#xff0c;于是用了这个虚拟列表就变丝滑很多很多。 组件mosoweInventedList 代码&#xff1a; <!-- 虚拟滚动列表组件&a…
阅读更多...
BASH and SH in SHELL scripts

BASH and SH in SHELL scripts

一、执行脚本的现象 为了测试一个小的功能&#xff0c;写了一个小脚本&#xff0c;类似的内容如下&#xff1a; #!/bin/shecho "start api test ......"for((i1;i<10;i)); do echo "cur id :" $i; done echo "end."执行一下&#xff0c;“…
阅读更多...
代码随想录Day67(图论 part04)

代码随想录Day67(图论 part04)

110.字符串接龙 题目&#xff1a;110. 字符串接龙 (kamacoder.com) 思路&#xff1a;没有思路 答案 import java.util.*;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();String beginStr sc…
阅读更多...
华为手机怎么打印文件？

华为手机怎么打印文件？

关于华为手机打印的问题&#xff0c;如果您有打印机&#xff0c;并且已经成功和华为手机相连&#xff0c;在解决上就要容易很多。 具体操作如下&#xff1a; 选择文件 文件来源&#xff1a;华为手机上的文件可以来自多个应用&#xff0c;如图库、备忘录、文件管理等&#xf…
阅读更多...
20240628模拟赛总结

20240628模拟赛总结

cf好了 让我们开始 T1 Two Regular Polygons 判断能不能构造出题中要求的正多边形 关键是n%m0 Two Regular Polygons #include<bits/stdc.h> using namespace std; int t; int n,m; int main() {cin>>t;for(int i1;i<t;i){cin>>n>>m;if(n%m0)co…
阅读更多...
C++与C#创建位图，是否需要区分RGB和BGR模式

C++与C#创建位图，是否需要区分RGB和BGR模式

在处理位图时&#xff0c;确实需要区分RGB和BGR模式&#xff0c;因为不同的库和API对颜色通道的排序有不同的约定。具体到C与C#&#xff0c;这一点也是需要注意的。 C 创建位图 使用GDI或WIC (Windows Imaging Component): 当你在C中使用这些Windows API创建或操作位图时&…
阅读更多...
MySQL——事务ACID原则、脏读、不可重复读、幻读

MySQL——事务ACID原则、脏读、不可重复读、幻读

什么是事务 要么都成功&#xff0c;要么都失败 一一一一一一一 1. SQL执行&#xff1a;A给B转账 A 1000 ---->200 B 200 2. SQL执行&#xff1a;B收到A的钱 A 800 B 400 一一一一一一一 将一组SQL放在一个批次中去执行~ 事务原则&#xff1a;ACI…
阅读更多...
学习笔记（linux高级编程）10

学习笔记（linux高级编程）10

IPC 进程间通信 interprocess communicate 三大类&#xff1a; 1、古老的通信方式 无名管道 有名管道 信号 2、IPC对象通信 system v BSD suse fedora kernel.org 消息队列(用的相对少&#xff0c;这里不讨论) 共享内存 信号量集 3、socket通信 网络通信 特…
阅读更多...
最新文章

Copyright @ 2022~2023