Question

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

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>

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

Answer 1

您应该检查文件的可用性＆＃34; script / main.js＆＃34;。

查看views / posts / show.ejs：

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

看起来服务器端代码有效，但浏览器无法在相对于当前路由的路径上加载此文件。

Answer 2

我会在 app.js 中添加一个静态快速中间件，以避免出现类似问题。

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

基本上，它的作用是确保您的应用程序中的任何级别，快递总是知道在哪里查找文件夹脚本。

Answer 3

在脚本代码的/前面添加src。

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

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

NodeJS app：尝试链接时脚本/ main.js的错误404

3 个答案: