前言

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目录，用来存放静态资源。所以，我的项目结构是这样的:

下面来编写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 }

这个时候，我们就可以全路径访问了:

挂载的时候，甚至可以取一些奇奇怪怪的名字，

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

nginx配置静态资源html,通过nginx服务器访问静态资源(示例代码)
通过nginx服务器访问静态资源引言之前在做毕设的时候接触过nginx,那时候是用来做前后端分离的.一转眼都快一年了,nginx的相关内容也忘的差不多了. 有过接触前端的同学都知道,直接在标签的s ...
nodejs+express搭建服务器
1.Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完整功能 ...
nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）六在express中建立路由
创建express的过程以及开启html引擎我就不赘述了. var express = require('express'); var router = express.Router(); var m ...
虚拟服务器nodejs项目部署打包,nodejs+express搭建服务器及vue项目部署打包
一.Express 1.Node.js 2.Express Express是一个保持最小规模的灵活的Node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能安装: npm i ...
nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）六 html
使用的是express后台返回html. res.render('xxx(html名称)'); 有可能在浏览器里看到的是静态文件,是因为浏览器把它认为是文件格式,所以要设置头 res.set({'Co ...
nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）四存储提到的内容的次数
var cheerio = require('cheerio'); var iconv = require('iconv-lite'); var https= require('https'); va ...
nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）一爬取所有话题类型
首先爬取话题广场所有话题. var cheerio = require('cheerio'); var iconv = require('iconv-lite'); var https= requir ...
nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）五对提到的关键字（书名或者电影名）去百度百科上爬取介绍
var https = require('https'); var iconv = require('iconv-lite'); var cheerio = require('cheerio'); v ...
NodeJs本地搭建服务器，模拟接口请求，获取json数据
最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...

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

前言