对象转JSON 参数 kv

 

结果为 : [1,2,3,4]

String s="1,1,2,3,4";
ArrayList<Object> list = new ArrayList<>();
list.add(s);
String s = JSON.toJSONString(list);

结果为 : ["1","2","3","4"]

String s="1,1,2,3,4";
        List<String> list = Arrays.asList(s.split(","));
        String s1 = JSON.toJSONString(list);
        System.out.println("s1 = " + s1);
 

---

结果为 : 1,1,2,3,4 

public static void main(String[] args) {
String  s ="[\"1\",\"1\",\"2\",\"3\",\"4\"]" ;
System.out.println(s);  //["1","1","2","3","4"]

String s2 = s.replaceAll("\\[|\\]", "");
String teststr2 = s2.replace("\"","" );

System.out.println(teststr2);   //1,1,2,3,4

}

  

---

参数：[{"value":"220v","key":"电压"}]

后端

<!-- 阿里JSON解析器 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.79</version>
</dependency>

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.7.12</version>
</dependency>

1先定义一个对象

@Data
public class PareameterDTO {
    private String key;
    private String value;
}

2 将json转为对象给前端

@Override
public List<AppGoodsSpec> selectAppGoodsSpecList(AppGoodsSpec appGoodsSpec) {

    List<AppGoodsSpec> appGoodsSpecs = appGoodsSpecMapper.selectAppGoodsSpecList(appGoodsSpec);
    for (AppGoodsSpec goodsSpec : appGoodsSpecs) {
        String parameter = goodsSpec.getParameter();
        if (StringUtils.isNotEmpty(parameter)) {
            List<PareameterDTO> pareameterDTOList = JSONArray.parseArray(parameter, PareameterDTO.class);
            goodsSpec.setPareameterDTOList(pareameterDTOList);
        }

    }

    return appGoodsSpecs ;
}

1 先遍历  2 显示 3添加和删除按钮

<el-form-item label="参数" prop="parameter">
  <div style="display: flex;align-content: center;margin-bottom: 20px"
       v-for="(dict,index) in form.pareameterDTOList">
    <el-input placeholder="请输入内容" style="margin-right: 10px" v-model="dict.key"/>
    <el-input placeholder="请输入内容" v-model="dict.value"/>
    <el-button @click="delTags(index)" icon="el-icon-delete" style="margin-left: 40px" type="text"></el-button> <br> </div>
  <el-button @click="addTags(form.key,form.value)" icon="el-icon-plus" size="mini" type="primary">添加
  </el-button>
</el-form-item>

前端显示 

<el-table-column align="center" label="参数">
  <template slot-scope="scope">
<span v-for="(item,index) in scope.row.pareameterDTOList">
                  {{item.key}}-{{item.value}}<br>
</span></template>
</el-table-column>

methods: {
  //添加标签
  addTags(key, value) {
    // if (key == null && value == null) {
    //   this.$modal.msgError('请输入标签')
    //   return false
    // }
    let obj = {}
    obj.key = key
    obj.value = value
    this.form.pareameterDTOList.push(obj)
  },
  //删除标签
  delTags(index) {
    this.form.pareameterDTOList.splice(index, 1)
  },
}

 修改 回显判断是空的话，赋值一个空数组 ，不然新增是push 空 报错

/** 修改按钮操作 */
handleUpdate(row) {
  this.reset();
  const goodsSpecId = row.goodsSpecId || this.ids
  getAppGoodsSpec(goodsSpecId).then(response => {
    if (response.data.pareameterDTOList == null) {
      response.data.pareameterDTOList = []
    }
    this.form = response.data;
    this.open = true;
    this.title = "修改商品规格";
  });
},

后端  1先获取接收到的集合，判断 k v 是否未空 ，然后c存到一个新对象中，转为json串 存数据库

@Override
public int updateAppGoodsSpec(AppGoodsSpec appGoodsSpec) {
    List<PareameterDTO> pareameterDTOList = appGoodsSpec.getPareameterDTOList();
    if (pareameterDTOList.size()>0) {
        List<PareameterDTO>  pareameterDTOS = new ArrayList<>();
        for (PareameterDTO pareameterDTO : pareameterDTOList) {
            if (StringUtils.isNotEmpty(pareameterDTO.getKey()) && StringUtils.isNotEmpty(pareameterDTO.getValue()) ) {
                pareameterDTOS.add(pareameterDTO);
            }
        }
        String s = JSONUtil.toJsonStr(pareameterDTOS);
        appGoodsSpec.setParameter(s);
    }

    return appGoodsSpecMapper.updateAppGoodsSpec(appGoodsSpec);
}

需要定义 

pareameterDTOList: [],

对象数组转JSON数组

List<CardListVO> list=new ArrayList<>();

 //对象

list.add(new CardListVO);

String jsonString= JSON.toJSONString(list);

{"merchantName":"12"} 

public static void main(String[] args) {

    CardListVO cardListV = new CardListVO();

    cardListV.setMerchantName("12");
    String jsonString = JSON.toJSONString(cardListV);
    System.out.println(jsonString);
}

---

2023- 4-19  优化

<el-form-item label="电话" prop="phone">
  <div style="display: flex;align-content: center;margin-bottom: 20px"
       v-for="(dict,index) in pareameterDTOList"
  >
    <el-input placeholder="请输入名称" style="margin-right: 10px" v-model="dict.key"/>
    <el-input placeholder="请输入电话" v-model="dict.value"/>
    <el-button @click="delTags(index)" icon="el-icon-delete" style="margin-left: 40px" type="text"></el-button>
    <br></div>
  <el-button @click="addTags(key,value)" icon="el-icon-plus" size="mini" type="primary">添加
  </el-button>
</el-form-item>

return {
  pareameterDTOList: [],
  value: null,
  key: null,
}

methods: {
  //添加标签
  addTags(key, value) {
    // if (key == null && value == null) {
    //   this.$modal.msgError('请输入标签')
    //   return false
    // }
    let obj = {}
    obj.key = key
    obj.value = value
    this.pareameterDTOList.push(obj)
  },
  //删除标签
  delTags(index) {
    this.pareameterDTOList.splice(index, 1)
  },

}

回显 

/** 修改按钮操作 */
handleUpdate() {
  this.reset()
  const id = 1
  getCmsContactUs(id).then(response => {
    this.form = response.data
    this.mapform = [response.data.lng, response.data.lat, response.data.address]
    if (response.data.phone) {
       this.pareameterDTOList =   JSON.parse(response.data.phone)
    }
    this.open = true
    this.title = '修改联系我们'
  })
},

提交

/** 提交按钮 */
submitForm() {
  this.$refs['form'].validate(valid => {
    if (valid) {
      /*经度*/
      this.form.lng = this.mapform[0]
      /*纬度*/
      this.form.lat = this.mapform[1]
      //地图名称
      // this.form.address = this.mapform[2];
      if (this.form.lng == null || this.form.lng == '' || this.mapform.length == 0) {
        this.$modal.msgWarning('请选择地图位置')
        return
      }
      if (this.form.id != null) {
        if (this.pareameterDTOList && this.pareameterDTOList.length > 0) {
          this.form.phone = JSON.stringify(this.pareameterDTOList)
        }
        updateCmsContactUs(this.form).then(response => {
          this.$modal.msgSuccess('修改成功')
          this.open = false
          this.getList()
        })
      } else {
        addCmsContactUs(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      }
    }
  })
},