带有 css 和 js 的 Express 服务器静态 ejs 文件不起作用

Question

我正在尝试使用 node js 制作一个网站，并且我有 /home 和 /contact。一切正常，直到我把 css 和 js 都放在他们两个上，第二次调用没有 work.I 是指我首先访问 /home （一切正常），然后我 /contact 和页面保持不变。

const PORT = 7777;

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    app.use(require("express").static('./views/Home'));
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    app.use(require("express").static('./views/Contact'));
    res.render('Contact/contatct.ejs');
});

app.listen(
    PORT,
    () => console.log(`it's alive on http://localhost:${PORT}`)
)

提前谢谢

Answer 1

检查 'views/Contact/' 中的文件名是 'contatct' 还是 'contact'

const PORT = 7777;

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    app.use(require("express").static('./views/Home'));
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    app.use(require("express").static('./views/Contact'));
    // here
    res.render('Contact/contatct.ejs');
});

app.listen(
    PORT,
    () => console.log(`it's alive on http://localhost:${PORT}`)
)

如果没有错字，试试这个

const PORT = 7777;

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.get("/home", (req, res) => {
  console.log("get /home");
  res.render("Home/home.ejs");
});

app.get("/contact", (req, res) => {
  console.log("get /contact");
  res.render("Contact/contact.ejs");
});

app.listen(PORT, () => console.log(`it's alive on http://localhost:${PORT}`));

Answer 2

不要多次要求express。做需要express一次在你的模块
不要添加中间件来响应对特定页面的请求。 在应用程序加载时执行 添加它。
不要不要将视图模板与静态文件混用

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    res.render('Contact/contatct.ejs');
});

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

然后在您的 EJS 模板中：

<link rel="stylesheet" href="/static/file_name_in_static_folder.css">

或者

<img src="/static/image_used_in_one_template_but_stored_in_static_folder.png">

带有 css 和 js 的 Express 服务器静态 ejs 文件不起作用

Express server static ejs file with css and js does not work

html

ejs

static-files

node.js

express