一文带你掌握nest.js访问静态资源

简介: 一文带你掌握nest.js访问静态资源

前言

Nest的目标是成为一个与平台无关的框架。平台独立性使创建可重用的逻辑部分成为可能,开发人员可以在几种不同类型的应用程序中利用这些逻辑部分。从技术上讲,一旦创建了适配器,Nest就能够与任何Node HTTP框架一起使用。有两个开箱即用的HTTP平台支持:express和fastify。


无论使用哪种平台,它都会公开自己的应用程序接口。


NestExpressApplication

NestFastifyApplication

当我们把这种类型传递时,我们的app对象上会具有专门针对该平台的方法。但是注意一点,除非实际想要访问底层平台 API,否则无需指定类型。


文件配置

在昨天我们讲到nest.js文件上传 一文带你弄懂nest.js文件上传,我们拿到其中一个文件的路径试一下,我们要用到的是文件的path


image.png


 发现直接访问会报404错误

image.png

回到main.ts中配置一下,为nest指定我们要用的是Express,并且配置它的静态方法useStaticAssets()


它接受两个参数

path: 文件存放位置
options: 可选配置项 (用于匹配文件前缀)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets('uploads', { prefix: '/uploads' })
  await app.listen(3000);
}
bootstrap();

image.png


可以看到options里面配置项还是比较多的 ,只挑几种解释一下


dotfile: 点阵文件是各种程序的配置文件,它们帮助这些程序管理其功能。例如.config .bash等

etag:etag是URL的tag,用来标示URL对象是否改变,可用于缓存

maxAge: Cache-Control header的指令,会告诉客户端 index.html 将被视为 100000 毫秒的“新鲜”,因此在 maxAge 之前没有必要再次向服务器询问该文件过去。 客户端在此期间保留此文件,它与服务器缓存无关。

extensions: 文件拓展名

redirect: 重定向,当我们访问一个url时,如果重定向可以帮我们跳转到对应的url地址

prefix: 路由前缀


image.png

当我们配置好之后,再次访问已经可以了


image.png


总结

访问静态资源的方法还是简单的,要注意的就是path要和存放的文件位置要一样。

相关文章
|
5月前
|
JavaScript API 开发者
在Vue.js中设置方法时访问$vuetify实例的正确姿势。
总之,访问 `$vuetify`实例是一种直观而有效的方法,它使得在Vue组件中处理Vuetify相关的逻辑成为可能。务必留意正确使用 `this`上下文,并确保在执行任何操作之前,Vue组件实例已经正确初始化并且可用。这种方式在组件自身逻辑与Vuetify的界面表现层之间架起了一座桥梁,使得开发者可以通过书写组件代码来控制和优化用户界面。
88 14
|
4月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
140 1
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
446 12
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
97 1
JavaScript基础知识-数组基于索引访问
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
412 8
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
132 5
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
743 1
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
166 0
|
JavaScript 前端开发 API
揭秘Node.js如何轻松访问API:一个示例足以改变你的开发视角!
【8月更文挑战第21天】在现代Web开发中,API是软件间通信的关键。Node.js以其高效性,在API访问上独具优势。本文通过示例展示如何用Node.js访问API。首先确保已安装Node.js,然后使用npm安装`axios`库。创建`api_example.js`文件,并编写代码以访问JSONPlaceholder API获取数据。成功时,响应数据会输出至控制台;若失败,则打印错误。此示例展示了Node.js结合`axios`访问API的便捷性及高效性,为初学者提供快速入门指南。
194 0
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
388 3

热门文章

最新文章