Question

使用nodeJs，ExpressJS（~4）

这是我的结构：

controllers/searchController.js
public/javascripts/search.js (js client code that will run on browser)
public/search.html
server.js
app.js

searchController.js：

var express = require('express');
var router = express.Router();
var esService = require('../services/esService');
var Q = require('q');



var html_dir = './public/';
router.get("/home", function (req, res) {
    res.sendfile(html_dir + 'search.html');
})

router.get("/search", function (req, res) {
 ...
})

module.exports = router;

app.js：

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var searchController = require('./controllers/searchController');    
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(__dirname, '/public'));

app.use('/', searchController);

/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

search.html：

<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
 ........

<div id="tfheader">
    <form id="tfnewsearch" method="get" onsubmit="return handleClick()">
        <input id="myinput" type="text" class="tftextinput" name="q" size="21" maxlength="120">
        <input type="submit" value="search" class="tfbutton">
    </form>
    <div class="tfclear"></div>
</div>



<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="javascripts/prettyprint.js"></script>
<script src="javascripts/search.js"></script>


...
</body>
</html>

这是search.js：

function handleClick() {
    var inputParam = document.querySelector("#myinput").value;

    $.get('search?termToSearch=' + inputParam, function (responseText) {
        console.log(responseText);
        $("#resultlist").empty().append(prettyPrint(responseText));


    });

    return false;

}

现在，当我访问：http://localhost:3000/home时，我在浏览器上收到以下错误：

Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/javascripts/search.js
Request Method:GET
Status Code:404 Not Found

Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/javascripts/prettyprint.js
Request Method:GET
Status Code:404 Not Found

知道为什么吗？

Answer 1

你应该改变

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

为：

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

但是如果你真的想解决这个问题，那么最好为这样的静态文件使用前缀：

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

然后以这种方式加载您的Javascript文件：

<script src="public/javascripts/prettyprint.js"></script>
<script src="public/javascripts/search.js"></script>

Javascript客户端没有执行正确的nodejs / expressjs结构

1 个答案: