fe-hunter 实现JSON与Vue模版相互转换

要实现的功能

实现JSON与Vue模版相互转换：

// 给定的数据源
const data = {
  name: {
    value: 'byoungd',
    style: {
      bold: true,
      italic: true,
      inline: false,
    },
    tag: 'p',
  },
  age: {
    value: 18,
    style: {
      bold: false,
      italic: true,
    },
    tag: 'h2',
  },
  skills: [
    {
      id: '0',
      value: 'Vue',
      style: {
        bold: true,
        italic: false,
      },
      tag: 'span',
    },
    {
      id: '1',
      value: 'React',
      style: {
        bold: true,
        italic: false,
      },
      tag: 'span',
    },
    {
      id: '2',
      value: 'Rust',
      style: {
        bold: false,
        italic: true,
      },
      tag: 'span',
    },
  ],
}

// 用于拼接“样式字符串”的帮助方法
const styleHelper = (style) => {
  const dict = {
    bold: 'font-weight: bold;',
    italic: 'font-style: italic;',
  }
  return Object.keys(style)
    .map((key) => (style[key] ? dict[key] : ''))
    .filter((str) => str)
    .join(';')
}

预期的templateString如下：

const templateString = `<template>
  <div>
    <div>
      <p :style="styleHelper(name.style)">{{ name.value }}</p>
    </div>
    <div>
      <h2 :style="styleHelper(age.style)">{{ age.value }}</h2>
    </div>
    <div v-for="skill in skills" :key="skill.id">
      <span :style="styleHelper(skill.style)">{{ skill.value }}</span>
    </div>
  </div>
</template>
`

const createTemplate = () => { /* 需要实现... */ }

// 这里的 === 仅仅用于说明 表示可以相互转换

createTemplate(data)  // 执行后返回templateString
parseTemplate(templateString)  // 执行后返回data

实现 createTemplate 和 parseTemplate 函数

代码示例

// createTemplate函数： 输入的模板字符串需要和createTemplate处理后生成的一致
console.log(templateString === createTemplate(data))

// 预期为 true


// parseTemplate函数： 由于对象的对比稍微复杂一些，我们暂且认为只要是值key value是正确的即可
console.log(JSON.stringify(data) === JSON.stringify(parseTemplate(templateString)))

// 预期为 true

从模板字符串转为JSON时，JSON中的数据可以从由Vue渲染后的html结果得出

最佳答案评选标准

限定使用typescript
需要提供 codesandbox/stackblitz 在线示例
需要满足两者的相互转换
拓展性如果data的数据更复杂一些需要可以正常转换
安全性需要处理符号转义

最佳答案

悬赏中，欢迎作答...

答题同学须知

答题规范：请在一次评论中完成作答，后续修改也请编辑该评论，而不是追加新的评论
评选标准：最佳答案由围观同学的 👍 和卡颂共同决定
评选时间：一般是问题发布24小时后评选，如果问题发布当天回答数较少，问题悬赏金额可能增加，同时悬赏时间也会增加

围观同学须知

对于你满意的答案，请不要吝惜你的 👍，这是评选最佳答案的依据
非答题的评论会被删除，问题相关讨论请在赏金猎人群中进行

Apr 01 '22 01:04 BetaSu

因为从VueTemplate中是无法可知数据json是什么形式的，如果知道也无需转换，因此写为html2json，即HtmlParser。

而createTemplate可以实现，具体看链接。

在线示例

Apr 01 '22 06:04 Nctdt

因为从VueTemplate中是无法可知数据json是什么形式的，如果知道也无需转换，因此写为html2json，即HtmlParser。

而createTemplate可以实现，具体看链接。

在线示例

这个逻辑上应该是 Template => Json(Template Ast tree) => View Template 和 ast tree 可以互转从 View 向往回转是转不到 Template 的

Apr 01 '22 15:04 NoBey

之前刚好做过基于vue的低代码(low code)不是no code实现了

Apr 02 '22 00:04 WarrenJones

将JSON数据转换为Vue模板的话，可以使用Vue.js提供的模板语法，通过遍历JSON数据来生成对应的Vue模板。例如，如果我们有以下JSON数据：

{
  "title": "这是一个标题",
  "items": [
    { "name": "item1", "value": "1" },
    { "name": "item2", "value": "2" },
    { "name": "item3", "value": "3" }
  ]
}

我们可以使用以下Vue模板来呈现这个JSON数据：

<div>
  <h2>{{ title }}</h2>
  <ul>
    <li v-for="item in items" :key="item.name">
      {{ item.name }}: {{ item.value }}
    </li>
  </ul>
</div>

其中，通过双括号绑定的方式将JSON数据中的标题（title）和数组（items）展示在了Vue模板中，然后使用 v-for 指令遍历数组中的每个元素，使用 :key 来指定每个元素的唯一标识。

如果需要将Vue模板转换为JSON数据，我们可以使用Vue.js提供的响应式数据特性，将Vue模板中的数据通过 v-model 绑定到表单控件中，然后在Vue实例中使用 this.$data 来获取当前的数据对象，最后使用 JSON.stringify 将数据对象转换为JSON格式。

例如，对于以下的Vue模板：

<div>
  <input v-model="title" />
  <ul>
    <li v-for="item in items" :key="item.name">
      <span>{{ item.name }}:</span>
      <input v-model="item.value" />
    </li>
  </ul>
  <pre>{{ JSON.stringify(this.$data, null, 2) }}</pre>
</div>

如果我们在表单中输入一些数据，然后点击Vue模板中的 SAVE 按钮，就可以将表单中的数据转换为JSON格式并输出到控制台中。

综上，通过Vue.js的模板语法和响应式数据特性，我们可以很方便地实现JSON和Vue模板的相互转换。

Apr 28 '23 07:04 jacksmas