解锁前端表单数据的秘密旅程：从后端到用户选择！✨

😄 解锁前端表单数据的秘密旅程：从后端到用户选择！✨

嘿，技术爱好者们！👋 你有没有在开发中遇到过这样的困惑：表单里的数据（比如图片附件、识别点 ID）从哪儿来的？是后端偷偷塞给你的，还是用户辛勤上传的？🤔 今天，我们要一起踏上一场“数据探秘之旅”，以 compare-form.vue 为案例，揭开 images、genuineIdentificationPointIds 和 fakeIdentificationPointIds 这三个“宝藏”的来源秘密！🔍 准备好啦？带上你的好奇心，跟我走！🚀

---

🎬 开场：表单数据的“身世之谜”

想象一下，你打开 compare-form.vue，看到这样的表单组件：

<w-form-multiple-image v-model="form.images" label="图片附件" />
<w-form-select v-model="form.genuineIdentificationPointIds" :list="identifies1" />
<w-form-select v-model="form.fakeIdentificationPointIds" :list="identifies2" />

这些字段绑定了 form.images（图片数组）、genuineIdentificationPointIds（真货识别点 ID 数组）和 fakeIdentificationPointIds（假货识别点 ID 数组）。它们的数据从哪儿冒出来的？是魔法吗？🪄 别急，我们来一步步解锁！

---

🕵️‍♀️ 第一站：watchValue — 数据的“初始化基地”

代码中的 @Watch('value') 像是数据的“出生证明”：

@Watch('value')
watchValue(v: any) {this.$nextTick(async() => {this.form = {...v,images: v.productPhotos ? JSON.parse(v.productPhotos) : [],genuineIdentificationPointIds: v.genuineIdentificationPoints ? JSON.parse(v.genuineIdentificationPoints) : [],fakeIdentificationPointIds: v.fakeIdentificationPoints ? JSON.parse(v.fakeIdentificationPoints) : []}})
}

• 发现：

  • value 是父组件传递的 props，v 是它的值。
  • form.images 从 v.productPhotos 解析而来。
  • genuineIdentificationPointIds 从 v.genuineIdentificationPoints 解析。
  • fakeIdentificationPointIds 从 v.fakeIdentificationPoints 解析。
  • 如果没数据，默认是空数组 []。

• 推测：这些数据的“祖先”藏在 value 里，而 value 又是谁给的呢？🤔

---

🌍 第二站：父组件 index.vue — 数据的“中转站”

父组件是 src/views/tools/fake-strategy/index.vue，它通过 onCompare 将数据传递：

public async onCompare(row: any) {this.compareForm = rowthis.operateType = 'edit'this.compareFormVis = true
}

• 关键：

  • row 是表格一行数据，来自 this.list。
  • compareForm = row 赋值给 :value="compareForm"，传给 compare-form.vue。

• 数据流：

  • row.productPhotos → value.productPhotos → form.images。
  • row.genuineIdentificationPoints → value.genuineIdentificationPoints → form.genuineIdentificationPointIds。
  • row.fakeIdentificationPoints → value.fakeIdentificationPoints → form.fakeIdentificationPointIds。

• 来源：this.list 是从后端 qlist API 获取的。

---

🗃️ 第三站：后端 API — 数据的“老家”

index.vue 的 getList 揭示了终极来源：

public async getList() {const res: any = await qlist(this.listQuery)this.list = res?.data?.content
}

• 真相：

  • qlist 从 '@/api/fake-registration' 导入。
  • res.data.content 是数组，每项 row 包含 productPhotos、genuineIdentificationPoints 和 fakeIdentificationPoints。
  • 例如：

    {"productPhotos": "[\"http://example.com/image1.jpg\", \"http://example.com/image2.jpg\"]","genuineIdentificationPoints": "[1, 2, 3]","fakeIdentificationPoints": "[4, 5]"
    }
    

• 老家：后端数据库，通过 qlist API 提供。

---

🎨 第四站：动态更新 — 用户和 API 的“加成”

genuineIdentificationPointIds 和 fakeIdentificationPointIds 还能动态变化！通过 watchProductId 和 getIdentificationPoints：

@Watch('form.productId')
async watchProductId(newVal: any) {if (newVal) await this.getIdentificationPoints(newVal)
}private async getIdentificationPoints(productId: number) {const res: any = await request({url: `/identificationPoint/by-product-id-and-public-type/${productId}/all`})this.identifies1 = res.data.trueIdentificationPoints.map(item => ({id: item.id,name: `${item.id}   ${item.identificationPointTitle}`}))this.identifies2 = res.data.fakeIdentificationPoints.map(item => ({id: item.id,name: `${item.id}   ${item.identificationPointTitle}`}))
}

• 作用：

  • 根据 form.productId 获取产品相关的识别点。
  • identifies1 和 identifies2 是 <w-form-select> 的选项。
  • 用户选择后更新 form.genuineIdentificationPointIds 和 form.fakeIdentificationPointIds。

• 来源：/identificationPoint API 提供动态选项。

• images 动态：用户通过 <w-form-multiple-image> 上传新图片，更新 form.images。

---

🎉 总结：数据的“家族树”

1. images

   • 初始：value.productPhotos（后端 qlist → row.productPhotos）。
   • 动态：用户上传。
   • 老家：后端 productPhotos 字段。

2. genuineIdentificationPointIds

   • 初始：value.genuineIdentificationPoints（后端 qlist）。
   • 动态：用户从 identifies1 选择，选项来自 /identificationPoint。
   • 老家：后端 genuineIdentificationPoints 字段 + API 选项。

3. fakeIdentificationPointIds

   • 初始：value.fakeIdentificationPoints（后端 qlist）。
   • 动态：用户从 identifies2 选择，选项来自 /identificationPoint。
   • 老家：后端 fakeIdentificationPoints 字段 + API 选项。

---

🎨 SVG 图解：数据的旅程

---

🛠️ 实践建议

• 调试：console.log(value) 查初始数据，console.log(identifies1, identifies2) 看动态选项。
• 问题：若数据空，检查 qlist 或 /identificationPoint API 返回。
• 优化：加错误处理，防止 JSON.parse 失败。

---

😂 结尾彩蛋

如果数据“失踪”，可能是后端“小哥”忘了更新数据库！😄 赶紧催一催，或者检查网络，找到“宝藏”！👀 喜欢这篇博客？欢迎留言，我下期再带你探秘！🪄

---