使用nodejs在浏览器中显示JSON文件

Question

我正在创建一个本地主机服务器并读取文件路径，然后读取json文件

我正在URL中传递文件路径。
像这样的东西： http：// localhost：3000 / C：/Users/Desktop/generated.json

服务器端代码

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var PORT = 3000;
var fs = require("fs");
var app = express();
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

const url = require("url");
app.use(function(req, res) {
  let k = req.originalUrl;
  file = k.slice(1);


  fs.exists(file, function(exists) {
    fs.readFile(file, "utf-8", (error, data) => {
      if (error) throw error;
      let jsonData = [];
      jsonData.push(data);
      console.log(jsonData);//just displaying in console
      console.log(data);
      res.render("./main.ejs", { jsonData: jsonData });
    });
  });
});

app.use(function(req, res, next) {
  next(createError(404));
});

app.listen(PORT, function() {
  console.log(`app is listening at port ${PORT}`);
});

这是使用ejs的客户端代码

<!DOCTYPE html>
<html>

<head contentType="application/JSON">


</head>

<body>
    <form>
            <h1>
            <%=JSON.stringify(JSON.parse(jsonData)) %>
        </h1>
            <br />
        <button name="Click to edit" type="submit" style="height:100px ;width:200px ;font-size:20px">
            Click to edit
        </button>
    </form>
</body>

</body>

</html>

显示的输出是这样的： 输出的链接如何显示

因此，我无法以正确的方式显示它。
知道我该怎么做吗？

即使我想对json文件进行更改并在目标位置反映更改

我尚未向编辑按钮添加任何功能。

Answer 1

我猜你是说你不想被“漂亮地印刷”，像

{
  "key": "value",
  "key2": "value2"
}

而不是1条长线...

如果是这样，那么您可以执行以下操作：

<code><pre><%=JSON.stringify(JSON.parse(jsonData), null, 2) %></pre></code>

stringify的第三个参数告诉它要使用多少空格作为缩进，并将其漂亮地将JSON打印到多行而不是1个长行。

<code>标记通常具有等宽字体的默认样式，这使字符排列更好。

<pre>标签告诉浏览器内容是预先格式化的； 空格和换行符应保留。

---

另外，请注意，您绝不应将上述代码暴露给公共互联网。 这是一个巨大的安全漏洞。 您允许任何人读取硬盘驱动器上的任何文件。 关于此的文章很多，但是这里有一个讨论这种安全风险的示例：

https://blog.rapid7.com/2016/07/29/pentesting-in-the-real-world-local-file-inclusion-with-windows-server-files/

Answer 2

请为此使用<pre>标记。

<pre>
    <%=JSON.stringify(JSON.parse(jsonData)) %>
</pre>

例：

 <html> <body> <h1> Below is the code without pre </h1> [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla" } ] <h1> Below is the code with pre </h1> <pre> [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla" } ] </pre> </body> </html>