Node.js 与 Express.js 入门 - 创建和使用静态资源

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,它使得 JavaScript 可以在服务器端运行。Express.js 是一个基于 Node.js 平台的 Web 开发框架,它提供了一系列功能强大的特性,简化了 Web 应用程序的开发过程。

在本文中,我们将介绍如何在 Node.js 和 Express.js 中创建和使用静态资源。

创建静态资源

静态资源是指不需要在服务器端进行处理的文件,包括 HTML、CSS、JavaScript、图片等。在 Express.js 中,我们可以使用 express.static 中间件来处理静态资源。

首先,我们需要在项目中创建一个名为 public 的文件夹,用于存放静态资源文件。然后,在 Express.js 中添加以下代码:

---------------------------------

这样,我们就可以在浏览器中访问 public 文件夹下的所有文件了。例如,如果我们在 public 文件夹下创建了一个名为 index.html 的文件,我们可以在浏览器中通过访问 http://localhost:3000/index.html 来访问它。

使用静态资源

在 Express.js 中,我们可以在 HTML 文件中通过相对路径来引用静态资源。例如,如果我们在 public 文件夹下创建了一个名为 style.css 的文件,我们可以在 HTML 文件中添加以下代码来引用它:

----- ---------------- -----------------

如果我们需要引用图片,可以使用以下代码:

---- --------------- ---------

需要注意的是,如果我们在 HTML 文件中使用绝对路径来引用静态资源,那么在服务器端处理请求时,会将绝对路径解析为相对于服务器根目录的路径。因此,我们应该尽量使用相对路径来引用静态资源。

示例代码

下面是一个完整的示例代码,用于创建和使用静态资源:

----- ------- - ------------------
----- --- - ---------

-- ---------
---------------------------------

-- ----
------------ ----- ---- -- -
  ---------------------- - ---------------------
--

-- ----
---------------- -- -- -
  ------------------- ------- -- ---- ------
--

在这个示例代码中,我们将 public 文件夹设置为静态资源文件夹,并在路由处理中返回 index.html 文件。当我们在浏览器中访问 http://localhost:3000 时,就可以看到 index.html 文件的内容了。

总结

在 Node.js 和 Express.js 中创建和使用静态资源非常简单,只需要使用 express.static 中间件来处理静态资源,并在 HTML 文件中使用相对路径来引用静态资源即可。希望本文能够对大家有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65051be495b1f8cacd1a2900


