关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验

2023-11-19

前言

NodeJs是一个能让前端开发工程师变成全栈工程师的神器。最近在搞一个私活,需要上传图片到服务器存储。按照以前的想法,是用Java写代码搭服务器。奈何,大学毕业后就一直在搞前端和安卓开发。Java写服务端的技术已经忘得差不多了。好在JS功底还不错,于是乎想到了用JS写服务端代码。这自然就和node离不开了。图片上传涉及到静态资源服务器的建立。经过摸索,使用express搭建静态资源服务器,很简单,但是坑也很多。下面就来讲讲我的填坑之旅。

一、创建一个空项目

前提你要安装了node的环境

1、初始化项目

新建一个空的文件夹,然后cd到这个目录,运行cmd命令:

npm init

这一步的作用主要是生成package.json这个配置文件

2、安装express依赖

npm i express --save

我这里加了–save指令,这样可以将express依赖信息保存在package.json文件里面。也建议这样做。
安装完成后,会在根目录生成node_module文件夹。至此,我们所需要的环境就准备好了。

二、编写服务器脚本

我习惯先新建一个src目录,然后将源代码写在里面。服务器运行脚本,我命名为server.js。然后,我在根目录建立一个resource目录,用来存放静态资源。所以,我的项目结构是这样的:
strcture
下面来编写server.js代码:

const express = require('express')
const server = express()

const startServer = () => {
  server.use(express.static('resource')) //设置静态资源访问目录

  server.listen(1085, '127.0.0.1', () => {
    console.log(`服务已经启动:http://127.0.0.1:1085`)
  })
}


module.exports = { startServer }

很简单的几行代码。然后我将启动方式单独导出了。接着在main.js中引入,然后调用:

const { startServer } = require('./src/server')

startServer()

这时候,我们用node指令运行这个main.js就能启动服务器了:

在这里插入图片描述
我们只需要在浏览器输入:

http://127.0.0.1:1085/test.png

就能访问到这张图片:
在这里插入图片描述

思考

1、如果目录非一级目录,比如只是resource里面的more目录,该怎么写?

在这里插入图片描述
这个时候,我们就修改一下server.js的脚本,

const express = require('express')
const server = express()

const startServer = () => {
  server.use(express.static('./resource/more')) //设置静态资源访问目录

  server.listen(1085, '127.0.0.1', () => {
    console.log(`服务已经启动:http://127.0.0.1:1085`)
  })
}


module.exports = { startServer }

再访问:

http://127.0.0.1:1085/test.png

在这里插入图片描述
会报访问不到。这是正确的。
然后我们访问more目录下的文件:

http://127.0.0.1:1085/airfrozen.png

在这里插入图片描述
成功了!

express会将http://127.0.0.1:1085/转发为你项目里面设置的静态资源目录地址。因此,我们不用输入设置的静态资源目录名字就能直接访问。

2、我就想要加上静态资源目录名字访问,该怎么做?

修改server.js。在express挂载静态资源目录的时候,加上虚拟路由。

const express = require('express')
const server = express()

const startServer = () => {
  server.use('/resource/more',express.static('./resource/more')) //设置静态资源访问目录

  server.listen(1085, '127.0.0.1', () => {
    console.log(`服务已经启动:http://127.0.0.1:1085`)
  })
}


module.exports = { startServer }

这个时候,我们就可以全路径访问了:
在这里插入图片描述
挂载的时候,甚至可以取一些奇奇怪怪的名字,
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验 的相关文章

