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;让用户无需深入了…
阅读更多...
【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的不足 …
阅读更多...
golang结合neo4j实现权限功能设计

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

neo4j 是非关系型数据库之图形数据库&#xff0c;这里不再赘述。 传统关系数据库基于rbac实现权限, user ---- role ------permission,加上中间表共5张表。 如果再添上部门的概念&#xff1a;用户属于部门&#xff0c;部门拥有 角色&#xff0c;则又多了一层&#xff1a; user-…
阅读更多...
数据加密解密和哈希的解析

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

[S1301]数据的加解密 对提供的原始数据&#xff08;字符串或者二进制数组&#xff09;进行加密是数据保护框架体提供的基本功能&#xff0c;接下来我们利用一个简单的控制台程序来演示一下加解密如何实现。数据的加解密均由IDataProtector对象来完成&#xff0c;而该对象由IDa…
阅读更多...
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…
阅读更多...
代码随想录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…
阅读更多...
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通信 网络通信 特…
阅读更多...
TF/IDF算法

TF/IDF算法

第1关&#xff1a;去除停用词 任务描述 本关任务&#xff1a;根据本关所学有关停用词的知识&#xff0c;编写使用停用词表去除停用词的程序并通过测试用例。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 停用词的意义&#xff1b; 去除停用词的步骤。 …
阅读更多...
浅谈Web性能测试（原创）

浅谈Web性能测试（原创）

一、性能测试不是什么高技术的活&#xff1a; 说到性能测试&#xff0c;很多工作时间较短的新同事或者应届生就很害怕。 为什么害怕&#xff0c;因为感觉无从下手&#xff0c;不知道该做什么、怎么做、做到什么程度&#xff1f; 一听性能测试首先想到的是各种专业的性能测试…
阅读更多...
ThingsKit物联网平台功能解析

ThingsKit物联网平台功能解析

随着物联网技术的飞速发展&#xff0c;各种物联网平台应运而生&#xff0c;为设备管理和数据集成提供了强大的支持。ThingsKit物联网平台以其全面的功能和灵活的配置&#xff0c;成为行业中的一大亮点。本文将详细解析ThingsKit物联网平台的功能清单&#xff0c;带您深入了解该…
阅读更多...
oracle数据库默认表空间详解

oracle数据库默认表空间详解

文章目录 oracle数据库默认表空间列表 oracle数据库默认表空间列表 系统表空间&#xff08;System Tablespace&#xff09; 系统表空间包含了系统级别的元数据&#xff0c;如数据字典、系统表和存储过程等。例如SYSTEM表空间用于保存数据库的数据字典、PL/SQL程序的源代码和解释…
阅读更多...
【C语言】分支（选择）和循环语句

【C语言】分支（选择）和循环语句

目录 简述选择语句简述if语句单if结构语法格式 if-else结构语法结构 语法结构 循环结构break和continuewhile循环语法结构 for循环语法结构 do while循环语法结构 简述 在c语言中分支和循环语句是极其重要的&#xff0c;就像生活中你难免要做一些判断和循环往复做一些事。 选…
阅读更多...
Python习题 055：0 == False 计算结果是？

Python习题 055：0 == False 计算结果是？

阅读更多...
SpringBoot 中的参数校验：构建健壮应用的基石

SpringBoot 中的参数校验：构建健壮应用的基石

前言 在开发Web应用时&#xff0c;处理用户输入是不可避免的一环。然而&#xff0c;用户输入往往充满不确定性&#xff0c;可能是格式不正确、类型不匹配&#xff0c;甚至包含恶意内容。为了确保应用的稳定性和安全性&#xff0c;对输入参数进行有效校验显得尤为重要。Spring …
阅读更多...
【触想智能】工业平板电脑在新能源领域上的应用分析

【触想智能】工业平板电脑在新能源领域上的应用分析

工业平板电脑是一种具有高性能和稳定性的计算机设备&#xff0c;适用于在恶劣环境下进行数据采集、运营管理和现场操作。 随着新能源技术的快速发展&#xff0c;工业平板电脑不断地得到应用&#xff0c;并且已成为新能源领域中的重要工具之一。本文将从四个方面探讨工业平板电脑…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023