umi dva
野生小米椒
初学者
展开
-
redux调试工具+loading组件
每次都在控制台打印数据很麻烦,控制台的Redux调试工具能显示这些数据引入Loading组件,切换页面时可以看到Redux调试器中的State里的loading数据中的global会切换true和false,这个组件loading会在useEffect执行完后自动变为false,将它写入connect函数里,供cinema组件使用loading用loading与上loading组件,即可控制loading的显示与隐藏...原创 2022-04-03 11:01:14 · 310 阅读 · 0 评论 -
umi-dva集成
文章目录1.umi和dva集成2.非父子组件进行通信1.umi和dva集成2.非父子组件进行通信需求:city组件中点击城市名,能传到cinema组件,它们不是父子组件,如何通信呢先创建models文件夹,创建cityModel.ts在city组件发起dispatchCinema组件中可以拿到状态,并修改城市名代码:cityModel.tsexport default { namespace: 'city', //命名空间,不写的话默认是cityModel state: {原创 2022-04-02 20:24:18 · 450 阅读 · 0 评论 -
umi——05——组件库集成(antd-mobile)
文章目录1.antd-mobile引入2.进入city页面和详情页面(Detail关闭选项卡)1.antd-mobile引入做一个手机端的页面在引入antd-mobile的导航NavBar组件时,显示错误,应该是Umi框架的antd-mobile版本和我们使用的antd-mobile当前版本的组件不符合鼠标悬浮在antd-mobile上 ,显示版本是2.3.4解决方法:下载最新版本(一个项目要么一直用npm要么用cnpm或者yarn,不要混用)还是报错,需要我们将之前版本关掉,在.umirc.t原创 2022-04-02 00:15:27 · 2258 阅读 · 0 评论 -
dva——04——mock
在mock文件夹中建一个文件,命名随意mock数据在roadhogrc.mock.js中引入,因为项目启动是走roadhogrc.mock.js入口文件的浏览器中输入/users可以看到数据在center页面中请求地址并打印数据登录页面小例子:模拟POST请求要输入用户名为:xzx 密码:123才能进入center页面控制台可以看到mock.js打印出来的req.body数据,req是登录页面传来的数据我们再给req.body加上限制,用户名和密码都正确才能登录成功再到center原创 2022-04-01 18:51:55 · 248 阅读 · 0 评论 -
dva——03——models异步处理
访问时根据路由动态决定加载哪些组件,如果组件加上connect,可以获得状态(model),组件dispatch一个action到模型中,如果是同步则到Reducer,状态发生改变,谁用了connect就得到这个状态如果是异步到effect,需要写成生成器的写法,在effect中先进行异步处理,处理完了再通过同步给到Reducer,Reducer是负责数据更新的,再通过connect传给组件。Subscribtion做一些初始化设置,比如loadding框显示转圈,数据请求完后隐藏转圈...原创 2022-03-31 20:20:01 · 1359 阅读 · 0 评论 -
dva——02——models同步处理
1.同步需求是:点击进入详情页面(Detail),隐藏选项卡,选项卡组件在App组件,需要在App组件中操作入口文件index.js将model打开,并在models创建文件夹maizuo在model中写命名空间,状态以及reducersexport default { namespace: "maizuo", state: { isShow: true, }, reducers: { hide(prevState, action) { // 这里合并而原创 2022-03-31 19:48:45 · 541 阅读 · 0 评论 -
dva——01——路由
1.dva安装2.路由原创 2022-03-18 19:45:02 · 1127 阅读 · 0 评论 -
umi——02——mook和反向代理(跨域)
1.测试mock的简单使用首先我们在mock文件夹创建一个文件(文件名随便取)写上这样一段代码,代表Get请求在登录组件Login中发起请求启动项目,并在项目的url地址输入/users,就可以看到2.登录案例api.jsexport default { // "Get /users":{name:"rebecca",age:23} 'POST /users/login': (req, res) => { //前端传来的内容 console.log(req.b.原创 2022-03-18 13:41:53 · 617 阅读 · 0 评论 -
umi——01——路由
umi文件夹结构在.umirc.ts文件中将routes注释掉,则是约定式路由,在pages中写组件,url打上对应名字就会跳到对应组件(首字母大小写都能对应上),但是要注意的是首页组件index首字母必须小写,404组件则是没有相应路由时会跳到的组件。嵌套路由嵌套路由有时不好用就要重启一下,并且嵌套路由需要写文件夹,嵌套组件的父组件必须是_layout命名,要有下划线,子组件是Comingsoon和Nowplaying,子组件的显示可以用props.children占位,类似于Vue中的插槽,当跳原创 2022-03-16 19:01:13 · 2369 阅读 · 0 评论 -
详述Dva中Model解构与写法
model.ts文件结构与写法,Medel是一个对象,最后需要暴露出去固定写法有:namespace(命名空间)state(仓库初始值)reducers(里面有多个函数,并且写法省略function),因为是返回页面数据的最后一步,所以一定有returneffects(里面有多个函数,并且写法省略function),异步所以全部变成generator函数,调用reducers需使用put和yield,yield put(),因为不直接返回页面数据,所以没有returnsubscriptions(原创 2021-11-26 18:52:03 · 964 阅读 · 0 评论 -
Umi和Dva结合传递仓库数据
首先是网页的url地址users,model里的subscription监听到了url地址,所以dispatch一个type:sava,sava直接找到了reducer里的save方法里,save方法里执行的就是返回data数据,返回的namespace叫users,主页面Index通过connect绑定仓库,且把仓库的namespace:users写到mapStateToProp里,并通过参数传递的方式给到index函数,组件里并赋值给dateSource...原创 2021-11-05 22:45:59 · 317 阅读 · 0 评论 -
Dva基本流程和文件目录规划
页面如果发起的是异步请求,异步请求自己是不能调数据回去给页面的,要中转到同步数据上,再返回到页面,因此同步是返回页面的唯一路线,同步就是Reducer,异步是Effect。原创 2021-11-03 22:01:22 · 163 阅读 · 0 评论 -
- create-umi-app ‘C:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 error Command failed. Exit code: 1 Command
安装umi脚手架时报错,找了好久原因都没办法解决,最后换成了npx成功了原创 2021-01-22 18:53:57 · 956 阅读 · 0 评论