在本地服務器上編輯JSON文件

Question

我正在開發要在本地服務器上托管的項目，我的目標是能夠編輯和保存一個JSON文件，該文件將存儲我的項目的配置。 我能夠讀取文件並使用axios請求對其進行訪問，但是我對如何通過前端編輯和保存文件感到有些困惑。

Server.JS文件

const fs = require('fs');
var userSettings = JSON.parse(fs.readFileSync('config.json'));

var express = require('express');

var app = express();
var server = app.listen(3000, listening);

function listening(){
    console.log("listening ...")
}
app.use(express.static('public'))



app.get('/api/settings', getSettings);
function getSettings(req,res){
    res.send(userSettings)
}

config.json

{
  "CurrentOperation": {
    "numberOfReadingsToBeAveraged": 30,
    "totalNumberOfSensorRunsBeforeRunEnds": 236,
    "waitTimeBetweenSensorReadingsInSeconds": 3342,
    "nameOfDataFileOutput": "DataOutput"
  },
  "Mash": {
    "numberOfReadingsToBeAveraged": 40,
    "totalNumberOfSensorRunsBeforeRunEnds": 203,
    "waitTimeBetweenSensorReadingsInSeconds": 382,
    "nameOfDataFileOutput": "MashOutput"
  },
  "Boil": {
    "numberOfReadingsToBeAveraged": 12,
    "totalNumberOfSensorRunsBeforeRunEnds": 23,
    "waitTimeBetweenSensorReadingsInSeconds": 32,
    "nameOfDataFileOutput": "BoilOutput"
  },
  "Ferment": {
    "numberOfReadingsToBeAveraged": 3,
    "totalNumberOfSensorRunsBeforeRunEnds": 13,
    "waitTimeBetweenSensorReadingsInSeconds": 32,
    "nameOfDataFileOutput": "FermentOutput"
  }
}

公共目錄中的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">

        <ul>
            <li v-for="(settings,key) in userSettings">
              {{key}}:{{settings}}
            </li>

        </ul>
      </div>

</body>
<script>
var app = new Vue({
    el: '#app',
    data (){
        return{
            userSettings:'',
        }
    },
    mounted(){
        axios
            .get('api/settings')
            .then(res=>(this.userSettings = res.data))
            .catch(function (error) {
            // handle error
            console.log(error);
  })
    }
  })
</script>
</html>

Answer 1

您將需要創建一個新端點來接受一個POST請求，該請求將接受您的新配置並觸發服務器上文件的重寫。

app.post('/api/settings', postSettings);

function postSettings(req,res){
  var fileContent = JSON.stringify(req.body.settings);

  fs.writeFile('config.json', content, 'utf8', function (err) {
    if (err) {
      res.status(400).send({error: 'some error'})
    } else {
      res.send({message: 'success'})
    }
  }); 
}

一些注意事項：

上面的代碼假設前端將發送一個對象，該對象帶有一個名為settings的字段，其中將包含您要寫入的文件的詳細信息。
您可能知道這一點，但是建議您將數據存儲在數據庫中，而不是允許前端在服務器上重寫文件

在本地服務器上編輯JSON文件

問題描述

1 個解決方案

解決方案1
0 2018-10-15 14:56:08

在本地服務器上編輯JSON文件

問題描述

1 個解決方案

解決方案1 0 2018-10-15 14:56:08

解決方案1
0 2018-10-15 14:56:08