做淘宝客建网站要多少费用,惠阳网站推广费用,做网站金山区,中企动力做网站好吗Node.js安装与入门案例#xff1a;
需求#xff1a;点击按钮#xff0c;请求本地目录指定文件的内容#xff0c;并显示在页面上 刚入门肯定想着直接写相对路径请求指定路径数据就行了#xff0c;可是会发现不行。
网页运行在浏览器端#xff0c;通常后续要发布#xf…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. 安装项目依赖
虽然你刚开始可能不需要任何外部库但随着项目的发展你很可能需要添加一些。你可以使用npmNode 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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodybutton idbut发起请求/buttondiv idresult/div
/body
scriptdocument.getElementById(but).addEventListener(click,getData);function getData() {const filenametest.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
