前后端分离,前端往json文件添加修改,后端使用Nodejs。

103 阅读1分钟

----------start for the better----------

第一次使用Node,遇到一些问题,经过百度和询问大佬,终于解决了,记录一下。

正确操作流程

1.使用Node读取json文件

//读出Json文件
router.get('/get', (req, res) => {
    fs.readFile("navData.json", (err, data) => {
        if (err) throw err
        let navData = JSON.parse(data)
        res.send({
            status: 0,
            msg: 'GET请求成功',
            data: navData
        })
    })
})

2.前端获取后端传过来的json并处理

//获取JSON中的数据
      const getData = () => {
        axios.get('http://127.0.0.1/api/get')
          .then((res) => {
            navData.data = res.data.data.TreeData
            console.log(navData.data)
          })
      }
//获取要新增的信息(此处是新增f)
      const getForm = (f) => {
        console.log(f)
        navData.data[0].children[0].form = f
        console.log(navData.data)
        axios.post('http://127.0.0.1/api/getNewJson',navData.data)
      }

3.后端再次获取修改好的数据,并写入json文件

router.post('/getNewJson', (req, res) => {
    console.log('成功获取前端修改')
    console.log(req.body)
    res.end('成功获取修改')
    //把收到的新数据写入testData.json
    fs.writeFile("testData.json", JSON.stringify(req.body, null, 2), (error) => {
        if (error) {
          console.log('An error has occurred ', error);
          return;
        }
        console.log('Data written successfully to testData.json');
      });
})

4.node配置

const express = require('express')
const app = express()

app.use(express.json())
//配置中间件
app.use(express.urlencoded({extended:false}))

//解决跨域问题,一定写在路由之前
const cors = require('cors')
app.use(cors())

const router = require('./apiRouter')

app.use('/api',router)

app.listen(80,() => {
    console.log('running at http://127.0.0.1');
})

错误记录

之前使用post方法还加了qs,后端得到的数据格式就有问题 QQ图片20220722115416.png 修改前的json

QQ图片20220722115652.png 修改后的json

QQ图片20220722115656.png

继续加油

----------better me----------