Question

我正在创建一个localhost服务器并读取文件路径，然后读取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>

显示的输出是这样的： the link to the output how it is shown

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

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

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

Answer 1

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

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

而不是1个长行...

如果是这样，那么您可以这样做：

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

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

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

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

2 个答案: