【问题标题】：Node.js : Path error loading JSON file using expressNode.js：使用 express 加载 JSON 文件的路径错误
【发布时间】：2018-05-05 16:38:53
【问题描述】：

我有一组这样制作的文件夹和文件：

viz
|_ app.js // node application
|_ public
        |_ css
                |_ bubblemap.css
        |_ images
        |_ nuts
                |_ nuts0.json
        |_ script
                |_ bubblemap.js
|_ views
        |_ bubblemap.hbs

bubblemap.hbs：

<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Bubblemap</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <link href='/css/bubblemap.css' rel='stylesheet'/>
    </head>

    <body>
    </body>

    <script> 
        var viewData = {}; 
        viewData.dataHome = JSON.parse('{{json dataHome }}'.replace(/&quot;/g, '"').replace(/&lt;/, ''));
        viewData.dataWork = JSON.parse('{{json dataWork}}'.replace(/&quot;/g, '"').replace(/&lt;/, ''));    
    </script>

    <script src='/script/bubblemap.js' rel='script'/><{{!}}/script>
</html>

bubblemap.js：

(function() {
    var files = ['../nuts/nuts0.json', '../nuts/nuts2.json'];
    var promises = [];

    promises.push(d3.json(files[0]));
    promises.push(d3.json(files[1]));

    Promise.all(promises)
        .then(makeBubblemap)
        .catch(function(err) {
            console.log('Error loading files!');
            throw err;
        });

    function makeBubblemap(data) {
        var nuts0 = data[0];
        var nuts2 = data[1];
        var home = viewData.dataHome;
        var work = viewData.dataWork;
    }
)

这是节点应用程序文件。

即/app.js：

// import...
var app = express();
const webapp_options = {'port': 3000};
initialize();

async function initialize() {
    await postgreSQLlib.connect();

    app.set('views', '' + __dirname + '/views'); 
    app.use(express.static(__dirname + '/public')); 
    app.set('view engine', 'hbs'); 
    app.engine('hbs', hbs.__express); 

    hbs.registerHelper('json', function(context) {
        return JSON.stringify(context);
    });

    app.get('/bubblemap', bubblemap);

    app.listen(webapp_options.port, function() {
        console.log('Ready & listening on http://localhost:' + webapp_options.port + '/');
    });
}

async function bubblemap(req, res) {
    // download data from db
    var dataWork = await postgreSQLlib.getTableHome();
    var dataHome = await postgreSQLlib.getTableWork();

    // create and fill object to pass to view
    var viewData = {}; 
    viewData.dataWork = dataWork;
    viewData.dataHome = dataHome;

    // pass data to view
    res.render('bubblemap', viewData);
}

我收到此错误：

加载文件时出错！错误：404 未找到

也就是说，nuts0 和nuts2 文件没有被正确拾取。我认为这是一个路径问题，但对我来说似乎是正确的。

我尝试：../nuts/nuts0.json、./nuts/nuts0.json、nuts/nuts0.json，但没有任何效果。

【问题讨论】：

您是否在根 ( / ) 上下文路径中部署应用程序？还是使用不同的上下文 (/app) ？这可以解释它。
@user2037710 感谢您的帮助。 viz/app.js 是一个文件，用于启动我需要用于可视化的服务器。要启动应用程序，请使用 /viz 文件夹中的 node app.js。我在主消息中添加了 viz/app.js 代码。

标签： javascript json node.js express filepath

【解决方案1】：

这里的问题是资源可能无法加载，因为 webapp 没有为它提供服务...... 这可以通过尝试访问json文件的url来证明。

那么这取决于您希望如何为`JSON` 提供服务：

文件系统

·`Serve Static : /public/file.json`

在此示例中，您会将文件放在公共可访问文件夹中，它们将作为文件系统中的静态内容提供。

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

创建一个名为 public 的文件夹并将 jsons 存储在其中，它们将可以在 webapp 的根目录localhost:3000/nuts0.json 下访问 Learn more on serving static files in express

·`Send File : /private/file.json`

在此示例中，您仍然有一个 JSON 作为文件系统中的文件，但不在 Web 可访问（公共）文件夹中（如上面的示例）。相反，在这里您将其作为路由器路径中的资源（GET 请求）提供服务，您甚至可以应用预先服务检查（如果请求需要 cookie、参数...）

app.get("/jsonFiles/nut0.json",(req,res)=>{
 res.sendFile(__dirname+"/private/nuts0.json")
})

根据 GET 请求动态生成

在此示例中，您的文件系统中没有文件，但您根据请求（来自数据库、内存等）实时构建它您还可以对这个应用预先服务检查（用户是否具有所需的权限、cookie、请求参数等。）

global.example_counter = 0; //in memory (global) variable
app.get("/jsonFiles/a-virtual-path-for-the-json",(req,res)=>{
 example_request_counter++
 res.json({"total requests":example_request_counter})
})

"jsonFiles" 不需要存在，即webapp的路由器的路径最后提供的是res.send / res.json中的内容

global.inMemoryDB = { //in memory (global) variable
 "nuts0":{"data":"the universe is in fact a multiverse"},
 "nuts1":{"data":"tesla was bright"},
 "nuts2":{"data":"sugar kills..."},
}; 
//router path
app.get("/jsonFiles/:j",(req,res)=>{
 if(inMemoryDB[req.params.j]){res.json(inMemoryDB[req.params.j])}
 else{res.json({"error":"non-existing virtual file requested"}
)}
// http://localhost:3000/jsonFiles/nuts0 will serve you the inMemory json

Learn more on req.params (Express API Doc)

就个人而言，主要用于生产，我会使用 NGINX 作为你的 node.js 应用程序的反向代理，并用它来提供静态内容。

【讨论】：

那么这取决于您希望如何为JSON 提供服务：

文件系统

·Serve Static : /public/file.json

·Send File : /private/file.json

More on express : sendFile

根据 GET 请求动态生成

那么这取决于您希望如何为`JSON` 提供服务：

·`Serve Static : /public/file.json`

·`Send File : /private/file.json`