express静态资源配置

最新推荐文章于 2024-07-23 09:57:45 发布

修罗_

最新推荐文章于 2024-07-23 09:57:45 发布

阅读量935

点赞数

分类专栏： node.js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45843676/article/details/125682723

版权

node.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Express.js创建一个简单的路由来读取并返回HTML文件，同时配置了静态资源目录，使得公共CSS和第三方库可以被正确引用。在views.js中，通过fs模块读取并发送'index.html'，而在app.js中，设置了路由并挂载了不同的路由器，包括用户、商品和视图路由，并配置了'/public'和'/node_modules'作为静态资源目录。

摘要由CSDN通过智能技术生成

目录如下

在这里插入图片描述

创建views.js

const router = require('express').Router();
const fs = require('fs');
const { resolve } = require('path');
router
    .get('/index.html', (req, res) => {
        // 这里设置utt-8否则返回的buffer数据格式，会自动下载
        fs.readFile(resolve('./')+'/views/index.html', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                return;
            }
            res.end(data.toString());
        });
    });
module.exports = router;

app.js

const express = require('express');
const userRouter = require('./route/users');
const goodsRouter = require('./route/goods');
const viewsRouter = require('./route/views');
const app = express();
// 挂载路由并且添加前缀
app.use('/users',userRouter);
app.use('/goods',goodsRouter);
app.use('/views',viewsRouter);
// 配置静态资源目录
app.use('/public',express.static('./public'));
app.use('/node_modules',express.static('./node_modules'));

// 启动服务器
app.listen(8888,()=>{
    console.log('8888');
})

views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/index.css">
    <link rel="stylesheet" href="/node_moduless/**">
    <!--由于上面配置了public这里可以直接/public开头-->
</head>
<body>
    <h1>首页</h1>
</body>
</html>