我不能在我的home.hsb(Handlebars)模板的头加载css文件。我使用node.js和express作为后端。也许我把路开错了,但我不知道失败是什么。
有人能说我哪里做错了吗?
我的文件夹结构:
public
-> home.css
-> login.css
-> signup.css
src
-> index.js
templates
-> home.hbs
-> login.hbs
-> signup.hbs
-> user.hbs
index.js:
const express=require("express")
const app=express()
const PORT = 80;
const path=require("path")
const hbs=require("hbs")
const collection=require("./mongodb")
const templatePath=path.join(__dirname, '../templates')
const cookieParser = require("cookie-parser");
const sessions = require('express-session');
//serving public file
app.use(express.static(__dirname + 'public'));
app.use(express.json())
app.set("view engine","hbs")
app.set("views",templatePath)
//app.use(express.urlencoded({extended:false}))
// creating 24 hours from milliseconds
const oneDay = 1000 * 60 * 60 * 24;
//session middleware
app.use(sessions({
secret: "thisismysecrctekeyfhrgfgrfrty84fwir767",
saveUninitialized:true,
cookie: { maxAge: oneDay },
resave: false
}));
// parsing the incoming data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// cookie parser middleware
app.use(cookieParser());
//username and password
const myusername = 'user1'
const mypassword = 'mypassword'
// a variable to save a session
var session;
app.get("/",(req,res) => {
// session=req.session;
// if(session.userid){
// res.send("Welcome User <a href=\'/logout'>click to logout</a>");
// }else
res.render("home")
});
home.hbs文件:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
<title>my travel</title>
</head>
<body>
<!-- Hamburger Menue-->
<div id="hamburger" class="hamburger-icon-container">
<span class="hamburger-icon">hgfhgf</span>
</div>
<p>Test</p>
<div id="test"></div>
<h1>Seite wo alle Bilder angezeigt werden</h1>
</body>
</html>
我的路径静态文件夹“public”似乎错误,但我不知道为什么?
1条答案
按热度按时间lnvxswe21#
您应该在
href
中的home.css
之前添加前导斜杠前面的斜杠
/
表示路径应该从应用程序的根目录开始。这样,浏览器将直接在public
目录中查找home.css
文件。@76484是正确的大约
path.join
你应该这样做
为了确保在使用Express提供静态文件时使用正确的路径,建议使用
path.join()
函数连接目录路径。path.join()
确保根据操作系统使用正确的路径分隔符。通过使用path.join()
,您可以避免与目录路径串联相关的潜在问题,并确保为静态文件提供一致和准确的路径。