基于Spring和Vue的Json应用

基于Spring和Vue的Json应用

一、Java后台的json字符串转化

应用场景:

  • ·json字符串转List/Object: 数据库中字段存储json字符串,或者接受前台的json字符串,按需转为实体类,插入分表
    • · List/Object转json字符串: 查表后转化为json字符串传递给前台,或者插入总表中存储字符出的字段

注:Array和Object使用语法存在差异

1、json字符串转List/Object

(1)jsonArray

字符串样式:[{"属性1": value1, "属性2":value2}, {"属性1": value3, "属性2":value4}, ]

属性可包含jsonArray

java 复制代码
public class FactoryCheckPlanItemJson {
    private Long id;
    private Long checkContents;
    private String answer;
    private List<Item> item;
}
String checkItemJsonString = "[\"id\":1,\"checkContent\":\"检查\",\"answer\":\"A\",\"item\":\"[{\"A\",\"health\"\"},{\"B\",\"unhealth\"\"}]\"]"//获取所有点位   使用json转换为任务项类型
List<FactoryCheckPlanItemJson> factoryCheckPlanItemsJson = JSON.parseArray(checkItemJsonString).toJavaList(FactoryCheckPlanItemJson.class);

(2) jsonObject

字符串样式:{"属性1": value1, "属性2":value2}

java 复制代码
List<FactoryCheckPlanItemJson> factoryCheckPlanItemsJsonList = mapper.select(); 

String checkItemJsonString = JSONObject.toJSONString(factoryCheckPlanItemsJsonList);

2、List/Object转json字符串

// 适用于普通实体类和List

java 复制代码
FactoryCheckPlanItemJson a = new FactoryCheckPlanItemJson();

JSONObject.toJSONString(factoryCheckPlanItemsJsonList)

二、Vue前台的json转化

应用场景:

·前台对后台传递的json字符串解析为object用于展示

·前台的表单为object, 提交后转化为json字符串传递到后台

注:Array和Object使用语法一样

1、jsonString转实体类

JSON.parse(jsonString)

Eg:

javascript 复制代码
let questionOptions = []
if (response.data.checkItem) {
  let tmp = JSON.parse(row.checkItem);
  for (let key in tmp) {
    let a = {
      option: key, content: tmp[key]
    }
    questionOptions.push(a);
  }
  return questionOptions
}

2、实体类转jsonString

javascript 复制代码
JSON.stringfy(list)

JSON.stringfy(object)
相关推荐
柯南952734 分钟前
Vue 3 响应式系统源码解析
vue.js
文艺理科生1 小时前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
夏小花花1 小时前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript
前端小巷子2 小时前
Vue 自定义指令
前端·vue.js·面试
qq_三哥啊2 小时前
【IDEA】设置Debug调试时调试器不进入特定类(Spring框架、Mybatis框架)
spring·intellij-idea·mybatis
别惹CC3 小时前
Spring AI 进阶之路01:三步将 AI 整合进 Spring Boot
人工智能·spring boot·spring
Stringzhua3 小时前
Vue中的数据渲染【4】
css·vue.js·css3
寒士obj3 小时前
Spring事物
java·spring
IT毕设实战小研11 小时前
基于Spring Boot 4s店车辆管理系统 租车管理系统 停车位管理系统 智慧车辆管理系统
java·开发语言·spring boot·后端·spring·毕业设计·课程设计
甄超锋13 小时前
Java ArrayList的介绍及用法
java·windows·spring boot·python·spring·spring cloud·tomcat