前端小白不迷路 - 今天来介绍下node中如何开放静态资源

Panda_Loncon
385 阅读2分钟

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

前言

哈喽，大家晚上好啊，周二也眨眼就过去了，我们继续更文的路途，前端小白不迷路 - 今天来介绍下今天来介绍下node中如何开放静态资源。

什么叫开放静态资源

首先明确什么是静态资源，比如说我们的网站里面，有样式表文件css，图片文件，js文件，开放静态资源就是表明这些允许被浏览器访问。后端允许前端上传图片或文件，前端上传完以后，后端会把图片以文件的形式存在文件夹中，我们在浏览页面的时候，比如商品图片地址， 就是服务器上存放图片的文件夹的地址，或者给个地址可以让我们访问到，这就是开放的静态资源。

具体做法

比如，允许客户端访问assets文件夹里面的文件，在express框架中，开放静态资源可以这样实现：

1.安装express开启node服务器,首先导入express包。

npm i express

image.png

2.app文件夹下，assets文件夹存放开放的静态资源，

3.新建app.js，内部代码开启node服务，代码如下：

// 开启node服务
const path = require('path')
const express = require('express')
const app = express()
app.listen(8002, () => {
    console.log('开放静态资源服务已经启动');
})

4.在终端通过node app.js运行app.js

可以看到打印'开放静态资源服务已经启动'，表示服务开启成功。

整体代码文件结构如图所示

image.png 在assets文件夹中，index.html中引入静态资源，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <img src="./wallhaven-g79mld.jpg" alt="">
</body>
</html>

app.js完整代码如下：

// 开启node服务
const path = require('path')
const express = require('express')
const app = express()
app.listen(8002, () => {
    console.log('开放静态资源服务已经启动');
})
// 通过应用级配置开放静态资源一定要用绝对路径
app.use(express.static(path.join(__dirname, 'assets')))

我们在浏览器中输入本地地址，就可以看到效果啦：

image.png

avatar
文章
阅读
粉丝