一文带你掌握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要和存放的文件位置要一样。

相关文章
|
JavaScript 前端开发
js中访问节点和创建节点的方法都有什么?
js中访问节点和创建节点的方法都有什么?
74 0
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3月前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
28 1
JavaScript基础知识-数组基于索引访问
|
4月前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
205 8
|
4月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
4月前
|
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的便捷性及高效性,为初学者提供快速入门指南。
42 0
|
5月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
252 1
|
6月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
57 5
|
5月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
5月前
|
前端开发 JavaScript
前端 JS 经典:访问器成员
前端 JS 经典:访问器成员
23 0