随机推荐

  • B站粉丝数显示器,播放数、获赞数失效解决。

    之前在B站看见很多人做B站粉丝数显示器 于是便在网上买了一块ESP8266的开发版回来尝试着折腾一个出来 便在网上搜索适合买回来的开发板和0 96 oled显示器的代码 显示部分的主要代码是在 果果小师弟的博客上找到的 然后自己又找了个可以
  • WORD中字号没有中文编号的解决办法

    今天一同事反映说 WORD中没有像 五号 四号 之类的字号 只有数字字号如 8 72 解决过程如下 一 删除office中normal dot模版文件 不行 二 开始 gt 程序 gt Microsoft Office 工具 gt Mics
  • 参数与超参数

    写在前面 关于训练深度学习模型最难的事情之一是你要处理的参数的数量 无论是从网络本身的层宽 宽度 层数 深度 连接方式 还是损失函数的超参数设计和调试 亦或者是学习率 批样本数量 优化器参数等等 这些大量的参数都会有网络模型最终的有效容限直
  • ftp的主动模式active mode和被动模式 passive mode的配置和区别

    共同点 客户端先发起命令连接 不同点 主动模式 服务端发起数据连接 客户端生成随机数据端口 被动模式 客户端发起数据连接 客户端和服务端都是随机数据端口 客户端与服务器的命令连接 服务器返回命令 PORT 2024 告诉客户端 服务器 用哪
  • SpringData使用ES报错 org.elasticsearch.index.mapper.MapperParsingException: No type specified for field

    原因就像mysql的字段要跟Java基本类型对应一样 ES的字段也要与Java的基本类型相对应 一 而且这个最好新建一个ES索引库 否则可能会有问题 我用Restful操作初始化了一个ES索引库 并增加数据 再用Java操作的时候 Spri
  • 父组件传来的值和子组件自己定义的data的值有什么区别?

    props和data的区别 1 data中的数据是组件内自己的数据 状态 可以随意修改data中的值 2 props的数据是父组件传递过来的数据 是只读的 只能供子组件使用 不能随意修改 下面进行演示 1 首先创建一个父组件HomeView
  • Windows Server 2019下搭建FTP服务器

    在服务器管理器中选择 添加角色和功能 连续点击下一步 跳过开始之前和安装类型界面 在服务器选择界面中 选择从服务器池中选择服务器 默认选中一台服务器 选中web服务复选框 点击下一步 选中FTP服务器复选框 点击安装 安装完毕后 可以在Wi
  • [YOLOv8/YOLOv7/YOLOv5系列算法改进NO.5]改进特征融合网络PANET为BIFPN(更新添加小目标检测层yaml)

    前 言 作为当前先进的深度学习目标检测算法YOLOv5 已经集合了大量的trick 但是在处理一些复杂背景问题的时候 还是容易出现错漏检的问题 此后的系列文章 将重点对YOLOv5的如何改进进行详细的介绍 目的是为了给那些搞科研的同学需要创
  • 从 微信 JS-SDK 认识 JSBridge

    前言 前段时间由于要实现 H5 移动端拉取微信卡包并同步卡包数据的功能 于是在项目中引入了 微信 JS SDK jweixin 1 相关包实现功能 但也由此让我对其产生了好奇心 于是打算好好了解下相关的内容 通过查阅相关资料发现这其实属于
  • [Linux-进程控制] 进程创建&进程终止&进程等待&进程程序替换&简易shell

    Linux 进程控制 进程创建 进程终止 进程等待 进程程序替换 简易shell 进程创建 fork函数回顾 双返回值 为什么要给子进程返回0 给父进程返回子进程的pid 如何理解fork会有两个返回值 调用fork之后 fork常规用法
  • Mac(M1)安装VMware虚拟机及Linux系统

    Mac M1 安装VMware虚拟机及Linux系统 网上大部分版本都是基于Intel芯片的 按照步骤安装后 M1芯片的Mac会报错 以下是M1芯片的Mac安装VMware虚拟机及Linux系统方法 1 安装VMware Fusion ht
  • python中的集合(Set)

    python中的集合 Set 在Python中 集合 Set 是一种无序 无重复元素的数据结构 集合通过花括号 或者使用 set 函数进行创建 与其他容器类型 如列表和字典 不同 集合中的元素是不可变的 不可被修改 且没有固定的顺序 特点
  • linux服务器上tomcat设置路径

    tomcat配置通过域名访问项目 是修改conf server xml里面的配置信息实现 具体如下 1 修改Connector节点的port属性值
  • 嵌入式Linux开发环境搭建

    嵌入式Linux开发环境搭建 工欲善其事 必先利其器 嵌入式Linux开发之路的开端 就是搭建开发环境 有了完善的开发环境 后面的学习之路就会方便很多 开发环境也是一个很浪费时间的过程 环境的搭建也非常多坑 希望大家能够快速搭建好环境 能够
  • 重识Java动态代理(二)Spring中声明式编程实现

    一 声明式编程的好处 声明式编程的好处有 代码简洁 不需要写很多相同的实现代码 对使用者屏蔽了实现细节 使用者只需要声明要做什么 而不关心怎么做 二 适用场景 声明式编程适合封装公共的 不涉及业务逻辑的基础服务 例如远程调用 数据库访问 三
  • Java面向对象——多态、Object类、instanceof关键字以及final关键字

    多态的概念 1 多态是指同一个方法调用可以在不同的对象上有不同的表现 即同一种方法调用方式适用于不同的数据类型 编译时和运行时 编译时期调用的是父类中的方法 但运行时期会根据实际的对象类型来调用适当的方法 这种行为称为动态绑定 即运行时决定
  • 提取labelme标注文件信息(json转txt)文本检测四边形坐标标注提取

    功能说明 将labelme标注的json文件中的坐标和label信息提取到txt文件中 一般用于检测类任务 ps 这里使用 四边形 类别 标注方式 每个点坐标包括x和y 所以总共输出8个坐标值和1个label值 软件 labelme 3 1
  • DCMTK读取DICOM文件头信息的三种方法

    Howto Load File Meta Header Here s an example that shows how to load the File Meta Information Header of a DICOMfile wit
  • 2020年pubg服务器维护时间,7月25日pubg维护一般多久 绝地求生正式服稳定更新

    2018年7月25日 绝地求生正式服进行了官方维护 时间大约持续3小时 主要维护内容是提高客户端稳定性 维护结束后 玩家需重新启动steam客户端获取更新 自定义服务器匹配 为了让每位玩家可以创建自己的游戏房间 我们以不限号测试的方式开放了
  • 关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验

    前言 NodeJs是一个能让前端开发工程师变成全栈工程师的神器 最近在搞一个私活 需要上传图片到服务器存储 按照以前的想法 是用Java写代码搭服务器 奈何 大学毕业后就一直在搞前端和安卓开发 Java写服务端的技术已经忘得差不多了 好在J