最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

路由参数导致 CSS 在使用 Node.js 和 Express 时无法加载

网站源码admin26浏览0评论

路由参数导致 CSS 在使用 Node.js 和 Express 时无法加载

路由参数导致 CSS 在使用 Node.js 和 Express 时无法加载

我正在使用 Node.js、Express 和 EJS 模板引擎构建一个简单的网站,但我无法让我的外部 CSS 文件加载到具有路由参数的路由上。我的代码如下所示:

const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");

app.use(express.static("public"));
app.set("view engine", "ejs");

app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});

app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});

Test1.ejs 和 Test2.ejs 是彼此完全相同的副本,一个是从另一个复制粘贴的。

我能够看到 CSS 文件在 Test1 上正确加载,但在 Test2 express 上发送 Test2.ejs 的 HTML 代替实际的 CSS 文件。这无需重新加载或更改任何内容。如果 CSS 没有在我的任何路线上正确加载,我就不会那么困惑,因为这表明我使用 express 的方式存在问题,但我无法弄清楚它如何在我的所有路线上正常工作其他路由并在使用路由参数时失败。我也试过实际使用路由参数,例如

app.get("/Test2/:route", function(req, res){
const routeParam = req.params.route;
res.render("Test2.ejs", {
    routeParam: routeParam
});

});`

我还在页面中显示了 routeParam 以确保其正常工作,并且确实如此,除了页面仍在获取页面的 HTML 代替正确的 CSS 文件,导致其格式不正确。

我很感激任何帮助,谢谢

回答如下:

感谢您查看此 CoderFF,您帮助我弄清楚了如何让它工作。看起来问题是我的 css 文件直接在公共文件夹中,而不是在其中的子目录中。 html 必须是这样的:

<link rel="stylesheet" type="text/css" href="/css/customStyle.css" />

它必须在 href 标记中包含前导 '/'。 我不知道它是如何在没有路由参数的路由上工作的,但它是。这同样适用于公共文件夹中 /images/ 文件夹中的图像。

发布评论

评论列表(0)

  1. 暂无评论