Javascript 文件未加载到 MEAN 堆栈应用程序中

Question

我正在尝试学习 MEAN 堆栈来创建单页应用程序。我能够让我的后端路由正常工作。我已经使用 Postman 对其进行了测试并获得了我期望的结果，但是我无法让我的前端与后端正确对话。

我将我的前端简化为非常基本的 html 和 javascript，但仍然出现语法错误 "Unexpected token <"。当我在浏览器中检查我的 coreTest.js 文件时，我看到它只是我的 html 文件的副本，而不是 javascript 代码。

当我运行 index.html 本身（没有 server.js） coreTest.js 运行就可以了。我不确定为什么运行宁我的 server.js 文件时，我的 coreTest.js 文件不能正常工作。

server.js

// Setup

var express = require('express');
var app = express();            // create app w/ express

var mongoose = require('mongoose');             // used for MongoDB connection
var morgan = require('morgan');             // log requests to the console
var bodyParser = require('body-parser');            // pull information from HTML POST
var methodOverride = require('method-override');            // simulate DELETE and PUT requests


// Configure

mongoose.connect('localhost:27017/test');       // connect to localhost db "test"

// varify connection
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error: '));

app.use(express.static(__dirname + '/public'));         // set static files location
app.use(morgan('dev'));         // log every request to console
app.use(bodyParser.urlencoded({'extended':'true'}));        // parse application/x-www-form-url
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse vnd.api+json as json
app.use(methodOverride());

// define db model
var Todo = mongoose.model('Todo', {
    text: String
});


var router = express.Router();

router.route("/todos")

    .get(function(req, res) {
        Todo.find(function(err, todos) {
            if (err)
                res.send(err);

            res.json(todos);
        });
    })

    .post(function(req, res) {
        var todo = new Todo();
        todo.text = req.body.text;

        todo.save(function(err) {
            if (err)
                res.send(err);

            res.json({mes: "Todo item created"});
        })
    });

router.route("/todos/:todo_id")

    .delete(function(req, res) {
        Todo.remove( {
            _id: req.params.todo_id
        }, function(err, todo) {
            if (err)
                res.send(err);

            res.json({mes: "Successfully deleted"});
        });
    });

// route to application
router.route("*")
    .get(function(req, res) {
        res.sendfile('./public/index.html');
    });

// Register our routes
app.use('/api', router);

// Listen, start node app
app.listen(8080);
console.log("app listening on port 8080");

coreTest.js

alert("ping");

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Starter MEAN Single Page Application</title>
    <script type="text/javascript" src="coreTest.js"></script>

</head>
<body>

    I did it!! Wooo!!

</body>
</html>

Answer 1

我怀疑问题出在

之间

app.use(express.static(__dirname + '/public'));

和

// route to application
router.route("*")
.get(function(req, res) {
    res.sendfile('./public/index.html');
});

当您运行服务器时，您的客户端代码正在尝试加载 "coreTest.js"，这与最后一条规则相匹配；所以服务器 returns index.html 的内容。

我不确定你说的 "runing index.html by itself" 是什么意思；如果您的意思是 "visiting file://..../public/index.html"，它可以工作，因为浏览器会尝试从您的 文件系统 .

加载 coreTest.js

尝试使用 "static" 插件仅提供来自 "public" 的文件，并在客户端代码中使用此前缀：

app.use("/public", express.static(...))

并在客户端

<script type=".." src="public/coreTest.js"></script>

获取路径权限将取决于您磁盘上的内容。

这也可能有帮助：static files with express.js

Answer 2

我能够使用 phtrivier 推荐的方法解决我的问题。

我选择从 "api" 提供文件，而不是从 "public" 提供文件，因为我已经将路由器设置为也从该路径接收请求。

app.use("/api", express.static(__dirname + '/public'));

我不需要在 html 中更改对 coreTest.js 的引用，因为我的文件是用根目录中已经存在的 coreTest 组织的，如下所示：

public
   -index.html
   -coreTest.js

Javascript 文件未加载到 MEAN 堆栈应用程序中

Javascript file not loading in MEAN stack application

javascript

html

mean-stack

server.js

coreTest.js

index.html