当前位置：首页 > article >正文

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

article 2025/3/6 20:56:05

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

嘿，技术爱好者们！👋 你有没有在开发中遇到过这样的困惑：表单里的数据（比如图片附件、识别点 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 = row
  this.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。

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

images
- 初始：value.productPhotos（后端 qlist → row.productPhotos）。
- 动态：用户上传。
- 老家：后端 productPhotos 字段。
genuineIdentificationPointIds
- 初始：value.genuineIdentificationPoints（后端 qlist）。
- 动态：用户从 identifies1 选择，选项来自 /identificationPoint。
- 老家：后端 genuineIdentificationPoints 字段 + API 选项。
fakeIdentificationPointIds
- 初始：value.fakeIdentificationPoints（后端 qlist）。
- 动态：用户从 identifies2 选择，选项来自 /identificationPoint。
- 老家：后端 fakeIdentificationPoints 字段 + API 选项。