Я использую express для создания простого приложения для входа в систему. Я использую e js в качестве движка шаблонов. Файловая структура моего приложения -
package.json
server.js
routes
index.js
users.js
views
layouts.ejs
login.ejs
register.ejs
welcome.ejs
public
css
bitnami.css
bitnami. css содержит код css, который я загрузил с bootswatch
server. js имеет следующий код
const express = require('express');
const app = express();
const PORT = process.env.PORT;
const expressLayouts = require('express-ejs-layouts');
const path = require('path');
global.appRoot = path.resolve(__dirname);
console.log(path.join(global.appRoot,"public"));
//EJS
app.use(expressLayouts);
app.set('view engine','ejs');
//set static path
app.use(express.static(path.join(global.appRoot,"public")));
//Routes
app.use('/',require('./routes/index'));
app.use('/users',require('./routes/users'));
app.listen(PORT,()=>{
console.log(`server running at ${PORT}`);
})
index. js имеет
const express = require('express');
router = express.Router();
router.get('/',(req,res)=>{
res.render('welcome',{layout : 'layouts'});
})
пользователей. js имеет
const express = require('express');
router = express.Router();
router.get('/login',(req,res)=>{
res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
res.render('register',{layout : 'layouts'});
})
module.exports = router;
module.exports = router;
макеты. e js имеет следующий код
<!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>BNI EVENT</title>
<link rel="stylesheet" href="css/bitnami.css">
<script src="https://kit.fontawesome.com/9c59f82571.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<%- body %>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Если я загружаю файл css из CDN или использую промежуточное ПО stati c для каждого маршрутизатора, у которого есть что-то после '/' ex ('/ users ') файл css работает, но я хочу знать, есть ли менее избыточное решение этой проблемы
Если users. js имеет следующий код, файл CSS работает правильно
const express = require('express');
router = express.Router();
const path = require('path');
// setting the static middleware for this route
router.use(express.static(path.join(global.appRoot,"public")));
router.get('/login',(req,res)=>{
res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
res.render('register',{layout : 'layouts'});
})
module.exports = router;