视频课程:Umi3+Dva入门实践 完成用户管理的CRUD 应用(2020)

课程简介

Umi和Dva初学者课程,通俗易懂,循序渐进,搭配专用后端接口,实现用户列表的真实增删改查操作。 基于Umi3版本实现,知识点涉及Umi/Dva/React Hook/Ant Design/TypeScript。

标准普通话,建议1.5倍速观看。共20集。

本人为前端初学者,本视频课程只求为初学者快速入门,知识的精确度较低,望体谅。凡有错误或不当之处,欢迎批评。凡有疑问,欢迎在本页留言讨论(所有发言需审核后显示)。

2022年课程提示

(点击图片可查看大图)

在线视频

百度网盘: 云盘下载  提取码: pflw

维护截止

2021年12月,超过该日期后将不提供咨询,或可能下线视频。

本课程目前已停止咨询。

最终代码

https://github.com/aspirantzhang/umi3-grud.git

https://gitee.com/aspirantzhang/umi3-crud.git

已知错误

P8第9分钟左右出现的错误,三种解决方法,三选一:
1. 按课程中介绍的解决方法。加一层对象。
2. 直接改Table组件的dataSource={users.length ? users : []}
3. 直接改model文件中,state: []
这个原因主要是Table的dataSource只认识 “数组或者undefined”,但是在P8定义model时,state写为了{} ,是空对象,不是空数组。页面第一次渲染时,数据还没拿到,那时候是个空对象,它不认识,所以直接报错。
第一种解决方法中,如果我们改成了users.xxx,这样它第一次获取时,是undefined。Table认识undefined。
第二种解决方法中,我们首先判断了一下,如果users还是空的,那先给它空数组。
第三种解决方法中,我们修改当前model的默认值为空数组,一切解决。
实际这个问题主要是当时对类型的意识还不太明确,后面慢慢就懂了。

同学反馈

1599925xxx同学 在2022年3月2日教授我一个p19课程中loading另外这种处理方法:

提交表单的这个操作走model也可以比较方便地处理loading。正常情况的话dispatch操作发送action一般就是携带type和payload这两个属性,其实也可以携带其他属性。如果希望异步操作完成之后做一些操作,可以在action里面添加一个callback属性,存一个回调函数,然后在Effect函数的参数中把callback解构出来,在call操作后调用这个回调函数,这样就可以实现异步操作后执行特定的操作。代码实例放在下面了,实践了一下也可以实现loading的控制,不用把调用后端接口的操作放在UI组件中了。

React新手课程推荐

React16.4开发简书项目从零基础入门到实战

【智能社】ES6精讲—ECMAscript6精通系列(基础篇)

TypeScript -系统入门到项目实战

公众号 / 群推荐

Umi官方群 Alibaba F2e 云谦
        

资料推荐

https://github.com/sorrycc/blog/issues –所有云谦发过的文章都建议要读一遍

https://github.com/umijs/umi/issues –遇到任何问题可以先到issues来找一找

https://sorrycc.com/ –云谦博客

后续

后续课程:React入门进阶 – 基于Ant Design Pro v5和Formily v1的动态模型网站后台

提示:后续课程非零门槛,请先学本课程。

录制资料

摄像头:罗技C270 | 录屏:Bandicam | 视频编辑:Apowersoft Video Editor | 画图:FSCapture

版权声明

本视频不可发布在具有“视频前广告的视频网站”,如优酷等。严禁用于盈利,不可用于任何商业目的,禁止断章取义。遵循以上前提之下,可任意转载、分发,无需通知作者。