Vue子页面获取父页面参数以及后端Fastjson浅拷贝问题

23G

已于 2023-05-25 11:00:25 修改

阅读量575

点赞数

于 2023-05-10 16:00:57 首次发布

本文链接：https://blog.csdn.net/weixin_48907405/article/details/130601782

版权

场景：es当中一条数据需要确认是否生效，点击确认按钮，弹窗出来填写相关信息，并且保存到Mysql当中且关联数据，修改es当中的数据是否生效状态。

前端：

1.创建一个子页面

<template>
    <div class="page-content">
        <a-modal :title="modelName" width="543px" v-model="addvisible" @ok="hideaddModal" @cancel="cancelFun" :maskClosable="false" :destroyOnClose="false" okText="确认" cancelText="取消">
        </a-modal>
    </div>
</template>
<script>
    import {okInfo} from "@/api/RomManager/RomList";
    var _this;
    export default{
        //方便父页面引用
        name:'notarize',
        methods:{
            hideaddModal(){
                this.$refs.ruleForm.validate((valid) => {
				    if (valid) {
                        const formData = new FormData();
                        const map = this.$parent.addPocId;
                        formData.append("id",map.get('id'));
                        formData.append("taskId",map.get('taskId'));
                        formData.append("type",map.get('type'));
                        formData.append("index",map.get('index'));
                        formData.append("cveId",map.get('cveId'));
                        // 调用接口
                        okInfo(formData).then((res) => {
                            if(res.status=="200"){
                                this.$message.success(res.msg);
                                this.fileList = [] //上传成功后 置空fileList文件列表
                                this.addvisible = false
                                this.$emit('getUpLoad',false);
								//刷新页面，将父页面的相关参数保存到父页面的属性当中，在子页面获取，调用方法
                                let script = {name:this.$parent.tableTitle,value:this.$parent.tableTitleValue};
                                this.$parent.getInfos(script)
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch((err) => {
                            this.$message.error(err.msg);
                        });
				    } else {
				    	console.log('error submit!!')
				    	return false
				    }
			    })
            },
			//关闭弹窗方法
			cancelFun(){
                //是Vue.js中的事件触发器方法，用于触发一个自定义事件。在这个例子中,<notarize> 组件内部执行了 this.$emit('getUpLoad', false) ，意思是触发了一个名为 getUpLoad 的自定义事件，并且将一个值为 false 的参数传递给父组件。 
                //也就是父组件 @getUpLoad='upData'对应这个
                this.$emit('getUpLoad',false);
            },
        }
    }
</script>
<style scoped>
</style>

2.父页面

<template>
  <div class="stand">
    <div class="ui-bottom">
      <div class="bottom-table">
        <div class="table-left">
          <div  v-for="item in tableList" class="left-info" @click="getInfos(item)">
           {{item.name}}
          </div>
        </div>
        <div class="table-right">
          <div class="right-title-two">
            <span class="title-left"></span>
            <span class="title-right">{{ tableTitle }}</span>
          </div>
          <a-table  v-show="!showList" :columns="columns" :data-source="data" :selectedRowKeys="selectedRowKeys" :pagination="pagination" :scroll="{y: '230px'}">
            <template slot="operation" slot-scope="text,record">
              <a @click="ok(record)" style="margin-right:16px;color:#2ab62b"><img src="../../../public/img/确认.svg" alt="" style="width: 14px;height: 14px;transform: translateY(-3px);"> 确认 </a>
            </template>
          </a-table>
        </div>
      </div>
    </div>
	<!--自定义子页面组件-->
    <notarize v-if="uploadInfo"  @getUpLoad='upData'></notarize>
  </div>
</template>
<script>
//引入
import Notarize from "@/views/RomManager/notarize";

export default {
	//注册组件
	components: {Notarize},
	extends: Base,
	data() {
	return {
		//子页面获取数据根源
		addPocId:new Map(),
		//控制是否显示子页面
		uploadInfo:false,
	}
	},
	methods: {
		upData(data){
		    this.uploadInfo=data
		},
		// 确认
		ok(record) {
			if (record.sign==="1"){
				this.$message.error('该数据已确认');
				return
			}
			this.uploadInfo=true;
			console.log(record.__ob__.value.mark_id)
			this.addPocId.set("id",this.$route.params.record.id);
			this.addPocId.set("taskId",this.taskListDefault);
			this.addPocId.set("type",this.tableTitleValue);
			this.addPocId.set("details",record.Details);
			this.addPocId.set("cveId",record.cve_id);
		},
		//数据切换
		getInfos(item) {
			console.log('切换--->', item);
			this.tableTitle = item.name
			this.tableTitleValue = item.value
			let firmwareId = this.$route.params.record.id;
			let param={
			firmwareId:firmwareId,
			taskId:this.taskListDefault
			}
			param.type = item.value;
			getTableList(param).then(res=>{
				//接口返回数据处理
			})
		}
	}
}
</script>
<style scoped>
</style>

后端：

//文件上传Minio
//获取poc文件名
String originalFilename = file.getOriginalFilename();
//minio存储
String bucketName = FireWareFileUtil.createBucketName(file);
boolean b = uploadFileToMinio.makeBucket(bucketName);
if (b) {
	uploadFileToMinio.putObject(bucketName, file, originalFilename);
} else {
	return Result.error("创建桶失败");
}


//sql操作，关联数据....

//Es查询数据
NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
BoolQueryBuilder boolQueryBuilder = new BoolQueryBuilder();
boolQueryBuilder.must(QueryBuilders.matchQuery(字段,值));
boolQueryBuilder.must(QueryBuilders.matchQuery(字段,值));
queryBuilder.withQuery(boolQueryBuilder);
List<InformationResult2> decompressFiles = elasticsearchTemplate.queryForList(queryBuilder.build(), InformationResult2.class);
if (decompressFiles.size()>0){
	//更改数据
	InformationResult2 InformationResult2 = decompressFiles.get(0);
	JSONArray data = InformationResult2.getS25();;
	List<JSONObject> jsonObjects = data.toJavaList(JSONObject.class);
	Optional<JSONObject> id1 = jsonObjects.stream().findFirst();
	//此处可以更改jsonObjects中的值，但是因为Fastjson的浅拷贝所以InformationResult2中的值也会更改
	id1.get().put("sign","1");
	//删除es中的数据
	DeleteQuery deleteQuery = new DeleteQuery();
	deleteQuery.setQuery(boolQueryBuilder);
	elasticsearchTemplate.delete(deleteQuery,InformationResult2.class);
	//将更改后的数据重新写入Es
	informationResultDao.save(informationResult);
}

编写时id1.get().put("sign","1");是可以直接修改jsonObjects集合中的数据，但是最上面的InformationResult2也会被修改，导致这个的问题是Fastjson的浅拷贝！

具体传送门震惊！Fastjson！JSONObject/JSONArray深浅拷贝踩坑，如何深度复制对象_jsonarray 拷贝_是小宗啊？的博客-CSDN博客文章目录一、写在前面二、问题描述三、问题模型抽取四、正文，开始敲代码，首先模拟重现问题五、问题解决的探索过程六、如何解决JSONArray/JSONObject浅拷贝问题（如何获得深拷贝对象）方法一：借助addAll()或者putAll()方法进行深度拷贝方法二：先将源对象转成JSON字符串，再解析成新对象七、写在最后一、写在前面昨天周五，在开发某个接口时遇到了一个非常坑的问题（当然是因为自己基础不够扎实），没有注意到JSONArray和JSONObject深拷贝与浅拷贝的问题，在坑了呆了一下午才出https://blog.csdn.net/shaofengzong/article/details/117168003