Question

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

我将我的前端缩减为非常基本的html和javascript，但仍然出现语法错误＆＃34;意外的令牌＆lt;＆＃34;。当我在浏览器中检查我的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”，它与最后一条规则匹配;所以服务器返回index.html的内容。

我不确定你对“自己运行index.html”的意思;如果您的意思是“访问file：//..../public/index.html”，它的工作原理是因为浏览器会尝试从文件系统加载coreTest.js。

尝试仅使用“静态”插件来提供“public”中的文件，并在客户端代码中使用此前缀：

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

并在客户端

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

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

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

Answer 2

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

而不是提供来自＆＃34; public＆＃34;的文件。我选择从＃34; api＆＃34;因为我已经设置了路由器来接收来自该路径的请求。

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

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

public
   -index.html
   -coreTest.js

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

server.js

coreTest.js

的index.html

2 个答案: