jirengu-inc / jrg-project-5

一个在线简历编辑器教程。
102 stars 13 forks source link

单向数据流 #10

Open FrankFang opened 7 years ago

FrankFang commented 7 years ago

简单来说,把一切双向绑定的语法都禁用,同时只在一个地方改动数据,那么留下来的就是单向数据流。

由于代码越来越琐碎,所以大家看 commit 要更加仔细了。

我会在 commit 下面的评论框 里写出主要思路。

  1. commit 使用 Vuex 思想重构
  2. commit 使所有字段都可以编辑
  3. commit 数据保存到 localStorage

至此,不管里怎么刷新页面,就跟刷新页面之前一样了。

接下来我们添加注册和登录。

commit 添加注册对话框

写完这一步,你要理解为什么点击「注册」按钮,就会弹出一个 Dialog,一定要看懂。

commit 使用 leancloud 注册

这是我们在 Todo List 里做过的事情,请看懂每一句话,我们的代码没有废话。

commit show errorMessage

一个真实的网页,应该对错误给出友好的提示!

commit 显示用户名和登出

commit 完成登出功能

commit 页面载入时获取已登录用户

commit 登录功能

commit 登录功能

commit 登录成功后关闭对话框、更新 store

commit show error message

致饥人谷学员

请看清楚每个 commit 里面代码的意思,你可以先抄,然后再改,但是你一定要思考每一句代码的意思,结合 Vuex 的文档,你都可以搞懂的。

完成上面代码,给出预览链接。

https://jirengu-inc.github.io/jrg-project-5/step-9-resumer/dist/#/

你们使用 LeanCloud 的 AV 对象时,可千万别用我的 app key 和 app id!

也就是不要抄我 commit 里面的 app key 和 app id ,请自己去 LeanCloud 申请应用!

疑问

如果有疑问,请在 QQ 群直接说。另外我计划周一和周三白天直播写这个应用的过程,有时间的可以来看~

重要 BUG

这个 BUG 每个使用 Vue 的人都会遇到,但他可能由于不理解 Object.defineProperty 的用法,无法「独立解决」这个 BUG。

BUG 的解决见

commit: 修复一个 BUG

绝对绝对绝对不能让 data 中的对象的任何一个属性值变为 undefined 或者 null, 原因见 https://cn.vuejs.org/v2/guide/reactivity.html

hungryYang commented 7 years ago

page code

raszxcv commented 7 years ago

预览 源码

code-zhangrui commented 7 years ago

预览 代码

FrankFang commented 7 years ago

@code-zhangrui 我点你的预览,怎么连注册按钮都看不见~

zhangjiuyi commented 7 years ago

预览 代码

code-zhangrui commented 7 years ago

老师,我用chrome和火狐都能打开

​ 但是IE11和Safari都看不到

2017-03-07 23:31 GMT+08:00 张久屹 notifications@github.com:

预览 https://zhangjiuyi.github.io/Project5/vue-resume/dist/#/ 代码 https://github.com/zhangjiuyi/Project5/tree/master/vue-resume

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jirengu-inc/jrg-project-5/issues/10#issuecomment-284755006, or mute the thread https://github.com/notifications/unsubscribe-auth/AWbkeBJuYbYzpuVsnm5-O8_VzLyZxIFmks5rjXg4gaJpZM4MQqvT .

starlikerain commented 7 years ago

doge~

Source code Preview

谢谢方方 ,记住data不能以任何形式消失的原则了 . object.defineproperty的特性

FrankFang commented 7 years ago

@starlikerain 你的 user 变量被消除了 id 和 username 属性,导致 Vue.js 无法监听 user 的变化。 这个 bug 的解决见 https://github.com/jirengu-inc/jrg-project-5/commit/f4d536a67ae468e1411d054db48bfea65330d596

muxi7 commented 7 years ago

预览

代码

ZW

baixiaoji commented 7 years ago

预览 代码


还是需要看几遍文档,做的时间隔久了就容易忘掉之前看的文档内容

LisaLi85 commented 7 years ago

代码 预览

Honohonoho commented 7 years ago

代码 预览 有个小bug,登录、注册、登出后,topbar不会自动更新 "你好{{username}}",除非刷新页面,学到后面希望自己可以解决..

boloog commented 7 years ago

源码 预览

andreaxiang commented 7 years ago

预览demo

1-WEEK commented 7 years ago

预览

clementlxd commented 7 years ago

预览 https://clementlxd.github.io/resume-task8/dist/index.html#/ 代码 https://github.com/clementlxd/resume-task8

Alfred-ZF commented 7 years ago

预览 代码链接