javascript - Node.js:使用 express 加载 JSON 文件的路径错误
问题描述
我有一组这样制作的文件夹和文件:
viz
|_ app.js // node application
|_ public
|_ css
|_ bubblemap.css
|_ images
|_ nuts
|_ nuts0.json
|_ script
|_ bubblemap.js
|_ views
|_ bubblemap.hbs
气泡图.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(/"/g, '"').replace(/</, ''));
viewData.dataWork = JSON.parse('{{json dataWork}}'.replace(/"/g, '"').replace(/</, ''));
</script>
<script src='/script/bubblemap.js' rel='script'/><{{!}}/script>
</html>
气泡图.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
没有任何效果。
解决方案
这里的问题是资源可能无法加载,因为 webapp 没有服务它......这可以通过尝试访问 json 文件的 url 来证明。
那么这取决于你想如何服务JSON
:
文件系统
·Serve Static : /public/file.json
在此示例中,您会将文件放在公共可访问文件夹中,它们将作为文件系统中的静态内容提供。
app.use(express.static('public'))
创建一个名为 public 的文件夹并将 jsons 存储在其中,它们将可以在 webapp 的根目录下访问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")
})
更多关于快递: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 Doc)
就个人而言,主要用于生产,我会使用 NGINX 作为你的 node.js 应用程序的反向代理,并用它来提供静态内容。
推荐阅读
- react-native - Appium Inspector 无法在 iOS Element Hierarchy 中定位子元素
- razor-pages - Razor Pages:在链接中传递查询参数
- api - RISCV C 到 UART 的十六进制编译
- android - 如何将多个数据从 EditText(Main Activity) 传递到 ListView(Another Activity)
- html - 对齐图像以适合网站标题的右侧
- flutter - Flutter:是否有更好的方法来处理 if/else 语句中每个条件的调用 setState()?
- python - Python语音识别,Pyaudio不听但给出这个
- html - CSS:如何在文本布局上定义全宽边框?
- python - Django REST框架:在序列化程序中获取相关模型的字段
- javascript - 重新更新数据时 UseEffect 挂钩无法正常工作?