NodeJS应用程序：试图链接时脚本/ main.js的错误404

当我去发布索引路由（http://localhost:3000/posts）时，找到了位于/ public/scripts文件夹中的main.js文件，但是当我去到帖子显示路由（... localhost：3000/posts /：id）或任何其他帖子路由，chrome的控制台会为main.js文件引发404错误。显然，它试图在/ views/posts目录中查找/脚本。NodeJS应用程序：试图链接时脚本/ main.js的错误404

http://imgur.com/2uNAgBw

这里是我的代码

app.js：

var express     = require("express"), 
    app      = express(), 
    bodyParser    = require("body-parser"), 
    mongoose    = require("mongoose"), 
    methodOverride   = require("method-override"); 

var postRoutes    = require("./routes/posts"); 

app.use(bodyParser.urlencoded({extended: true})); 
app.set("view engine", "ejs"); 
app.use(express.static(__dirname + "/public")); 
app.use(methodOverride("_method")); 

app.use("/posts",postRoutes); 

app.listen(3000, function(){ 
    console.log("application server is running") 
});

路线/ posts.js

var Post = require("../models/post"); 
var express = require("express"); 
var router = express.Router(); 
var middleware = require("../middleware"); 

//INDEX - show all colectives 
    router.get("/", function(req, res){ 
     console.log("get request at /posts"); 
     Post.find({}, function(err, allPosts){ 
      if(err){ 
       console.log(err); 
      } else { 
       res.render("posts/index", {posts: allPosts}); 
      } //if 
     }); // Post.find 
    }); //router.get 


//NEW - show form for creating new post 
    router.get("/new", middleware.isLoggedIn, function(req, res){ 
     console.log("get request at /posts/new"); 
     res.render("posts/new"); 
    }); //router.get 



//SHOW - show more info about a post 
    router.get("/:id", function(req, res){ 
     console.log("get request at /posts/" + req.params.id); 
     //find the post with provided id 

    Post.findById(req.params.id).populate("comments").exec(function(err, foundPost){ 
     if(err){ 
      console.log(err); 
     } else { 
      res.render("posts/show", {post: foundPost}); 
     } // if 
    }); //Post.findByID 
}); //router.get 

//EDIT - show edit post view 
    router.get("/:id/edit", middleware.checkPostOwnership, function(req, res){ 
     console.log("get request at /posts/" + req.params.id + "/edit"); 
     Post.findById(req.params.id, function(err, foundPost){ 
      res.render("posts/edit", {post: foundPost}); 
     }); //Post.findById 
    }); //router.get 


module.exports = router;

的意见/职位/ show.ejs

<!DOCTYPE html> 
<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <div id="masterContainer"> 
      <div class="container"> 
       ... 
      </div> 
     </div> 
      <!-- jQuery --> 
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
      <!-- Bootstrap's JavaScript--> 
     <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="scripts/main.js"></script> 
    </body> 
</html>

对不起，如果我误用了一些编程术语，我是网络开发新手，而不是英语母语人士。谢谢你。

来源

2017-08-25 gerardo mijares

我会添加一个静态快递中间件到app.js以避免这样的问题。

app.use('/scripts', express.static(_dirname + '/path/to/scripts'));

基本上，这是什么做的是确保你是哪个级别上您的应用程序，表示将永远知道在哪里找的文件夹脚本。

来源

2017-08-25 05:54:30

谢谢！这个似乎与@Raphael Serota的答案一起解决了这个问题（在脚本标签的src前面添加/）。虽然我仍然有一些疑问，因为两个 app.use（“/ scripts”，express.static（__dirname +“/ public/scripts”））;和 app.use（“/ scripts”，express.static（__dirname +“/ public”））;工作很好。彼此之间会有什么区别？ –

您应该检查文件“script/main.js”的可用性。

查找到的意见/职位/ show.ejs：

<script src="scripts/main.js"></script>

它看起来像服务器端代码的工作，但浏览器不能相对于当前的路由路径上加载此文件。

来源

2017-08-25 04:53:25 Digger2000

将/添加到脚本标记的src的前面。

<script src="/scripts/main.js"></script>

这样，该脚本标签总是请求相同的URL，无论它是在哪个页面。如果省略前导/，则请求的实际URL与当前URL相关。例如，如果您当前位于localhost:3000/foo/bar，那么没有前导/的脚本标记将向/foo/scripts/main.js发送请求。

来源

2017-08-25 09:39:41

NodeJS应用程序：试图链接时脚本/ main.js的错误404

回答

相关问题