Node.js：使用express加載JSON文件時出現路徑錯誤

Question

我用這種方法制作了一組文件夾和文件：

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;
    }
)

這是節點應用程序文件。

viz / 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但沒有任何工程。

Answer 1

這里的問題是由於webapp無法提供資源，因此可能無法加載資源...這可以通過嘗試訪問json文件的url來證明。

然后，這取決於您要如何提供`JSON` ：

文件系統

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

在此示例中，您會將文件放在可訪問的公共文件夾中，並將它們用作文件系統中的靜態內容。

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

設置一個名為public的文件夾並將json存儲在其中，它們將可以在localhost:3000/nuts0.json應用程序的根localhost:3000/nuts0.json 了解有關在express中提供靜態文件的更多信息

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

在此示例中，您仍然在文件系統中使用JSON作為文件，但在Web可訪問（公共）文件夾中卻沒有該文件（如上述示例）。 取而代之的是，您在路由器路徑（GET請求）中將其作為資源使用，甚至可以應用保留檢查（如果請求具有必需的cookie，參數等）。

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

更多有關express的內容：sendFile

根據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

進一步了解req.params（Express API文件）

就個人而言，主要用於生產，我將使用NGINX作為您的node.js應用程序的反向代理，並使用它來提供靜態內容。

Node.js：使用express加載JSON文件時出現路徑錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2018-05-05 19:53:11

然后，這取決於您要如何提供`JSON` ：

文件系統

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

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

更多有關express的內容：sendFile

根據GET請求動態生成

Node.js：使用express加載JSON文件時出現路徑錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2018-05-05 19:53:11

然后，這取決於您要如何提供JSON ：

文件系統

· Serve Static : /public/file.json

· Send File : /private/file.json

更多有關express的內容：sendFile

根據GET請求動態生成

解決方案1
1 已采納 2018-05-05 19:53:11

然后，這取決於您要如何提供`JSON` ：

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

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