在 nodejs 服务器中提供 html 文件答案

【问题标题】：Serve html file in nodejs server在 nodejs 服务器中提供 html 文件
【发布时间】：2018-03-10 20:57:38
【问题描述】：

我一直做得很好，直到我尝试将我的代码分成路由、控制器等。现在当我尝试加载 html 文件时出现错误。当我转到链接 http://localhost:3000/ 时，我收到此错误 Error: ENOENT: no such file or directory, stat '/views/index.html'

这是我的 routes.js 代码

module.exports = function (app) {
    var userController = require('../controllers/userController');

    // app.use(require('express').static('../app/views/index.html'));

    app.get('/', userController.renderHomePage);

    app.post('/find', userController.getUser);
    app.get('/get', userController.getUsers);
    app.post('/add', userController.addUser);
}

这是我的 userController.js 文件

var mongoose = require('mongoose');
var User = require('../models/user');

var express = require('express');

var app = express();
app.use(express.static('../app'));

exports.renderHomePage = function (req, res) {
    res.sendFile('/views/index.html');
}

exports.addUser = function(req,res){
    console.log(req.body);

    var newUser = new User({
        name : req.body.name,
        username : req.body.username,
        password : req.body.password
    });

    newUser.save(function(err){
        if(err){
            console.log(err);
        }
        else{
            console.log("User Saved successfully");
        }
    });

    res.send(req.body);
};

exports.getUsers = function (req, res) {
    // body...
    User.find({}, function(error, users){
        if(error){
            console.log(error);
        }
        else{
            res.send(users);
        }
    })
};

exports.getUser = function (req, res) {
    // body...
    console.log(req.body);
    var data = req.body.username;

    User.find({username : data}, function(err, user){
        if(err){
            throw err
        }
        else{
            console.log(user);
            res.send(user);
        }
    } );
};

这是我的 server.js

var express = require('express');
// var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var PORT = process.env.PORT || 3000;

var app = express();

var routes = require('./api/routes/routes');
routes(app);

var database = require('./config/database');

app.use(bodyParser.json());

app.listen(PORT, function(){
    console.log("Server is running on port "+PORT);
})

这是我的文件夹结构。

服务器启动没有错误。而且我认为我已经正确地给出了路径。但我得到了错误。谁能帮我这个？谢谢。

编辑： 这就是我将脚本链接到 html 文件的方式

<script src="/script/app.js"></script>

【问题讨论】：

标签： javascript html node.js static-files node-static

【解决方案1】：

以/ 开头的路径是绝对路径，意味着它根据根目录解析（在Windows 上，类似于C:\，在Linux 上只是/）。

您应该使用path 模块来获取相对于模块目录的文件的路径，如下所示：

var path = require('path');
var filePath = path.join(__dirname, 'relative/path/to/file');

__dirname 是一个特殊的模块范围变量，它提供了当前模块所在目录的路径。

【讨论】：

我添加/更改了这个 var filePath = path.join(__dirname,'../../app'); exports.renderHomePage = function (req, res) { res.sendFile(path.resolve(${filePath}/views/index.html)); } 现在我的 index.html 文件加载但脚本没有加载

【解决方案2】：

app.use(express.static('../../app'))

尝试在您的 userController.js 文件中添加另一个“..”，只有一个 .. 会将您放在 api 目录中。

【讨论】：

【解决方案3】：

包含“路径”模块并进行更改

res.sendFile('/views/index.html');

到

res.sendFile(path.resolve(`${__dirname}/views/index.html`))

【讨论】：

我添加/更改了这个var filePath = path.join(__dirname,'../../app'); exports.renderHomePage = function (req, res) { res.sendFile(path.resolve(${filePath}/views/index.html)); } 现在我的 index.html 文件加载但脚本没有加载
在您的浏览器中尝试下拉脚本/资产时是否有任何控制台错误，例如 404？这些资产的路径是什么？根据您的 express.static() 定义，它们是否存在于路径指向的位置？
是的。脚本位于app/scripts/ 路径中。这是我得到的控制台错误。 GET http://localhost:3000/script/app.js net::ERR_ABORTED GET http://localhost:3000/script/app.js 404 (Not Found)
您说您的脚本位于“app/scripts”路径中，但您的错误是尝试访问“脚本”路径（单数，没有最后一个“s”）。您能否确保您的 html 页面指向复数“脚本”路径并再试一次？
对不起。我的错。他们在app/script/（屏幕截图附在问题上）我已经编辑了问题，就像我将脚本（app.js）导入到我的html页面中一样

【解决方案4】：

我遇到了这个问题。您正在使用 res.send 发送 html 文件，但您的脚本不在静态可用文件可以访问的目录中。刚刚看到你的编辑。使用您的 EDIT，您正在接近它。更改脚本包含的 HTML 文件中的引用。

【讨论】：

在编辑中，我提到了我在 HTML 中引用脚本文件的方式。我没有看到任何其他包含它的方法，因为它是正确的路径。

【解决方案5】：

两个月了，问题解决了吗？

如果没有，您是否尝试过该代码：

app.use(express.static('app'));

您提供给 static 函数的路径是相对于您运行节点进程的目录的。

在您的情况下，您使用/从 server.js 文件（位于根目录）启动服务器，因此您提供给 static 函数的路径是相对于这个位置。

【讨论】：