el+vue实战 ⑥ 前端将对象封装成字符串存储在数据库中、读取后端存储的字符串再转换为对象、解决深浅拷贝问题

1. 将对象转化为字符串

转化前对象格式：

{
    legalPerson: "测试"
    potentialType: "商会"
    socialCreditCode: "1234"
}

转化代码：

 let str = JSON.stringify(obj)

转化后对象格式：（这里是一个字符串）

{"potentialType":"商会","legalPerson":"测试","socialCreditCode":"1234"}

存储在数据库中的格式：

{"potentialType":"商会","legalPerson":"测试","socialCreditCode":"1234"}

2. 前端读取字符串转化的对象

以对象的形式读取存储在数据库中的字符串的转化代码：

let obj = JSON.parse(str) 

读取这个 object 的键值对的值

for(let key in obj){
        // 读取键
        console.log(key)
        // 读取值
        console.log(obj[key])
}

3. 深浅拷贝问题

在处理某些object对象的时候，特别是涉及组件交互时，如下图，如果修改弹出框的模型基本信息，遮盖层下的对应信息也跟着改变，一般就是深浅拷贝问题。

 解决方式：

新建一个temp去接一下。以上图为例，source为遮盖层下列表绑定的数据，object为弹出框绑定的数据

const temp = JSON.parse(JSON.stringify(this.source));
this.object = temp;

4. 总结

这是为了实现前端把一些筛选条件转换为字符串的形式存储在数据库里，然后再从数据库里读取这些字符串。做之前以为挺难的，因为前后端都是我负责，老师提这个要求的时候还抓脑袋不想做，没想到最后实现这么简单🐷