ExpressJs--利用 express. static 托管静态文件（express内置中间件）

最新推荐文章于 2024-04-22 09:06:58 发布

muzidigbig

最新推荐文章于 2024-04-22 09:06:58 发布

阅读量1.3k

点赞数 1

分类专栏： nodejs 文章标签：静态资源的托管 express. static（）内置中间件 static node静态托管静态文件

本文链接：https://blog.csdn.net/muzidigbig/article/details/87374792

版权

nodejs 专栏收录该内容

35 篇文章 31 订阅

订阅专栏

将静态文件放在服务器上，客户端访问服务器来获取静态资源

通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

注意：Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。

下面解读为：在/static下面的/static/public目录下找（public目录可省略--只在static目录中存资源）

或

app.use("/static", express.static(__dirname + '/public'));

案例：

目录结构

ejs.js

let express = require('express');
let app = new express();

//配置ejs的模板引擎(固定)
app.set('view engine','ejs')
//设置模板的位置;app.set('view engine','ejs')不能删除
app.set('views',__dirname+'/views')

/*中间件app.use()
  express.static('public');给public目录下的文件提供静态web服务
*/
app.use(express.static('public'))
/*
//配置虚拟目录的静态web服务
app.use('/static', express.static('public'));
*/

app.get('/news',(req,res) => {
    res.render('news',{//
        news:["我是小新闻啊","我也是啊","哈哈哈哈"]
    })
})

app.listen(8008,'127.0.0.1')

重点：

/*中间件app.use()
  express.static('public');给public目录下的文件提供静态web服务
*/
app.use(express.static('public'))

news.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 中间件在服务器上默认在根目录下static文件夹;所以这里不用static 会默认去找-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h2>news你好！ejs</h2>
    <!-- 在.ejs文件中引入其他的外部.ejs文件 -->
    <%- include public/header.ejs%>
    <img src="images/logo.png" alt="">
    <ul>
        <%for(let i=0;i<news.length;i++) {%>
        <li><%=news[i]%></li>
        <%}%>
    </ul>
</body>
</html>

重点：

<!-- 中间件在服务器上默认在根目录下static文件夹;所以这里不用static 会默认去找-->
<link rel="stylesheet" href="css/style.css">

<!-- 引入服务器上的图片 -->
<img src="images/logo.png" alt="">

访问静态资源

效果：

若你在配置虚拟目录的时候报下面的错误：

可能原因1：没有cd到项目根目录中运行node **.js

可能原因2：我们配置静态托管的时候出现问题

app.use('/static',express.static(path.join(__dirname, 'public')));

或

app.use('/static',express.static('public'));//将文件设置成静态

可能原因3：没有加上

app.use(express.static('public'));

muzidigbig

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ExpressJs--利用 express. static 托管静态文件（express内置中间件）

将静态文件放在服务器上，客户端访问服务器来获取静态资源通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：注意：Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。下面解读为：在/static下面的/static/public目录下找（public目录可省略--只在static目录中存资...
复制链接

扫一扫