猜你喜欢

  • RxJS 中使用 switchMap() 函数取消已有请求并发起新请求

    RxJS 中使用 switchMap() 函数取消已有请求并发起新请求 RxJS 是现代前端开发中非常流行的函数式编程库,它提供了强大的工具来处理异步数据流。在处理 Ajax 请求时,我们通常希望能够...

    1 年前
  • Dockerfile 优化

    随着现代化应用的复杂性加大,Docker 已成为前端开发人员使用的必备工具之一。Dockerfile 是定义 Docker 镜像的文本文件,其中描述了如何构建 Docker 镜像和应用程序。

    1 年前
  • Custom Elements 与 Shadow DOM 的关系及应用技巧

    在 Web 前端开发领域中,Custom Elements 和 Shadow DOM 是两个非常重要的概念。它们的出现使得开发者们能够更加自由地创建和定义属于自己的定制化 Web 元素。

    1 年前
  • 如何解决 ESLint 对于 JSX 中的语法判断不精准的问题

    前言 在前端开发中,我们通常使用 ESLint 来对代码进行静态检查,以保证代码的质量和规范。然而,在使用 ESLint 检查包含 JSX 语法的代码时,有时会出现判断不精准的问题,导致一些错误的语法...

    1 年前
  • webpack-dev-server 开发服务器插件详解

    什么是 webpack-dev-server? webpack-dev-server 是一个开发服务器插件,它能够提供静态资源服务器和代码变化监听功能,让开发者可以实时预览到编译后的代码变化效果。

    1 年前
  • Redis 中 Hash 数据类型的内部实现机制解析

    在 Redis 中,Hash 数据类型是一种非常常用的 key-value 数据结构。它可以存储多个 field-value 对,常用于存储对象的属性值。本文将详细介绍 Redis 中 Hash 数据...

    1 年前
  • 测试框架 mocha.js 和 chai.js 入门

    前言 前端开发中,测试是一个不可或缺的部分。而测试框架的使用,能够帮助我们更快速、更准确地进行测试。本文将介绍两个常用的测试框架 mocha.js 和 chai.js,并提供详细的使用指南和示例代码,...

    1 年前
  • ES11 中的 `globalThis`:取代 `window`、`self`、`global`的全局对象

    在前端开发中,全局对象是一个非常重要的概念。早期,JavaScript 中定义的全局对象是 window,它只存在于浏览器环境中。但为了能够在其他环境下使用 JavaScript,比如服务端 Node...

    1 年前
  • ES6 的解构赋值将多个集合合并到一起

    ES6 的解构赋值将多个集合合并到一起 在 JavaScript 中,处理数组或对象时,经常需要检测或操作它们的元素或属性。ES6 提供了一种解构赋值的语法,可以将多个集合合并到一起,极大地简化了处理...

    1 年前
  • Promise 中 then 与 catch 执行顺序的前后转换技巧

    Promise 是 JavaScript 中一种常用的异步编程方式,其中 then 和 catch 用于处理 Promise 返回成功和失败的情况。在 Promise 的链式调用中,有时我们需要根据某...

    1 年前
  • 使用 React Native 开发 Android 应用的几种方式

    React Native 是一种开源的移动应用开发框架,它能够使用 React 的思想来快速构建高品质的原生移动应用。本文将介绍 React Native 开发 Android 应用的几种方式。

    1 年前
  • Enzyme 中使用 contains 方法判断组件是否包含某个元素的方法与技巧

    Enzyme 中使用 contains 方法判断组件是否包含某个元素的方法与技巧 在前端开发中,测试是非常重要的一环,特别是在 React 组件开发中,为了更好的保证代码质量和性能,我们需要对组件进行...

    1 年前
  • PWA 应用对 Web 安全的影响和解决方案

    随着移动设备的普及,Web 应用的安全性问题受到越来越多的关注。PWA(Progressive Web Apps)作为一种新型的 Web 应用技术,虽然在提高用户体验、优化性能等方面带来了许多好处,但...

    1 年前
  • 最全面的 Fastify 教程,从入门到精通

    Fastify 是一个快速、开箱即用的 Node.js Web 框架。它针对 Node.js 设计,可以处理高并发请求并提供出色的性能。在本篇文章中,我们将深入探讨 Fastify 框架的每个方面,从...

    1 年前
  • MongoDB 在 Docker 容器中的运行与使用指南

    前言 随着互联网的快速发展,数据量已经成为一个非常重要的课题。特别是在互联网应用程序的开发过程中,如何高效地存储和管理数据成为了一项严峻的挑战。为了解决这个问题,出现了越来越多的数据库产品。

    1 年前
  • 解决在 Angular CLI 上运行时出现的“无法找到”错误

    Angular CLI 是一个功能强大的工具,它可以加速 Angular 应用程序的创建和开发过程。然而,在运行应用程序时,可能会遇到各种错误。其中,最常见的错误之一就是“无法找到”错误。

    1 年前
  • 如何利用 Headless CMS 构建 CMS 站群

    前言 随着互联网技术的不断发展,人们对于网站的要求越来越高。传统 CMS 系统因为其耗费资源高、扩展性差、不好管理等问题已经逐渐不再适用。而为了解决这些问题,Headless CMS 应运而生。

    1 年前
  • 在 Node.js 中搭建 GraphQL Server:如何处理分页查询

    在 Node.js 中搭建 GraphQL Server:如何处理分页查询 GraphQL 是一种查询语言,它允许客户端根据他们的需要指定他们所需要的数据。在现代 Web 应用程序中,特别是在单页面应...

    1 年前
  • Socket.io 实现实时快递物流查询系统

    在现代物流行业中,实时查询快递物流信息是一项必不可少的服务,它能够为用户提供方便、快捷的物流体验。而 Socket.io 技术则能够帮助我们实现这一目标,它能够建立稳定的双向通信连接,将客户端与服务器...

    1 年前
  • 如何使用 ES12 中的 Proxy 实现数据劫持

    数据劫持是前端开发实现双向绑定和响应式的重要技术之一。在 ES5 中,我们可以通过 Object.defineProperty() 方法来实现数据劫持,但是这种方法比较麻烦且不够灵活。

    1 年前

相关推荐

    暂无文章