Node.js学习(一)

时间:2024-07-07 07:15:36

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: 请求使用的方法,如 GETPOSTPUTDELETE 等。
  • headers: 请求头,一个 Headers 对象或一个包含请求头的对象字面量。
  • body: 请求体,通常用于 POST 或 PUT 请求。它可以是 BlobBufferSourceFormDataURLSearchParams 或 USVString 对象。注意,发送 GET 或 HEAD 请求时,不能包含 body
  • mode: 指定请求的模式,如 cors(默认值,跨源资源共享)、no-cors(仅用于同源请求)、same-origin(仅用于同源请求)或 navigate(仅用于导航请求)。
  • credentials: 指定是否包含用户凭证,如 cookie 或 HTTP 认证信息。可选值包括 omit(默认值,不发送凭证)、same-origin(仅同源请求发送凭证)或 include(跨域请求也发送凭证)。
  • cache: 指定请求如何影响浏览器缓存。可选值包括 default(默认值)、no-storereloadno-cacheforce-cacheonly-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>