JSON数据在前后端之间的传递

目的

解决网页数据的传递和保存。该方法不一定是最好的，如果有最好的还望高手指点。

JSON文件

测试文件以字符传形式保存：

"[{\"name\":\"22\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"23\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"24\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"25\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"26\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"27\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"28\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"},{\"name\":\"29\u7269\u8054\",\"calories\":1,\"fat\":\"DDDDD\",\"carbs\":1,\"protein\":\"DDDD\",\"iron\":\"DDDDD\"}]"

获取本地JSON文件

    getData() {
      this.$axios.get("/static/data.json").then(      //通过axios获得本地json文件
        response => {
          console.log(response.data);
          this.desserts = JSON.parse(response.data); //解析json数据
        },
        error => {  
          console.log(error);
        }
      );
    },

发送到后端flask

      SaveData() {
          this.$axios.get("/api/ProjectTable",{
          params:{
            ProjectTableData : JSON.stringify(this.desserts)
          }
          })
          .then(
            response => {
              console.log(response);
            },
            error => {  
              console.log(error);
            }
          );
    },

Flask后端保存

@app.route('/ProjectTable')
def writejson():
    fout = open(r"C:\Users\yujin.wang\Desktop\Vuejs\10_MyApp\vuetify-app\public\static\data.json",'w')
    ProjectData = request.args.get('ProjectTableData')
    # print (json.load(ProjectData))
    json.dump(ProjectData,fout)
    return "OK"

关键技术

1. axios.get 发送给后端时，需要将json数据处理成字符串，因此需要JSON.stringfy，而获取时需要对字符串形式的JSON数据进行解析（JSON.parse）。
2. flask可以通过 request.args.get获得前端传来的字符串JSON数据。