添加更多细节

[FrankFang]

将用户数据保存到 LeanCloud

删除「保存」和「预览」按钮

1. 实时保存，因此不需要用户点保存
2. 预览按钮讲移到其他地方

删除所有假数据

然后打开开发者工具，把 localStorage 也清空：

然后刷新页面，页面上的数据就空了：

接下来我们有三个功能要完成：

1. 输入框上面显示中文，而不是英文
2. 如果用户啥也没填，就不要展示
3. 用户可以自行添加工作经历、教育经历等

然而老司机我思考了一下，我们好像遇到了一点问题。

我们如何判断用户没有填工作经历呢？

可以看 workHistory 这个数组的长度是否为0。也就是 workHistory: []。

但是这会造成另一个问题，用户添加工作经历的时候，我怎么知道添加的对象有哪些 key 呢？没法知道！

这说明我们的数据结构有点问题，那么我们要改造一下。

修改数据结构
改完数据结构，另一个地方也得改一下

然后清空 localStorage，画面变得清爽起来：

length > 0 才显示数据

这样一样我们就做到了「2. 如果用户啥也没填，就不要展示」。

数据冗余

回头看一下 resume

    resume: {
      config: [
        { field: 'profile', icon: 'id', keys: ['name','city', 'title', 'birthday']},
        { field: 'workHistory', icon: 'work', type: 'array', keys: ['company', 'details'] },
        { field: 'education', icon: 'book',type: 'array',  keys: ['school', 'details'] },
        { field: 'projects', icon: 'heart',type: 'array',  keys: ['name', 'details']  },
        { field: 'awards', icon: 'cup' ,type: 'array',  keys: ['name', 'details'] },
        { field: 'contacts', icon: 'phone' ,type: 'array',  keys: ['contact', 'content'] },
      ],
      profile: { },
      workHistory: [ ],
      education: [ ],
      projects: [ ],
      awards: [ ],
      contacts: [ ],
    }

profile、workHistory、education、projects、awards、contacts 都出现在 config 里，这就是冗余。

冗余很有可能造成不一致，不一致就是 bug。所以我们需要清除冗余。

这几个属性完全可以从 config 里推导出来，所以我提交了如下代码：

去除数据冗余

这次提交里有一个重要的知识，那就是 Vue.js 无法监听新增的属性。

你讲代码里的三行注释打开，然后注释掉 Vue.set 那三行，就能看到这个「BUG」：你在 ResumeEditor 里编辑，ResumePreview 却什么反应都没有。

但是如果你使用 Vue.set，那么 ResumePreview 就有反应了。

请一定要自己重现这个 BUG！

这个 BUG 的原因是什么呢？请看文档，文档会告诉你一切：

深入响应式原理

搞懂这一点，面试时可以装逼。

继续代码：

将 config 和 resume 分开

[Zegendary]

Source
Page

Two more things:
1.Complete the English and Chinese switch with vue-i18n
2.Import element-ui

[TerenYeung]

yjl 11th commit for v-r-g
demo
source

[FrankFang]

hi，我还没写完~

[TerenYeung]

@FrankFang 等老师写完后，我再继续完善哈···

[muxi7]

预览

代码

ZW

[starlikerain]

doge~

Source code
Preview

[baixiaoji]

预览
代码

ZLJ

[imgwho]

预览
代码

[wangpeng1994]

预览地址
代码地址