[英]Edit JSON file on local server
I'm working on project that i'm hosting on a local server, my goal is to be able to edit and save a JSON file that will store the configurations for my project. 我正在开发要在本地服务器上托管的项目,我的目标是能够编辑和保存一个JSON文件,该文件将存储我的项目的配置。 I'm able to read the file and access it using axios requests but i'm a little lost as to how I would be able to edit and save the file via the front-end. 我能够读取文件并使用axios请求对其进行访问,但是我对如何通过前端编辑和保存文件感到有些困惑。
Server.JS file 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 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 in public directory 公共目录中的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>
You would need to create a new endpoint to accept a POST
request that would accept your new config and trigger a re-write of the file on your server. 您将需要创建一个新端点来接受一个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'})
}
});
}
A few notes: 一些注意事项:
My code above assumes the front end will send an object with a field called settings
, which will contain the details of the file you want to write. 上面的代码假设前端将发送一个对象,该对象带有一个名为settings
的字段,其中将包含您要写入的文件的详细信息。
You may know this, but it is recommended to store data in a database, as opposed to allowing the front end to re-write a file on the server 您可能知道这一点,但是建议您将数据存储在数据库中,而不是允许前端在服务器上重写文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.