使用axios+node.js实现读取修改本地json文件，前后端交互

直接使用以下代码

1、前端代码

1.1、html文件，axios直接使用cdn

    
{{ name }}
    {{ mana }}+{{ speed }}
    
{{  }}
    加载存档
    存档

1.2、javascript代码

2、后台服务器代码

首先要安装node.js，然后用node.js启动即可

var express = require('express'); 
var path = require('path');
var fs = require('fs');
var bp = require('body-parser');
var app = express();
app.use(bp.urlencoded({ extended: false }));

//跨域
app.all('*', (req, res, next) => {
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); 
    res.header('X-Powered-By', 'nodejs'); 
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

//创建get接口
app.get('', (req, res) => {
	console.log(req.query); //获取请求参数
    var filepath = 'C:\\Users\\wdx\\Desktop\\java+html\\vue\\data.json'; //路径
	//读取json文件
    fs.readFile(filepath, 'utf-8', function(err, data) {
        if (err) {
            res.send('文件读取失败');
        } else {  
            res.send(data);
            if(req.query.req=='save'){
                console.log("保存");
                var person = data.toString();
                person = JSON.parse(person);
                console.log(person);
                person.mana=parseInt(req.query.mana);
                console.log(req.query.mana);
                console.log(person);
                
                 var str = JSON.stringify(person);
                fs.writeFile('C:\\Users\\wdx\\Desktop\\java+html\\vue\\data.json',str,function(err){
                    if(err){
                        console.error(err);
                    }
                    console.log('存档成功');
                })
            }
        }
    });
});
var host = 'localhost'; //ip
var port = 8888; //端口
app.listen(port, host, () => {
    console.log(`http://localhost:8888`);
});

 

3、json文件

{"name":"萧炎","power":100,"bleed":6000,"mana":1241,"grade":"斗之气","star":1}