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

课程简介

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

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

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

在线视频

百度网盘: 云盘下载  提取码: 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的默认值为空数组,一切解决。
实际这个问题主要是当时对类型的意识还不太明确,后面慢慢就懂了。

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

版权声明

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

  1. 大熊猫说道:

    在service.ts中写了一个async函数,函数类返回一个数组,在model.ts中的effects中的函数中使用call去执行,执行后可以拿到值,put方法传递给reducers里面的函数,也是可以拿到值的,但是在页面组件中,connect执行的第一个参数返回的状态是空的, connect、effects、reducers中3个地方都有打印,奇怪的是页面组件connect中先打印,没有值,effects和reducers后打印,可以拿到值,
    如果service中不写异步函数的话,页面组件拿到值就没问题,,,如果老师看到留言,请帮忙理解下

    1. aspirantzhang说道:

      不太明确,可以把src目录打包,发 admin@aspirantzhang.com

    2. aspirantzhang说道:

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

      1. 大熊猫说道:

        老师的回复中提到了页面第一次渲染, 那么在进入user路由后,table组件第一次渲染,没有数据,此时model中的subscriptions订阅功能匹配了路由,去请求数据,再第二次渲染,可以这样理解么?

        1. aspirantzhang说道:

          是的,按我的理解是这么个意思

  2. GF说道:

    ‍非常喜欢你分享的视频 ,感谢付出。‍

  3. lemos说道:

    什么时候更新啊,大佬

  4. shero说道:

    引用了antd 中的form,还是有语法错误,求解
    import { Modal, Form, Input, message } from 'antd';

  5. shero说道:

    p14有个问题,请求报错优化后,编辑、删除接口503之后,还是会提示成功,因为modal里面的data返回的是true,相当于错误捕获没有用?麻烦解答一下可以?

  6. nelson说道:

    老师在课程中使用的插件和代码片段,可以分享出来吗

  7. KidsReturn说道:

    有没有打赏的二维码

  8. 暂无说道:

    想问一下有没有关于部署umi项目的教程。

  9. 福田吉兆说道:

    请问antd 报unknown word.cSpell是什么意思啊博主

    1. aspirantzhang说道:

      单词拼写问题吧。变量最好是英文遵循驼峰法命名,特殊点的单次可以直接点黄色灯泡,添加到user directory.
      我的忽略列表目前有:

      "cSpell.userWords": [
      "Popconfirm",
      "Zhang",
      "ahooks",
      "antd",
      "aspirantzhang",
      "esnext",
      "formily",
      "siteapp",
      "umirc",
      "yahei"
      ],

  10. 何斌说道:

    干货满满,👍

  11. 指北针说道:

    博主的留言恢复功能是不是有问题,我的留言评论都显示的不完整了 :neutral:

  12. 指北针说道:

    感谢博主的视频,条理清晰,循序渐进!
    遇到一些疑问,请教博主。
    P16.使用request获取table数据,而非model的subscriptions,那么state.user是不是应该是{}(空的),那么model中select怎么会拿到user.data以及user.meta中的page和per_page呢?我这里select(state=>state.meta)获取的是undefined。
    P17.通过mapStateToProps将users数据传给了页面组件,table能够正常显示,但是当使用时,会报错:找不到property “total”, :neutral: ,我就郁闷了,users.data都拿到了,同根生的users.meta却是undefined,百思不得其姐。
    望博主能够答疑解惑,不甚感谢。

    1. 指北针说道:

      P17.使用会报错,“Unhandled Rejection (TypeError): Cannot read property 'total' of undefined”。
      `Total ${total} items`}
      onChange={handleChange}
      onShowSizeChange={handleShowSizeChange}
      //current={users.meta.page}
      />

    2. aspirantzhang说道:

      如果你打印users.data能取到,但是同级的users.meta就取不到,我怀疑可能是request问题。我后期在使用中,发现从Umi里面导出的request只能拿到data里面的东西。但是我确实不清楚你这个问题具体出在哪里,你可以把src的源码发到 https://cowtransfer.com/ 然后我下载研究研究。

      1. 指北针说道:

        链接:https://c-t.work/s/593e9f1fda254e
        取件码:bem9xp
        博主,我的P16的疑问,麻烦也看一下。

        1. aspirantzhang说道:

          你这个用的是umi2,我视频是基于umi3的,我估计差别就在这里。我没有用过umi2,不清楚具体原因。但是我估计你对于p16和17的问题都出在这个版本问题上。

          1. 指北针说道:

            多谢博主热心答疑,期待博主更多优秀的视频, :biggrin: 你录的真的很好。

    3. xiajum说道:

      同样遇到这个问题,请问楼主是怎么解决的

  13. 东华、pyl说道:

    期待老哥的下一个视频,很喜欢您的视频风格

发表评论

邮箱地址不会被公开。 必填项已用*标注