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

前言

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 }

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

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