获取速成版js格式的静电文件 [英] Getting Static files in express js

问题描述

我正在创建一个快速博客网站，发帖的app.js和路由器如下：

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;

我的主页链接到帖子： <a href="post/<%=blog._id%>">

问题是加载发布页面时找不到任何静电文件，我的所有静电文件都在公共文件夹中，指向post.ejs文件中的文件的链接也是正确的。我注意到的是，该应用程序正在尝试从公共/发布文件夹访问静电文件 未找到消息如下： GET /post/js/clean-blog.min.js 404 3.025 ms - 4266 为什么要尝试从js/的post/js获取文件。

推荐答案

指向静电资源的链接，例如：

<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">

如果您没有前导/，则它们是路径相对链接，浏览器将从当前网页的URL获取路径，并将其预先附加到HREF中的URL，然后从服务器请求组合的URL。这使得您的链接仅在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

但是，如果相同链接位于诸如/trips/france.html之类的页面中，则浏览器将从URL中获取/trips路径并将其合并，然后向您的服务器请求以下内容：

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

这将不适用于您的服务器，因为这不是它对静电资源的期望。

当您将前导/放在您的路径上时，这会告诉浏览器不要使用您想要的来自当前页面url的路径(只使用域名)，这样您就有了对同一静电资源的恒定url请求。

这篇关于获取速成版js格式的静电文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！