Question

我一直在使用json-server，它在设置应用程序以获取数据方面非常出色。现在，我想对它做更多的事情，所以我正在使用express，以便在需要时可以执行一些“后端逻辑”。

但是我正在努力使用json数据文件

到目前为止，我有这个：

app.get("/basket", function(req, res) {
  var basket = [
    {name: 'football', id:'spo-001', category: 'sport', quantity: 1, price: 80},
    {name: 'cricket ball', id:'spo-002', category: 'sport', quantity: 1, price: 10},
    {name: 'atlas', id:'geo-001', category: 'geog', quantity: 1, price: 50}
  ]
  res.status(200).send(basket);
})

因此，当我按此路线操作时，我可以获取购物篮数据，然后在我的react / redux应用程序中，增加其中一个的数量，然后立即更新后端（json-server），因此当刷新页面上，我的数据仍然存在。

但是，我有点不知道如何使用带有express的JSON文件。我刚刚找到了这个server.use('/api', jsonServer.router('db.json'));

然后我该如何在其中使用json数据呢？

app.get("/basket", function(req, res) {

  res.status(200).send(sendBackTheDataFromTheJsonFile);
})

Answer 1

使用fs模块读取json文件。

const fs = require('fs');


app.get("/basket", function(req, res) {
  fs.readFile('db.json', 'utf8', function (err, data) {
    if (err) throw err;
     let dbData = JSON.parse(data);
     res.status(200).send(dbData);

  });
})

如果要更新条目，请执行以下操作：

 app.put("/basket", function(req, res) {
      fs.readFile('db.json', 'utf8', function (err, data) {
        if (err) throw err;
         let dbData = JSON.parse(data);
         // Update data here.
         // You will have to figure out how to do it yourself
         // After you have update the entry, write the entire array back to the json file.
         updatedJSONData = JSON.stringify(dbData)
         fs.writeFile('db.json', json, 'utf8', function(err, data) {
            if (err) throw err;
            // Do something here
             res.status(200).send("Basket was updated");

         } );

      });
    })

在axios方法中，您必须将URL指定为/basket，并且该方法应为put

Answer 2

您需要将.json文件引入应用程序，然后将附加的内容发送回响应中。 const data = require('db.json')，然后res.status(200).send(data)

使用fs可能是更好的选择。

Answer 3

使用快速静态中间件可能会获得更大的成功。

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

https://expressjs.com/en/starter/static-files.html

如何使用Express，Axios和React更新JSON文件？

3 个答案: