在 express js 中获取静态文件

Question

我正在用 express 创建一个博客网站。app.js 和 post 的路由器如下：

app.js:

var homeRouter = require('./routes/homeRouter');
var postRouter=require('./routes/postRouter');
var aboutRouter=require('./routes/aboutRouter');

//Importing model
var Blogs=require('./models/blog');
const Blog = require('./models/blog');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(expressLayouts);

const url='mongodb://localhost:27017/testblog';

mongoose.connect(url, { useNewUrlParser: true,useUnifiedTopology: true })
    .then((db) => {
        console.log("connected to server");
 
    })
    .catch((err) => {
        console.log(err + "cant connect");
    });

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', homeRouter);
app.use('/post',postRouter);
app.use('/about',aboutRouter);

postRouter.js:

var express=require('express')
router=express.Router();
const Blog = require('../models/blog');

router.route('/:BlogId')
.get((req,res,next)=>{
    console.log(req.params.BlogId)
    Blog.findById(req.params.BlogId)
    .then((blog)=>{
      res.render('post.ejs',{
        blog:blog,
        comments:blog.comments

      })
      .catch((err)=>{
        next(err)
      })
    
    })
})
module.exports=router;

我的主页 link 到 post : <a href="post/<%=blog._id%>">

问题是当加载 post 页面时 none 找到了静态文件，我的所有静态文件都在 public 文件夹中，并且link 到 post.ejs 文件中的文件也是 correct.What 我注意到该应用程序正在尝试从 public/post 文件夹访问静态文件 下面是未找到的消息： GET /post/js/clean-blog.min.js 404 3.025 ms - 4266 为什么它试图从 post/js intsted of js/.

获取文件

Answer 1

您的 link 到静态资源，例如：

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

需要有前导 /，例如：

<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

如果您没有前导 /，那么它们是“路径相对的”link，浏览器将采用当前 URL 的路径网页并将其添加到您的 href 中的 URL，并从您的服务器请求组合的 URL。这使得您的 link 仅在 URL 上没有路径（当它是顶级页面时）并且一旦主机页面不是顶级 URL 时才起作用，然后他们停止工作。

所以，如果这样：

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

在一个URL为/about.html的页面中，那么浏览器会请求：

/vendor/fontawesome-free/css/all.min.css

但是，如果相同的 link 出现在诸如 /trips/france.html 的页面中，那么浏览器将从 URL 获取 /trips 路径并将其合并将从您的服务器请求此：

/trips/vendor/fontawesome-free/css/all.min.css

这不适用于您的服务器，因为这不是静态资源所期望的。

当您将前导 / 放在您的路径上时，这会告诉浏览器不要使用您想要的当前页面的 URL 中的路径（仅使用域）您有一个常量 URL 请求相同的静态资源。

在 express js 中获取静态文件

Getting Static files in express js

javascript

routes

ejs

node.js

express